を使用すると、ブラウザは、さまざまなファイル タイプとサイズで構成されるリストの中から、ダウンロードして表示する最適な画像を 1 つ選択できます。ピクチャ要素が幅広くサポートされているため、ブラウザにとらわれないレスポンシブな画像表示ページを簡単に作成できます。 Picture Element ここで紹介する具体的な例は、かなり画像を多用するウェブ コミックです。この例では、picture 要素を使用して、 、 、および イメージ形式である 3 つの一般的なファイル タイプからの選択を提供します。これらのファイル タイプはそれぞれ 5 次元の範囲で表示されるため、ブラウザは 15 の個別の画像から選択できます。ブラウザーは、受け入れ可能性の判断を満たすイメージ リストの最初のエントリを選択します。 AVIF WEBP JPG この画面は、デモのサンプル画像の 1 つの Picture Element コードを示しています。このデモでは、ここに示すように、各画像要素の後に空白行区切りが続きます。 <picture> picture 要素の内部には 要素のリストがあり、それぞれがブラウザが選択できる画像の選択肢を反映しています。 source 要素は 要素です。つまり、終了タグがなく、</source> タグがありません。代わりに、source 要素は、 属性のコンテンツ (画像ファイル名) によって識別されるリソースへのリンクを提供する役割を果たします。 source void srcset この例では、各ソース要素に 2 つの追加属性もあります。 1 つの属性は とラベル付けされ、そのコンテンツは、 で指定された画像に最も適したビューポート ディメンションのメディア クエリを表します。 2 番目の属性は とラベル付けされ、その内容は イメージの を表します。ブラウザが特定の MIME タイプをサポートしていない場合、その アイテムは無視されます。たとえば、現時点では、 ブラウザーは AVIF MIME タイプをサポートしておらず、そのブラウザーは AVIF ファイルの選択を単純に無視します。 メディア srcset type srcset MIME タイプ ソース Microsoft Edge pic 要素のコンテンツの最後のエントリは、リストされたソース画像のいずれも受け入れられない場合にフォールバック要素として名目上指定された 要素です。画像ファイルへの 属性ポインターに加えて、この img 要素には、画像の代替テキスト用の 属性と、ユーザーが キーを使用して画像間を簡単に移動できるようにする 属性があります。 img src 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 要素のソース コードと、ここに示されているブラウザーが取得するものとの間にいくつかの違いが示されています。 ブラウザーがソースのリストをスキャンし、最適と思われるソースを選択すると、このデバッグ キャプチャに示されているように、変数 にその srcset 値が割り当てられます。 this.currentSrc この画像は、提供されたリストからブラウザーが選択したものであり、ブラウザーが最適と判断したものであることに注意してください。一定範囲のビューポート サイズをカバーするために画像のサイズが固定されている場合、画像が完全に収まらない可能性があり、何らかの調整が役立つ可能性があります。サンプル デモでは JavaScript を使用して、ブラウザで選択した画像をビューポートの寸法に合わせてスケーリングします。これらの値、つまりビューポートの寸法に合わせてスケーリングされた画像の寸法は、次のように保存されます。 JavaScript から得られる他の用途がいくつかあります。 このデスクトップ コンピューターの Chrome Debugger は、デモ コミック、42 枚の画像、56 のリクエストと 2.1MB の転送で 2.5MB のリソースを消費し、1.22 秒で終了することを示しています。 でデモ漫画が見れます。コミックを生成したアプリのコードベースのドロップについては に注目してください。そして、あなたは でもっと多くの漫画を見つけることができます. Hyenas2 、私の GitHub リポジトリ 私の漫画のページ いつものように、コメント、批判、提案は大歓迎です