【初心者でもわかる】imgの画像がぼやける理由と対策

#どうも7noteです。なんだか画像がぼやけてるような気がする時の対処法

imgタグの画像は画像データと全く同じpxに指定するのが基本！

画像データが大きいが、無理に150pxの幅の箇所に画像を使用してしまうとぼやけてしまいます。（おそらくChromeのみ）

画像がぼやけないためには

①使う予定の場所のpxに合わせて画像をトリミング

一番正攻法です。
ただ、レスポンシブに対応しなければならない場面もあると思うので、実際にはPCでの指定よりも大きなサイズの画像が必要になうｒことが多いです。

style.css

img {
  width: 100px;  /* 画像データの横幅も100px */
}

②画像データを使う場所の2倍の大きさで書き出す。

imgの特徴として、元データの半分のサイズで使う場合などは比較的綺麗み見えます。

レスポンシブサイトを作るときは、スマートフォンの画像サイズに合わせて画像を書き出す必要があります。
スマホは倍の画角の画像が必要になるため、横幅350pxのスマホに幅いっぱい画像を表示する場合最低でも700pxの画像が必要になります。
しかし、パソコンでは幅を400pxの場所に画像を使う場合、画像は700pxに対して使う場所は400pxと綺麗に割りきれません。

そこで、画像サイズを800pxで予め書き出しておくことで、PC表示でもスマホでも綺麗に見せることができます。

③画像をPC用とスマホ用2種類に分ける

多くの場合、レスポンシブサイトのため少しでも軽くする意図で1枚の画像でやろうとしますが、画像の綺麗さを優先するのであればPCもスマホも別の画像として登録しておいて呼び出す方が良い出しょう。

index.html

<img src="./images/img_pc.jpg" class="pc_img">  /* pc用の画像 */
<img src="./images/img_sp.jpg" class="sp_img">  /* スマホ用の画像 */

style.css

.pc_img {
  display: inline;
}
.sp_img {
  display: none;
}

@media screen and (max-width: 700px) {
  .pc_img {
    display: none;
  }
  .sp_img {
    display: inline;
  }
}

※クラスを使わずに、pcとスマホの画像を自動で切り換える方法もあるので、今度記事にします。

④CSSで解決

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

これが一番簡単かも。

参考元：https://creativememomemo.com/chrome_image_blur/

まとめ

CSSで一応解決できるので、いろいろ紹介したけど結局④の方法が一番良いかも。
③のpcとスマホで画像を切り換える方法は全く違う画像に切り換える方法としても使えるのでむしろそっちの使い方の方が主流かも。

なんにせよ気兼ねなく自由に画像を書き出してそのまま使えるようになる時代になるといいですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