HTMLの中で正しくサイズ変更されたWebPイメージをロードするために

最高のサイズとフォーマットの読み込みイメージは常に複雑でした.With the Avif image format around the corner , 考慮するもう一つの形式があります、そして、出荷イメージは容易に得られません.開発者は伝統的なイメージ形式を選択しなければならないpng and jpeg , ほとんど主流webp 形式、新しいavif 画像形式、および他の多く.
利用可能なオプションのブラウザサポートは大きく異なります.

伝統的なイメージ形式png , jpeg , などが完全に支持されている

webp is nearly full browser supported

avif is only supported in Chrome .

あなたが船を決めるならばwebp あるいはavif , あなたのユーザーのために動作し、新しいと光沢をサポートしていないブラウザのイメージの変種に戻るローディング戦略を検討する必要があります.

新しい画像フォーマットをロードする方法
最良のサポートされている画像形式をロードする方法はいくつかあります.クライアント側のJavaScriptアプリケーションを構築しているなら、feature detect image format support そして、動的に正しいイメージをロードします.また、Serverlessなエッジ機能やサービスワーカーを読むこともできますthe Accept header of image requests そして、最高のイメージ形式(対応するブラウザ)で応えてくださいwebp HTTPヘッダを含むAccept: image/webp,*/* ).
HTMLのみのソリューションを好む場合は、応答画像を活用することができますthe picture element 最良の画像形式をロードします.
ロードする方法をカバーするスニペットを検索した後webp 使用picture 元素無数の時代、私はそこに多くの材料があることを知っている.しかし、残念なことに、表面を掻くことよりさらに少ない数の記事が進みます.ほとんどのチュートリアルではwebp フォーマットと残りを忘れてください.

最初のステップ:どのように画像要素を使用してWebP画像をロードするには?
下のスニペットを見てみましょう.Aをロードする最初のステップですwebp or avif イメージ.

<picture>
  <!-- load avif if supported -->
  <source srcset="img/image.avif" type="image/avif">
  <!-- load webp if supported -->
  <source srcset="img/image.webp" type="image/webp">
  <!-- load in case no `source` applies 
        and use attributes for presentation -->
  <img src="img/image.jpg" alt="Alt Text!">
</picture>

このスニペット負荷webp or avif 画像がブラウザをサポートしている場合.そうでなければ、jpeg . グレートスタッフ仕事完了!
それほど速くはない!このpicture 要素はピクセル密度、デバイスサイズ、またはCSSレイアウトを考慮していません.あなたがレイアウトとイメージの寸法を無視していると低速接続で携帯電話上の350 pxワイド画像をロードすると、世界のイメージ形式は、すべての無駄なデータと計算を保存します.

完全なスニペット-応答の読み込み方法webp イメージ
私が応答をロードするために書いたより完全なスニペットwebp イメージからthe Contentful Images API 以下のように見えます.

<picture>
  <!-- load webp images if supported -->
  <source type="image/webp"
    srcset="
      https://images.ctfassets.net/.../paris.jpg?w=100&fm=webp 100w,
      https://images.ctfassets.net/.../paris.jpg?w=200&fm=webp 200w,
      ..."
    sizes="
      (max-width: 768px) calc(100vw - 3em),
      (max-width: 1376px) calc(50vw - 8em),
      550px">
  <!-- load traditional supported image format -->
  <img
    srcset="
      https://images.ctfassets.net/.../paris.jpg?w=100&fm=jpg&fl=progressive 100w,
      https://images.ctfassets.net/.../paris.jpg?w=200&fm=jpg&fl=progressive 200w,
      ..."
    sizes="
      (max-width: 768px) calc(100vw - 3em),
      (max-width: 1376px) calc(50vw - 8em),
      550px"
    src="https://images.ctfassets.net/.../paris.jpg"
    alt="Buildings of Paris"
    loading="lazy"
    decoding="async"
    width="1243"
    height="1500">
</picture>

このスニペットは口いっぱいです(そして、私は私がこのHTMLを書くのを楽しむと言うことができません).
The source 要素はtype 属性だけでなくsrcset and sizes . These two attributes are core parts of responsive images and can be applied to the source element, too . srcset and sizes ブラウザが画面サイズやその他の要因に応じて適切にサイズの画像を読み込むことができるように追加のレイアウトとソースのURL情報を与えます.このpicture 要素は、最高の形式だけでなく、最高の形式で画像をロードします.
加えてimg 要素は、より多くの属性を含みます.含まれていることに注意してくださいimg だけでなくpicture '解決策.The source 要素の仕事を強化し、この1つのイメージについての追加情報源を提供することです.
たとえAがあってもpicture イメージの周りの要素は、まだ最高のユーザーエクスペリエンスを提供するイメージベストプラクティスを考慮する必要があります:

alt – 支援技術のための代替テキストを定義するか、イメージがロードしない場合

loading – define an image lazy loading strategy

decoding – define an image decoding strategy

width/height – provide an aspect ratio to avoid layout shifts

私が上記のもののような要素を書くたびに、私はそれがそれであるにちがいないかどうか疑問に思います.それは、Webプラットホーム自体によって解決されるかもしれない問題のための非常に多くのキーストロークです.多分、私はいつか提案を開くつもりです、しかし、私は誰かがすでにそれを賭けたことを賭けます.🙈

追加リソース
応答画像を読み込む最良の方法についての詳細を以下のリソースを見てください.

Malte Ubl shared ways to optimize images to the extent

The Next.js framework started abstracting all image best practices in an Image component. It's a promising approach for sure!