画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。

レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。

A picture element to load correctly resized webp images in HTML
by Stefan Judis

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 2021年現在、画像の主要フォーマット
• 新しい画像フォーマットを読み込むための取り組み
• 最初のステップ: picture要素でwebp画像を読み込むには
• 完全版: レスポンシブ対応のwebp画像を読み込む方法
• 追加のリソース

2021年現在、画像の主要フォーマット

画像を最適なサイズとフォーマットで読み込ませることは、常に複雑でした。avif画像が間近に迫っているため、検討すべきフォーマットがさらに増え、画像のロードは簡単ではなくなっています。

デベロッパーは、pngやjpgなどの従来の画像、最近主流のwebp画像、新しく加わるavif画像など、さまざまな画像フォーマットを選択する必要があります。

各画像のブラウザサポートには大きな違いがあります。

• 従来の画像フォーマット（png、jpgなど）は、完全にサポートされています。
• webpは、IEを除くすべてのブラウザにサポートされています。
  ※webpのサポートブラウザ
• avifは、Chromeでのみサポートされています。
  ※avifのサポートブラウザ

画像にwebpやavifを採用する場合は、ユーザーに有効な読み込み方法を提供し、新しい画像をサポートしていないブラウザ用にフォールバックで代替画像を提供する必要があります。

新しい画像フォーマットを読み込むための取り組み

サポートされている最適な画像フォーマットを読み込むには、いくつかの方法があります。

クライアントサイドのJavaScriptアプリケーションを構築している場合は、画像フォーマットのサポートを検出して、正しい画像を動的にロードさせることができます。また、サーバーレスのエッジ機能やサービスワーカーを使用して、画像リクエストのAcceptヘッダを読み取り、最適な画像フォーマットで提供することもできます。webpをサポートするブラウザには、Accept: image/webp,*/*がHTTPヘッダに含まれます。

HTMLだけで解決したい場合は、レスポンシブ画像とpicture要素を使用して、最適な画像フォーマットを読み込むことができます。

picture要素を使用してwebp画像を読み込む方法を取りあげたスニペットを検索した結果、私は世の中にたくさんの資料があることが分かりました。しかし、残念なことに、それらは表面的なことを説明しているだけでした。ほとんどのチュートリアルでは、webpフォーマットを読み込むだけの方法が紹介されており、レスポンシブやフォールバックには触れられていません。

最初のステップ: picture要素でwebp画像を読み込むには

下記のスニペットをご覧ください。
このHTMLは、webpやavifの画像を読み込むための最初のステップです。

このスニペットはブラウザがサポートしている場合、webpまたはavif画像を読み込みます。サポートされていない場合はjpgを読み込みます。素晴らしいですね。

しかし、これだけではダメです。
このpicture要素では、ピクセル密度、デバイスサイズ、CSSレイアウトを考慮していません。レイアウトや画像のサイズを無視して、3500pxの幅の画像を低速回線のスマホで読み込んだ場合、無駄なデータと計算をすべて保存できる画像形式は世界中に存在しません。

完全版: レスポンシブ対応のwebp画像を読み込む方法

Contentful Images APIからレスポンシブ対応のwebp画像を読み込むためのHTML、より完成度の高いスニペットは下記の通りです。

Images APIを使用する利点は、クエリパラメータを使用して画像をアップロードし、さまざまなフォーマットをリクエストできることです（L.5,6のfm=webpは画像を自動的にwebpに変換します🎉）

source要素には、type属性だけでなく、srcsetとsizesが含まれています。この2つの属性は、レスポンシブ画像のコア部分で、source要素にも適用できます。srcsetとsizesは、レイアウトとソースURL情報を提供するための属性で、ブラウザはスクリーンサイズに応じて適切なサイズの画像を読み込むことができます。このsource要素は最適なフォーマットだけでなく、最適なサイズも読み込みます。

さらに、img要素にはより多くの属性が含まれています。インクルードされたimgは、pictureのフォールバックだけではないことに注目してください。source要素の役割は、このインクルードされた1つの画像に追加のソース情報を提供します。

画像の周りにpicture要素があっても、最高のユーザーエクスペリエンスを提供するためには、画像のベストプラクティスを考慮する必要があります。

• alt: 代替テキストを定義するか、画像が読み込まれない場合
• loading: 画像の遅延読み込み
  参考: 画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
• decoding: 画像のデコード
• width/height: レイアウトのずれを回避するためのアスペクト比

上記のようなコードを書くたびに「こんな大変なことをしなければならないのか」と思ってしまいます。Webプラットフォーム自体で解決できる問題なのに、こんなにたくさんのキー入力が必要なのかと。

もっとシンプルなHTMLで書けるようになることを願っています。私はいつか提案するかもしれませんが、きっと誰かがすでに動いているでしょう🙈

追加のリソース

レスポンシブ画像を読み込む最良の方法について詳しくは、下記のリソースをご覧ください。

• Maximally optimizing image loading for the web in 2021
• Image Component and Image Optimization
• webpファイルをPhotoshopで開くことができるPhotoshop CC対応の機能拡張 -AdobeWebP