画像サイズがわかっている場合の画像要素の使用

Question

私の敏感なウェブページに適切なサイズの画像を読み込ませたい。

<picture> 
    <source media="(min-width: 950px)" srcset="{{ .Cover.Large }}"> 
    <source media="(min-width: 600px)" srcset="{{ .Cover.Medium }}"> 
    <source media="(min-width: 300px)" srcset="{{ .Cover.Small }}"> 
    <source media="(min-width: 150px)" srcset="{{ .Cover.Xsmall }}"> 
<img src="{{ .Cover.Medium }}" alt="{{ .Title }} poster"> 
    </picture> 

大= 950x400 ミディアム= 600x252 小= 300x126 Xmall = 150x63

は、今私は、この最小幅は仕事に行くされていないと思っています：私は現在のように見えるHTMLテンプレートを持っています写真が一列に並んでいたり、屈曲していたり​​すると非常にうまくいく。画像のサイズを定義し、ブラウザに最適なソースをダウンロードさせるのが最善ではありませんか？

https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list

これを行うためのクリーンな方法は何ですか？紛らわしいことに私自身の応答の実験では、大サイズが常にロードされているすべての

• Picture element
• Img srcset

Answer 1

を書いた記事から、このの多くを持ち上げた、4枚の画像はJPGでの複数のレンディションで裏打ちされている画面上で曲げられクライアントの帯域幅を節約します。それを有効にするには、src =属性がコードにないことに注意してください。

body { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
picture { 
 
    margin: 1em; 
 
}

<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture>

だから私はいくつかのことを学びました：

• How to flex images
• picture.imgは結構です、あなたが学んだsource element
• を使用する必要はありません約vwビューポートサイズの画面の比率のようなものです幅、しかし、あなたは絶対値がマージンを計算する必要があり、例えばcalc(25vw - 2em)。絵の余白の1EM + 1EM両側
• で画面の25vw = 1/4このようなもの、この例では、私はあなたがあなたの正気のために避けることをお勧めしていなくてもuse break pointsを、本当に複雑なんです！

それは、私はそれが何をしたいのかを正確に行います。これは、適切なサイズと帯域幅効率の良い画像を読み込みます。サイズを変更すると、小さい画像がロードされません。それはスケールアップするとき、それは私がどんな醜い人工物を避けるためにしたいですか、より大きな高解像度の画像を、フェッチありません。

結果：いくつかのJPGレンディションの効率的な転送

Answer 2

まず、あなたはシナリオごとに同じ画像を使用しているが、異なるサイズでのみ？その場合は、おそらく<picture>要素ではなくsrcset属性を使用することができます。

要素は、大画面の場合はワイドショット、狭い画面の場合はポートレートクロップを使用する場合など、アート方向ベースの選択が必要な場合に使用されます。 <picture>要素に関することは、特定のイメージが特定のブレークポイントで表示されるようにしたい場合に使用されるため、<picture>要素を使用しているときの画像選択の曖昧さはありません。

元の質問にリンクしているのは、画面の幅ごとに同じサイズの画像を使用していますか？その場合は、srcset属性を持つ通常のimg要素を使用するとより効果的です。

流体幅の画像の場合、w記述子とsizes属性では、srcsetが使用されます。 sizes属性には2つの値があります。最初はメディアの状態です。 2番目はsource-size-valueで、特定のメディア条件を指定してイメージの幅を決定します。以下はsrcset構文の例です：

ここ

<img srcset="uswnt-480.jpg 480w, 
      uswnt-640.jpg 640w, 
      uswnt-960.jpg 960w, 
      uswnt-1280.jpg 1280w" 
    sizes="(max-width: 400px) 100vw, 
      (max-width: 960px) 75vw, 
      640px" 
    src="uswnt-640.jpg" alt="USWNT World Cup victory"> 

、私は400個のピクセルまでのビューポートの幅のために、ビューポートの幅の画像を100％にすることを、ブラウザを言っています。最大960ピクセルのビューポート幅で、画像をビューポート幅の75％にします。また、960ピクセルを超えるものについては、640ピクセルの画像を作成します。ブラウザは、srcsetとsizesの情報を使用して、指定された条件に最も一致するイメージを提供します。

全開示：私はこれは私が欲しかったもので、このトピックに以前