【2022年】Chromeで画像がぼやける場合のCSS対処法

Chromeで縮小画像がぼやける問題のCSSを使った最新の解決法です。

Chromeでは縮小画像がぼやけて表示される

長年Chromeでは縮小画像が他のモダンブラウザに比べてぼやけて表示される問題があます。

しかし現在では以下のスタイルを当てることで特に問題なく改善できます。

img {
    image-rendering: -webkit-optimize-contrast;
}

「backface-visibility: hidden;」を当てる方法もありますが、こちらは画像にborderやbox-shadowがあると効かないのでおすすめできません。

「image-rendering」は画像を拡大縮小するアルゴリズムの設定です。

プロパティ	意味
image-rendering: auto;	デフォルト値。拡大縮小でぼかした滑らかな表示になる。
image-rendering: crisp-edges;	拡大縮小でぼかしたり滑らかに処理されずエッジを保った表示になる。
image-rendering: pixelated;	ピクセルで構成されたような表示でピクセルアートなどに使う。

ブラウザ依存が強く、2021年現在ではベンダープレフィックスで対応する必要があります。

今回使用した「image-rendering: -webkit-optimize-contrast;」は「image-rendering: crisp-edges;」のChrome用ベンダープレフィックスになります。

当ページでChromeデベロッパーツールを開いて以下の画像を選択し、以下の画像のように「image-rendering: -webkit-optimize-contrast;」をオンオフ切り替えてみてください。

劇的な変化はしませんが、よく見ると画像が少しハッキリと表示されるのが見れるかと思います。

以前にも複数の解決法が提案されていましたが、どれも何かしらの問題がありました。

Chromeの画像がぼやける問題で、CSSを使った対処法で最も知られているのがこのスタイルを当てる方法です。

img {
    -webkit-backface-visibility: hidden;
}

しかし、この方法は画像にborderやbox-shadowがあると効かなくなる致命的な欠点があるのでおすすめできません。

img {
    -webkit-transform: translateZ(0);
}

transformを使った方法もありますが、内部処理は同じなのか同様の欠点があります。

Chromeで画像がぼやけるのは、設定で「ハードウェアアクセラレーション（GPU処理）」がオンになっている場合のみで、デフォルトでオンです。

backface-visibilityやtranslateZは三次元処理でz軸（奥行き）に関するスタイルで、これらを当てることでハードウェアアクセラレーションに影響をあたえて画像をぼやけなくしているようですが、調べても理屈がよくわかりませんでした。

サイトデザインの変更やモニターの解像度など、将来的な変化に対応するため画像サイズは大きめにしておきたいので無理です。

またレスポンシブ表示では画像の表示サイズが変わることを前提としていますし、サムネイル画像、広告画像などに対応できないため根本的な解決にはなりません。

同上。また用意するのが面倒くさい、表示速度が遅くなる、画面の解像度に依存するスクリーンショットなどは大きな画像を用意できない場合もあります。

Chromeの設定で「詳細設定→システム→ハードウェアアクセラレーションが使用可能な場合は使用する」をオフにすると改善されますが、自分の環境だけです。

以前Chromeに「hoverなどのアニメーション時に画像が右に1pxずれる」という問題がありましたが、これはバージョンアップで改善された記憶があります。

画像がぼやけるのも将来的に改善されるかもしれませんので、それまでは今回の方法を参考に対処しておきましょう。