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

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

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

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

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

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

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

画像を割り切れるサイズにする

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

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

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

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

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

【HTMLのみ】PCとスマホで違う画像に切り替えるならpictureタグを使う方法が最強!【レスポンシブ対応】

styleで解決する

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です