BLOG株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。by一緒にラクーンのサービスをつくりませんか?採用情報カジュアル面談2022.3.29デザインChromeでの画像ぼやけ対策色々Chromesvgブラウザ差異こんにちは、デザイン部の田中です。先日出来上がったページの画像がぼやけてると指摘されて修正することがあったのですが、その際調べたところ解決法が複数あったので、体験談交えてメモ的に記録しておきます。自分のPCでは特に気になっておらず、完成してからデザインチェックに出したらChromeだけ画像が荒いんですが、と指摘が上がりました。ブラウザごとの見え方のサンプルも添えてご指摘いただいたのですが、これが結構ひどく、1pxの直線が左右にボヤっと影響しちゃってる感じ。(FirefoxはFirefoxでシャープかかりすぎな気もしますが。)そのページの画像はレスポンシブ対応でRetina対応の為半分の幅で表示されていた上に、縦の表示サイズに小数点以下(.5)が出ていたため、まず、これ原因かなー!と思ってPhotoshopで開き縦横ともに偶数にしてみました。ググりもせず対応し無駄な時間を過ごしたのを反省しつつググってみましたが、意外と有益なものはヒットせず、まあきっとSVG画像にすれば直るんだろうなと思い変更しました。(反省してないですね(笑))その時はこれで直りました。⇒この時最善だと思った方法「画像は全部SVGにしとこう!」しかし、実はもっと簡単な解決策が存在した。画像」などブラウザ差異に着目して検索してたんです。明らかに最初からこうするべきでしたね。目の悪さに加えて思考回路のポンコツさも露呈してしまいました。-webkit-optimize-contrast;と全img要素に指定するだけ!!こんな簡単な話でした。テストしてみたものが以下です。指定する方法もあるそうです。プロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。docs_本来は上記のような設定のプロパティだそうですが、なぜか副次的にぼやけがクリアになる効果もあるそうです。この方法は、画像にborderやbox-shadowがあると効かないそうですので、現実的に使える方法ではありませんでした!まとめsvgは精細な写真などの画像を書き出すと計算式が複雑になってしまいサイズが膨大になってしまうため、pngやjpgで進めたい場合も多いかと思います。今回の私の例では大き目のイラスト画像ではあるものの、元がillustratorでつくられた画像だったためどちらの方法も選択可能でした。後で思いつきましたが、デザインチェックしていただいたデザイナーさんのPCと私のPCで見え方が違ったのは、デザイナーさんは4kで小さめの画面のノートPCを使っており、私はHDのモニタを外付けで使用していて、デザイナーさんPCはカスタムスケーリングで表示%を変えていた(ドットバイドットでない)為荒く見えていたのかなと思います。現在4kモニタも主流になってきていますので、同じ環境のユーザーは多いかと想定されます。今後こういった事情にも気を付けていきたいですね!ラクーングループでは検証機や自PCも比較的最新のものを使わせていただけるので、今回のように様々な問題に気づきやすい環境が整っていますよ!さて、そんなラクーングループではエンジニア・デザイナーを募集中です。