【2023年最新版】webp！srcset！picture! ratina！ HTMLで画像を最適化して表示する

こんにちは
エンジニアのタクヤです

普段はチームメンバーと協力しながら、Web制作のデザインからコーディング業務をおこなっています。
その中でいつも思うのですが、ウェブサイトにおける画像はとても重要な役割を担っていますよね。
サイトのファーストビューだったり投稿のサムネイルだったり、はたまた文章での説明の補助的な役割にイラストや写真を使うかと思います。
インパクトのあるデザインや分かりやすいコンテンツ作りには画像は欠かせませんね。

そんな画像ですが、取り扱いには注意が必要です。
例えば、大きいサイズの画像や多量の画像を使用するとデータ量が多くなりサイトの表示速度が遅くなることに繋がります。
表示速度が遅いと、ユーザビリティが悪くなり制作したサイトのコンテンツがユーザーに十分に伝わらない可能性があります。
そのため、次世代の画像形式のwebpやApple製品のratinaディスプレイに対応するためにsrcsetを用いるなどして、画像の最適化は必須になってきます。

画像の最適化に関しては、

などがあげられます。

今回はその中でもHTMLに関する部分について抜粋して紹介したいと思います。
HTMLで表示する画像のデータサイズやフォーマットを最適化していきます。

imgタグ(一般的)

まずは一般的なのimgタグを用いる方法です。

<img src="building01-800w.jpg" alt="建物" />

この記述だと、どんな時でもサイズが同じ画像を表示します。
パソコンでもタブレットでもスマートフォンでも同じ画像なので、大きいサイズの画像を用意しないといけません。
場合によっては横幅1920pxを超える大きさの画像を用意して、それをスマートフォンでも表示するとなると、かなり無駄なのがわかるかと思います。

最適化するには、圧縮した画像を使用するしか手はありません。
効果はいまひとつ、です。

画面サイズによって表示する画像を変更する（sizes属性、srcset属性）

ブラウザの画面幅によってサイズが違う画像を出し分けしたいのであれば、imgタグのsrcset属性とsizes属性を使用すればOKです。

<img srcset="building01-400w.jpg 400w, building01-600w.jpg 600w, building01-800w.jpg 800w" sizes="(max-width: 400px) 400px, (max-width: 600px) 600px, 800px" src="building01-800w.jpg" alt="建物" />

sizes属性

sizes属性は、表示する画像のサイズを指定することができます。
上記の参考コードのように、ビューポートを用いて指定することが一般的です。

参考コードを解説すると、
画面サイズが400px以下のときは 400px で表示
画面サイズが401px以上600px以下のときは 600px で表示
画面サイズがそれ以外の場合は 800pxで表示
といった感じです。

srcset属性

srcset属性は、表示する画像の種類を指定することができます。
上記の参考コードのように、画像のパス名と横幅の大きさを指定します。
横幅の大きさの単位はpxではなくx か wです。
wはpxを表し、xはピクセルの密度を表します。（ratinaディスプレイ関係）

参考コードを解説すると、
building01-400w.jpg という画像を 400pxで表示
building01-600w.jpg という画像を 600pxで表示
building01-800w.jpg という画像を 800pxで表示
といった感じです。

これで画面幅によって適切な画像を出し分けすることができるようになり、
大きい画像を使い回す無駄がなくなりました。

Ratineディスプレイに対応する（srcset属性）

次に先程と同様にimgタグのsrcset属性を使用してRatinaディスプレイに対応してみます。

srcset属性を使えば、MacやiPhoneのRatinaディスプレイにも対応した高画質も画像を表示することができます。
また逆に、Ratinaディスプレイじゃないときに小さいサイズの画像を表示することができるようになります。

<img src="building02-800w.jpg" srcset="building02-800w@2x.jpg 2x" alt="建物" />

参考コードを解説すると、
building02-800w@2x.jpg という画像を 2x の密度で表示
といった感じです。

これでRatinaディスプレイに対応できました。

pictureタグ（アートディレクション）

pictureタグを使用すれば、異なる画像の出し入れも可能になります。
sizes属性やsrcset属性は1つのimgタグ内で設定していましたが、pictureタグはよりわかりやすく記述できます。

<picture>
  <source media="(max-width: 400px)" srcset="building01-400w.jpg" />
  <source media="(max-width: 600px)" srcset="building02-600w.jpg" />
  <source media="(min-width: 601px)" srcset="building01-800w.jpg" />
  <img src="building01-800w.jpg" alt="建物" />
</picture>

PCとSPで表示させる画像を変えるには、メディアクエリでディスプレイサイズを指定しその範囲で display: none; をして切り替えることもできるかと思います。
ですがそれだと、不要な画像を読み込んでから display: none; しているので、無駄な読み込みが発生します。良くないです。

画像の切り替えには pictureタグを使いましょう。

pictureタグ（アートディレクション+Ratine対応）

pictureタグを使って、アートディレクションしつつRatina対応した例です。

<picture>
  <source media="(max-width: 400px)" srcset="building01-400w.jpg 1x, building01-400w@2x.jpg 2x" />
  <source media="(max-width: 600px)" srcset="building02-600w.jpg 1x, building02-600w@2x.jpg 2x" />
  <source media="(min-width: 601px)" srcset="building01-800w.jpg 1x, building01-800w@2x.jpg 2x" />
  <imgclass="test-class" src="building01-800w.jpg" alt="建物" />
</picture>

ちなみに、picutureタグにclass属性を付与したい場合は、imgタグの中に書きます。

pictureタグでWebpを使う

最後にpictureタグを使って、webpという形式の画像を表示させてみましょう！
Webpとは、あのGoogleが開発した画像形式で、jpegやpngなどの画像形式よりも軽量でより優れた次世代の画像形式です。
SEOの審査項目にもあるくらい、画像軽量化させることの意義は大きいということです。

<picture>
  <source type="image/webp" media="(max-width: 400px)" srcset="building01-400w.webp 1x, building01-400w@2x.webp 2x" />
  <source type="image/webp" media="(max-width: 600px)" srcset="building02-600w.webp 1x, building02-600w@2x.webp 2x" />
  <source type="image/webp" media="(min-width: 601px)" srcset="building01-800w.webp 1x, building01-800w@2x.webp 2x" />
  <img src="building01-800w.jpg" alt="建物" />
</picture>

sourceタグに type属性を追加するだけなので簡単ですね。
Webpを使えば、画像ファイルサイズをかなり軽量化できます。

まとめ

今回は、HTMLで画像を最適化して表示する方法について解説してきました！
imgタグ内のsrcset属性や、sizes属性、またwebpといった次世代の画像形式などご紹介いたしました。
その方法の中からその都度方法を変えて画像の最適化してみてください！

初級からより踏み込んだHTMLの学習はこちらの書籍がおすすめです。ぜひ御覧ください。

スポンサーリンク