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

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

スポンサーリンク

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

長年Chromeでは縮小画像が他のモダンブラウザに比べてぼやけて表示される問題があり、2021年1月現在も直っていません。

2021年おすすめのCSS対処法

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

img {
    image-rendering: -webkit-optimize-contrast;
}
左が通常時、右がスタイル適用時。

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

image-renderingとは?

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

プロパティ意味
image-renderingauto;デフォルト値。拡大縮小でぼかした滑らかな表示になる。
image-renderingcrisp-edges;拡大縮小でぼかしたり滑らかに処理されずエッジを保った表示になる。
image-renderingpixelated;ピクセルで構成されたような表示でピクセルアートなどに使う。
参考:ドット絵やQRコードをボケさせたくないときに使えるCSS – Qiita

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

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

効果の確認方法

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

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

その他の対処法

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

backface-visibility: hidden;を当てる

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

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

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

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

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

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

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

画像を縮小表示にならないサイズで使用する

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

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

表示サイズの2倍、4倍のサイズの画像を使用する

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

ハードウェアアクセラレーションを無効にする

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

まとめ

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

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

コメント

タイトルとURLをコピーしました