WebP！srcset！picture！Retina対応！HTMLで画像を最適化して表示する

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです

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

そんな画像ですが、取り扱いには注意が必要です。
例えば、大きいサイズの画像や多量の画像を使用するとデータ量が多くなりサイトの表示速度が遅くなることに繋がります。
表示速度が遅いと、ユーザビリティが悪くなり制作したサイトのコンテンツがユーザーに十分に伝わらない可能性があります。
そのため、次世代の画像形式のWebPやApple製品のRetinaディスプレイに対応するために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はピクセルの密度を表します。（Retinaディスプレイ関係）

参考コードを解説すると、

• building01-400w.jpgという画像を400pxで表示
• building01-600w.jpgという画像を600pxで表示
• building01-800w.jpgという画像を800pxで表示

といった感じです。

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

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

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

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

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

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

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

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>

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

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

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

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

<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" />
  <img class="test-class" src="building01-800w.jpg" alt="建物" />
</picture>

ちなみに、pictureタグに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の学習は以下の書籍がおすすめです。
ぜひ御覧ください。

Amazon

Amazon

amzn.to