Google Chromeで画像がぼやける場合の対処方法

先日、Chromeで作成したサイトを見てると画像がぼやけて見える問題にぶち当たりました。

少し調べてみると、どうやら元の画像サイズを縮小して使用すると発生するようです。Chromeだけ処理の方法が違うんですかね。。。？

ということで今回は「Google Chromeで画像がぼやける場合の対処方法」をご紹介します。

目次非表示

目次へ

画像をぼやけさせないための対処法

画像がぼやけて見えると、サイトのクオリティは一気に落ちるので「ぼやけてしまう」というのは絶対に防ぎたいところ。

対処法はとても簡単に行えるものなので、さらっとご紹介します。

ブラウザにリサイズさせなければ、そもそも発生しないことなので、究極は表示サイズに合わせた等倍の画像を用意することです。

しかし、高解像度のディスプレイに対応するために2倍や4倍の画像を使用する場合があると思います。その場合は画像サイズをちゃんと割り切れるサイズにしましょう。

表示サイズが150x300pxなら、画像のサイズは150x300px（等倍）か300×600ピクセル（2倍）か600x1200px（4倍）というようにしてください。

つまりは画像の横幅・縦幅が少数になるのがNG。必ず整数になるようにしましょう！ということです。

ただ、2倍・4倍の画像を縮小して使うと画像読み込みに時間がかかってしまうので、pictureタグを使ってディスプレイに応じて画像を切り替える方法がおすすめです。

「backface-visibility: hidden;」というスタイルを該当するimgタグに適用する。これだけ。あら、簡単！

※場合によってはうまくいかない場合もあるようです。

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

画像のリサイズがめんどくさいという所まで来てしまっている人は、まずスタイルで解決する方法からやってみてください。

以上Google Chromeで画像がぼやける場合の対処方法でした！