0
現在、すべての画面サイズに合わせて<img>タグを使用して大きな画像を使用しています。もし私が<picture>タグを使用すれば、小さな画面のために小さな画像が読み込まれるときに、帯域幅やページの読み込み時間を節約できますか？html画像タグは帯域幅を節約します
ご意見お願いします。
A
答えて
1
No. pictureタグはimgタグよりも多くの文字を入力する必要があります。そのため、（それほど多くはありませんが）帯域幅はそれ以上になります。
あなたは（両方pictureとimg要素を用いて達成することができる）responsive imagesとpicture要素をconflatingされる可能性があります。
+0
貴重なリンクやコメントをありがとうございました。 –
+0
答えの内容には何も問題はありませんが、2番目の段落には微妙な違いがありますが、「画像」タグで帯域幅を節約できないという感触があります。私は、「画像」と「ソース」が実際に帯域幅を節約できると主張します。私はそれがOPの後にあったと思うが、正しく言葉を得られなかった。 –
+0
@BramVanroy - 2番目の段落にあるように、 'srcset'と' '要素を使ってレスポンシブな画像を使うことができます。 '
0
次の例のように単一のソースについて話している場合（とにかく意味をなさない）、はです。
<picture>
<img srcset="default.jpg" alt="Default">
</picture>
あなたがはい、異なる画像ソースを使用して話をしている場合。ブラウザは、現在のメディアに最も適した画像のみを読み込みます。例えば。 （source）：あなたがIEでpictureを使用するpolyfillが必要です
<picture>
<source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
<source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
<source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
<source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
<img srcset="default_landscape.jpg" alt="My default image">
</picture>
注意。
これは同じイメージです。イメージを圧縮するか、サイズを変更する必要があります。 – Jer
ようこそ。 [コードサンプル '{}']（https://i.imgur.com/3ppJhiE.png）ツールバーのボタンでソースコードを書式設定することができます。今回はあなたのために行いました。下にプレビューウィンドウがあり、タグが表示されていないため質問に意味がないことを警告していました。 –