ゴシュ.もう一つの“どのように応答画像”記事?まあ、私は願っています.

背景の話：すべては

それで、同僚の一人が

WTF Dude, Firefox is loading some bunch of huge images even though I provided a proper srcset and sizes attribute.

プログラミング経験の20年で、これらの現代でも、私とチームは若干の奇妙なブラウザーバグをここで、そして、そこで、私がすぐに問題がコンピュータの前のものであると仮定しません.
しかし、この場合、とても重要な何かのために、私はそれがブラウザー問題であると思っていることができませんでした.特にサファリが同じように振る舞っていた.
こんな感じだった.

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  (max-width: 360px) 360px,
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

サムスン銀河系S 9のために360x740 これは1080px 一つそして、我々両方は少し混乱しました.
私はcliffhangersを作成したくないので、私はすぐに問題にジャンプします4x 実際の解像度としての密度は以上の方法です.それは1440x2960 (h x w) . それで、はい、それは4で割ります、そして、あなたは得ます360x740 .
さてブラウザはとても賢いです.

Yo Dog, I know you wanted 360w image on 360px screen but this equals 100% width on this mobile phone which is actually 1440px to have a sharp view so I will choose the closest that fits that image size which is 1080px

それは直接的に「直観的でない」です

あなたがそれについて考えるとき、それは意味をなします.しかし、そのためには、あなたはimg タグ付きsrcset ブラウザのオプションを指定するものです(私たちはこれを詳しく見ます).あなたは必ずしもシーンのディレクターではありません.ブラウザーが特定のイメージが中で提供されたものから特定のイメージであると思うならばsrcset それは与えられた情報に応じて最適ですが、それはそのイメージを選択します.

では、解決策は何でしたか？

我々は今何が起こったのか、なぜそれが起こったかを知っているし、私は解決策を教えて大好きです-しかし、それは本当にあなたが達成したいものに依存します.
この特定のケースでは、彼は特定のイメージを装置の幅に応じて届けたかったです.それで、彼が実際にしたかったイメージ(彼がしなければならなかった)を成し遂げることができたことは、以下の通りです:
以前

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  (max-width: 360px) 360px,
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

その後

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  ((max-width: 360px) and (-webkit-min-device-pixel-ratio: 4)) 90px,
  ...
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

So 360/4 = 90px だから、ブラウザが最高の画像を検索するときに、それは行く90px は360px それで、私は360 Wをとっています.」
それはクリーンなソリューションのように聞こえませんか?特に、あなたが意図的に非フィッティング品質(4倍以下の品質で正確にするイメージ)を提供するという事実について考えるとき.
しかし、次の時間は5 xまたは6 xのDPIデバイスは、市場では、より多くのsizes 属性.

あなたは問題についてたくさん話しました、しかし、あなたは何を推薦しますか？

私は推薦します:あなたが終わり結果として見たいものを考え始めてください.紙に描くかもしれない.その後、解決策は、それを達成するために役立つだろうと思うし、それはないかもしれないimg タグ付きsrcset でも多分picture 代わりにタグ.以下の説明を読んでください.
すべてのデバイス上で同じイメージが何であっても、異なるサイズでは、あなたの網膜の定義を使用するために行く必要がありますsrcset :

<img src="raw.jpg"  
srcset="
  image.jpg,
  [email protected] 2x,
  [email protected] 3x,
  [email protected] 4x,
  [email protected] 5x">

それはすべての仕様を理解することです

の重要な仕様の詳細

あなたが使うならばsrcset="foo.jpg 200w ..." それから、あなたはW3C specs ) 提供するsizes 属性をブラウザに指示する“このメディアのクエリには、画像が表示されますWhateverPXのサイズ”.
あなたが使うならばsrcset="foo.jpg 2x ..." Aを提供してはならないsizes 属性.それがピクセル密度だけで選ばれたイメージを意味するので、ブラウザーはちょうどそれを無視します.
によるとhttps://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element ( 09/2020 )img タグは属性をサポートしませんmedia , type . 次の段落を読んだら理解できるpicture とsource タグ.

強力な画像タグとそのソースの子

意味的に、W 3 C仕様を読むpicture 要素は、ちょうど「幽霊」コンテナですimg どのような画像を制御することができますタグはimg タグ.
W3C states :

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

MDN describes the picture タグのアートの方向性の目標としてタグ.彼らが意味するものは:全体の柔軟性.大きな違いimg[srcset][sizes] は、ブラウザのサイズは、デバイスのサイズに最適です選択しないことです.どのような正確な状況(メディアクエリ)の下で再生される画像を明示的に定義します.これは、ピクセル密度、画面比、高さ、何をしたいに基づいてすることができます.
画素には少なくともimg タグとそれが実際に役に立つために、それは1以上を含むべきですsource タグ.
例で行きましょう.

画像タグ付き網膜画像

我々は単にデバイスのピクセル密度に応じて画像をスケールアップしたい.

<picture>
 <source srcset="logo.png 1x, logo_x2.png 2x, logo_x3.png 3x">
 <img src="logo.png" alt="Cool Logo 👌">
