画像周りのコーディングでサイトパフォーマンスを向上させる方法

コード例

<picture>
  <source media="(max-width:768px)" srcset="sample-sp.png" width="400" height="200" loading="lazy">
  <img src="sample-pc.png" alt="サンプル" width="800" height="400" loading="lazy">
</picture>

Lazy loading

<img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

レイアウトシフト対策

<img>要素のタグにwidth="600" height="400" を必ず付与する。

Pictureタグ

画面幅に応じて画像を出し分ける時は<picture> を使用する。

あわせて読みたい

画像の切り替えレスポンシブ(pictureタグ) PC時とスマホ時で別の画像を表示させたい！そんなときに便利な方法をご紹介します。 実装イメージ コード  HTML <picture> <source media="(max-width: 768px)" s...