画像の表示について徹底解説

2023.06.27 画像の表示について徹底解説します

はじめに

概要

画像の表示方法には、主にimgタグとCSSのbackground-imageを使用する方法があります。これらの方法の違いを解説し、より良い画像表示を実現するための理解を深めることができます。

目的

2つの違いについて
便利なプロパティ
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

2つの違いと特徴について

imgタグ

画像のwigthやhightを指定しなくても表示される。
hightの初期値はautoとなり、横幅に応じてアスペクト比(縦横幅)が変更し画像が崩れません。レスポンシブ対応に向いている。

画像は繰り返し表示されることはない。

background-image

hightを指定しないと表示されず、autoは設定できない。
hightは固定値となり、横幅のみサイズ拡大される。レスポンシブ対応には向いていない。

初期値では画像が繰り返し表示されることになる。これを活用すれば、小さな画像で背景デザインを表現することができることもある。

便利なプロパティ

画像を綺麗に表示させるためのプロパティの一部と便利なオプションを紹介します。

imgタグ

object-fit: cover;
object-position: center;
こちらを指定すれば、アスペクト比を指定したときにも、画像を綺麗に表示してくれます。

imgタグ内にloading=”lazy”を設定するだけで、遅延読み込みをしてくれます。ただし、ファーストビューに関わる画像などにはこちらの指定は避けるべきです。

background-image

background-repeat: no-repeat;
background-size: cover;
background-position: center;

background-attachment: fixed;を使用することで、要素の背景画像がスクロールに追従するか、固定されるかを制御できます。この指定により、視覚的なデザインが表現されます。

以上です。お疲れ様でした。
個人的な意見としては、heightの値をautoに指定できるimgタグを基本的に使用します。background-imageはheightの値をautoに指定できないため、レスポンシブ対応には適していないと考えています。そのため、様々な横幅に対応するためには、別途調整が必要になるので注意が必要です。

まとめ