</picture>

このサンプルは、除去してからオーバーエンジニアしているように見えるpicture and source タグを付けるimg タグは同じことを行います.

<img src="logo.png" alt="Cool Logo 👌" 
  srcset="logo.png 1x, logo_x2.png 2x, logo_x3.png 3x">

2 .比率に応じて異なる画像を選択する

<picture>
 <source 
  media="(min-aspect-ratio: 21/9)"
  srcset="2100x900px-img.jpg">
<source 
  media="(min-aspect-ratio: 16/9)" 
  srcset="1600x900px-img.jpg">
<source 
  media="(min-aspect-ratio: 1)" 
  srcset="300x300px-img.jpg">
 <img src="fallback_whatever.png" alt="💞">
</picture>

上記は単に画面のアスペクト比を考慮に入れます.だから600x600 実際の解像度3000x3000 どちらが5x 網膜はまだ300x300px-img.jpg これは最初のメディアクエリが一致するためです.

This is important to note: source tags are matched from top to bottom. If one hits, the following are ignored.

2 .適切な網膜画像を提供している比率に応じて異なる画像を選択する

<picture>
 <source 
  media="(min-aspect-ratio: 21/9)"
  srcset="
   2100x900px-img.jpg 1x, 
   4200x1800px-img.jpg 2x,
   6300x2700px-img.jpg 3x">
<source 
  media="(min-aspect-ratio: 16/9)" 
  srcset="
   1600x900px-img.jpg 1x,
   3200x1800px-img.jpg 2x,
   4800x2700px-img.jpg 3x,">
<source 
  media="(min-aspect-ratio: 1)" 
  srcset="
   300x300px-img.jpg 1x,
   600x600px-img.jpg 2x,
   900x900px-img.jpg 3x">
 <img src="fallback_whatever.png" alt="💞">
</picture>

我々の前のサンプルに対する唯一の違いは、我々が正確にブラウザを言うということですsource タグを取るには、ブラウザは、このソースタグ内で最高の画像を選択することができます.もしそうなら8x 網膜が、それが最後にヒットする正方形の画面source タグとは、次のベストフィットを選択する3x は900x900px-img.jpg .

ソースタグとタイプ属性によるパフォーマンスの向上

簡単なサンプルを取って、それを使って演奏してみましょうtype 属性.
チューニング前

<picture>
 <source 
  media="(min-width: 1024px)"
  srcset="
   big.jpg 1x, 
   big-2x.jpg 2x">
<source 
  media="(min-width: 768px)"
  srcset="
   medium.jpg 1x, 
   medium-2x.jpg 2x">
 <img src="fallback.jpg" 
  srcset="
   fallback.jpg 1x, 
   fallback-2x.jpg 2x" alt="💞">
</picture>

ご覧のように3つの潜在的なソースがあります.また、使用に完全に大丈夫ですsrcset でimg にpicture それは他の2時のみ考慮されるタグsource タグはマッチしません.
The W3C says :

The srcset attribute and the src attribute (if width descriptors are not used) contribute the image sources to the source set (if no source element was selected).

チューニングしましょう

<picture>
 <source 
  media="(min-width: 1024px)"
  type="image/webp"
  srcset="
   big-optimized.webp 1x, 
   big-optimized-2x.webp 2x">
 <source 
  media="(min-width: 1024px)"
  srcset="
   big.jpg 1x, 
   big-2x.jpg 2x">
 <source 
  media="(min-width: 768px)"
  type="image/webp"
  srcset="
   medium-optimized.webp 1x, 
   medium-optimized-2x.webp 2x">
 <source 
  media="(min-width: 768px)"
  srcset="
   medium.jpg 1x, 
   medium-2x.jpg 2x">
 <source 
  type="image/webp"
  srcset="
   fallback-optimized.webp 1x, 
   fallback-optimized-2x.webp 2x">
 <img src="fallback.jpg" 
  srcset="
   fallback.jpg 1x, 
   fallback-2x.jpg 2x" alt="💞">
</picture>

今、我々は別の解像度の異なる画像を提供するだけでなく、我々はまた、ブラウザの可能性を提供し、網膜のイメージを取るためにもwebp の代わりにjpg .

画像タグ結論

The picture タグを別の状況で別の画像を再生することができます.例えば、あなたが移動をするつもりであるならば.gif しかし、あなたはA 11 Yを改善したいと思います.

<picture>
 <source 
  media="(prefers-reduced-motion: reduce)"
  srcset="
   no-motion.jpg 1x, 
   no-motion2x.jpg 2x,
   no-motion3x.jpg 1x 3x">
 <img src="funny_moving_gif.gif" alt="Funny Animals">
</picture>

結論：そうするとき、何を使うべきですか？

絵

あなたが複雑なセットアップを持っているならば、あなた自身賛成picture .

<高橋潤子>

あなたが同じ比率にとどまるイメージがあるならば、InstallramまたはFacebookの上でアップロードされるそれらのような実際の写真<img srcset> or <img srcset sizes> あなたが達成したいものに応じて.
以下のコメントを使用してください.