【解決策あり】HTMLで画像がぼやけてしまう理由と対策

htmlで画像を表示させた際に、下記のように画像がぼやけてしまうことがありませんか？



そんな時の解決法に関する記事です。

なぜ画像がぼやける？

元々の画像のサイズが小さい

画像がぼやける原因は、表示させたいサイズよりも小さい画像を使っていることによることが多いです。
元々小さい画像を拡大すると解像度が粗くなり、ぼやけて見えてしまいます。
また、他のぼやける原因としては、Google ChromeやiPhoneのみで起こりうる原因などもあります。

画像のぼやけ解決方法

解決方法① 表示させたいサイズより2倍大きい画像を使う

まず、表示させたい画像のサイズよりも大きいサイズの元画像を準備するのがよいです。
更に、iPhoneやiPadでのぼやけを防止するために、2倍大きいサイズの画像を準備するのがよりよいでしょう。
iPhoneやiPodでは、通常のディスプレイと異なり、Retinaディスプレイというディスプレイが使われています。
このディスプレイを使うことで、高画質の画像が表示できるようになっているのです。
しかし、注意が必要で、通常のサイズの半分で表示されるように調整が入るため、表示させたいサイズと同じサイズの画像を用意するとぼやけてしまうのです。
横・縦ともに2倍のサイズを持つ画像を用意するのがベターです。

解決方法② CSSで調整

画像がぼやけるケースはGoogle Chrome のみで発生しているケースもあるかと思います。
その場合には、CSSで調整するのがよいです。
下記CSSコードをimgにあてることで、ぼやけてた画像が幾分かきれいになります。
推奨１image-rendering: -webkit-optimize-contrast;

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

image-rendering は画像の拡大・縮小をするためのアルゴリズムを設定できるプロパティです。
推奨２backface-visibility: hidden;

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

backface-visibility は3次元コンテンツにおいて、ユーザーに対して裏側を向いたときに、裏面の扱いをどうするかを設定するプロパティです。

解決方法③ デバイスサイズごとに画像を用意する

デバイスサイズごとに画像を用意するのも解決方法の1つです。
ただし、デバイスサイズは多岐に渡り、都度用意するのがめんどくさいですし、設定の変更もめんどくさいと思います。
スマホ、PC、タブレットで切り替えるなどの対応が現実的な気がします。

画像の調整はめんどくさいけど重要

画像の調整は細かいところまで気にし始めるとかなりめんどくさいことではありますが、ぼやけた画像ではサイトの印象が悪くなってしまうので、無視できない事項の1つかと思います。
サイズが大きい画像は綺麗な画像を表示するために必要ですが、大きすぎるとサイトの表示スピードが遅くなってしまいます。
サイトパフォーマンスのと画像のクオリティを比較して、ちょうど良いバランスで実装するのがよいでしょう。