ブラウザの画像読み込みを最速にする方法

Picture Elementを使用すると、ブラウザは、さまざまなファイル タイプとサイズで構成されるリストの中から、ダウンロードして表示する最適な画像を 1 つ選択できます。ピクチャ要素が幅広くサポートされているため、ブラウザにとらわれないレスポンシブな画像表示ページを簡単に作成できます。

ここで紹介する具体的な例は、かなり画像を多用するウェブ コミックです。この例では、picture 要素を使用して、 AVIF 、 WEBP 、およびJPGイメージ形式である 3 つの一般的なファイル タイプからの選択を提供します。これらのファイル タイプはそれぞれ 5 次元の範囲で表示されるため、ブラウザは 15 の個別の画像から選択できます。ブラウザーは、受け入れ可能性の判断を満たすイメージ リストの最初のエントリを選択します。

この画面は、デモのサンプル画像の 1 つの Picture Element <picture>コードを示しています。このデモでは、ここに示すように、各画像要素の後に空白行区切りが続きます。

picture 要素の内部にはsource要素のリストがあり、それぞれがブラウザが選択できる画像の選択肢を反映しています。 source 要素はvoid要素です。つまり、終了タグがなく、</source> タグがありません。代わりに、source 要素は、 srcset属性のコンテンツ (画像ファイル名) によって識別されるリソースへのリンクを提供する役割を果たします。

この例では、各ソース要素に 2 つの追加属性もあります。 1 つの属性はメディアとラベル付けされ、そのコンテンツは、 srcsetで指定された画像に最も適したビューポート ディメンションのメディア クエリを表します。 2 番目の属性はtypeとラベル付けされ、その内容はsrcsetイメージのMIME タイプを表します。ブラウザが特定の MIME タイプをサポートしていない場合、そのソースアイテムは無視されます。たとえば、現時点では、 Microsoft Edgeブラウザーは AVIF MIME タイプをサポートしておらず、そのブラウザーは AVIF ファイルの選択を単純に無視します。

pic 要素のコンテンツの最後のエントリは、リストされたソース画像のいずれも受け入れられない場合にフォールバック要素として名目上指定されたimg要素です。画像ファイルへのsrc属性ポインターに加えて、この img 要素には、画像の代替テキスト用のalt属性と、ユーザーがTABキーを使用して画像間を簡単に移動できるようにするtabindex属性があります。

サイズに選んだマジックナンバーについては、最初は幅のブレークポイント用に 3 つの画像サイズを作成しました。これは十分に機能し、さらに 2 つの srcset サイズを追加し、ブレークポイントとサイズを再調整してより細分性を高めました。これらの値は、Bootstrap ブレークポイントの選択に基づいています。

• ブレークポイント名 X- 小 小 中 大 X- 大 XX- 大
• ブレークポイント <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• コンテナ 100% 540px 720px 960px 1140px 1320px
• 画像サイズ 576px 768px 992px 1200px 1400px

しかし、読み込まれた HTML の Chrome デバッグ画面には、上記の img 要素のソース コードと、ここに示されているブラウザーが取得するものとの間にいくつかの違いが示されています。

ブラウザーがソースのリストをスキャンし、最適と思われるソースを選択すると、このデバッグ キャプチャに示されているように、変数this.currentSrcにその srcset 値が割り当てられます。

この画像は、提供されたリストからブラウザーが選択したものであり、ブラウザーが最適と判断したものであることに注意してください。一定範囲のビューポート サイズをカバーするために画像のサイズが固定されている場合、画像が完全に収まらない可能性があり、何らかの調整が役立つ可能性があります。サンプル デモでは JavaScript を使用して、ブラウザで選択した画像をビューポートの寸法に合わせてスケーリングします。これらの値、つまりビューポートの寸法に合わせてスケーリングされた画像の寸法は、次のように保存されます。 JavaScript から得られる他の用途がいくつかあります。

このデスクトップ コンピューターの Chrome Debugger は、デモ コミック、42 枚の画像、56 のリクエストと 2.1MB の転送で 2.5MB のリソースを消費し、1.22 秒で終了することを示しています。 Hyenas2でデモ漫画が見れます。コミックを生成したアプリのコードベースのドロップについては、私の GitHub リポジトリに注目してください。そして、あなたは私の漫画のページでもっと多くの漫画を見つけることができます.

いつものように、コメント、批判、提案は大歓迎です