を使用すると、ブラウザは、さまざまなファイル タイプとサイズで構成されるリストの中から、ダウンロードして表示する最適な画像を 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 リポジトリ 私の漫画のページ いつものように、コメント、批判、提案は大歓迎です

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps