imagesizeとimagesrcsetで応答画像をプリロードする方法

5742 ワード
html performance テキストリンク
今日は記事を読みましたPreload late-discovered Hero images faster . ブラウザの読み込み動作を調整し、改善する場合、リソースをプリロードする方法の良い概要です.この記事についてのクールなもの;私は、応答画像の読み込みを高速化するために最近追加されたWebプラットフォーム機能を発見した.
あなたのページに以下の応答イメージを持っていると仮定しましょう.
<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
     sizes="100vw" 
     alt="...">
The srcset and sizes このイメージ要素の属性は、ビューポート幅全体にわたる情報を持つブラウザを提供する100vw ) そして、それは400 pxから1600 pxまでの3つのサイズで利用可能です.この情報を使用すると、ブラウザは小さな画面で高解像度の画像データを無駄にせずに最適な画像を読み込むことができます.
あなたは、しかし、それを考慮する必要がありますbrowsers load resources in a particular order . 彼らは通常スタイルシートやフォントのような重要なリソースの後に画像を要求する.この読み込み順序を変更し、リソースを再優先するには、<link rel="preload"> ドキュメント内の要素head その特定のリソースが優先されるか、すぐにドキュメントによって要求されることを知らせるために.
<!-- preload a font that will be discovered later -->
<link rel="preload" 
      href="fonts/cicle_fina-webfont.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>
あなたがプリロードについてもっと学びたいならば、私は記事を見ることを勧めますPreload: What Is It Good For? .
しかし、どのように応答画像をプリロードしますかsizes and srcset JavaScriptコンポーネントがレンダリングされるときに、DOMに後で注入される属性

REL =" preload "によるプリロード応答画像


それがわかる iamgesrcset and imagesizes made it into the spec . これらの属性を使用することができますlink 要素をブラウザーに与える高優先度応答画像の情報をsizes and srcset 属性.
<head>
  <!-- Hey browser! Please preload this important responsive image -->
  <link rel="preload"
        as="image" 
        imagesrcset="
          image-400.jpg 400w, 
          image-800.jpg 800w, 
          image-1600.jpg 1600w" 
        imagesizes="100vw">
</head>
<body>
  <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
       sizes="100vw" 
       alt="...">
</body>
imagesrcset and imagesizes 同じ規則に従ってくださいsrcset and sizes on img あなたがイメージ自体のために使う同じ属性値を再利用することができるように、要素.

ImageSRSetとImageSizeをリンク要素に使用するときに考慮すること

imagesizes and imagesrcset 属性付きのリンク要素でのみ動作するrel="preload" and as="image" . また、href でlink ブラウザをサポートしていないため、ブラウザがより適切なイメージをロードするため、無駄なイメージを要求しません.

ブラウザサポート


Caniuseのブラウザサポートデータはありません.書き込み時のCOMまたはMDN.しかし、あなたは見ることができますthe Chrome status ticket for imagesrcset and imagesizes , そして、このWebプラットフォームの追加は、現在クロム🙈) 事.

にもかかわらず、最近クロムの市場シェアを見ているroughly 70% ), それはチェックアウトする何かだ!ハッピープリロード!🐎

追加リソース

  • Preload late-discovered Hero images faster
  • Preloading responsive images
  • Spec for the link element
  • MDN page for the link
  • Chromestatus page for imagesizes and imagesrcset
    • 白駿1373:バイナリ8進法
    第14章.スレッド同期テクノロジー2