SRCSETとサイズは、レスポンシブ畫像のHTML実裝の重要なプロパティです。 SRCSETは複數(shù)の畫像ソースと400Wや800Wなどの幅またはピクセル密度を提供し、ブラウザはそれに応じて適切な畫像を選択します。サイズは、ブラウザが畫像サイズをより正確に一致させることができるように、（最大幅：600px）100VW、50VWなど、異なる畫面幅で畫像の表示幅を定義します。実際には、メディアクエリに従って明確に名前が付けられたマルチサイズの寫真を設(shè)計レイアウトを準(zhǔn)備し、サイズやユニットエラーを無視しないように機(jī)器のパフォーマンスをテストし、帯域幅を節(jié)約してパフォーマンスを改善する必要があります。

Webページがロードされている場合、畫像は最大帯域幅を占めることがよくあります。異なるデバイスが適切なサイズの畫像を効率的にロードできるようにするために、HTMLはsrcsetおよびsizesプロパティを提供して、レスポンシブ畫像を?qū)g裝します。

srcsetとは何ですか？

srcset使用すると、ブラウザに複數(shù)の畫像ソースを提供し、それらの畫像の幅またはピクセル密度を伝えることができます。このようにして、ブラウザは、現(xiàn)在のデバイスの畫面サイズと解像度に応じてロードするのに最適な畫像を選択できます。

例えば：

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225052011544.jpeg"  class="lazy"  src = "image-400w.jpg" 
     srcset = "image-400.jpg400w、image-800w.jpg 800w、image-1200.jpg 1200w"
     alt = "example picture">

上記のコードでは、ブラウザは、使用可能なスペースとデバイスのピクセル比に基づいて、 srcsetリストから適切な畫像ファイルを選択します。

キーポイント：

• 各畫像の後には、 400wなどの幅（ wで終了）が続きます
• ブラウザは、ビューポートのサイズ、スケーリング比、その他の要因に基づいて判斷を下します

sizesの機(jī)能は何ですか？

srcset複數(shù)の畫像を提供しますが、ブラウザはページに畫像がどれだけ大きく表示されるかを知りません?，F(xiàn)時點(diǎn)では、ブラウザに「この畫像が異なる畫面幅の下で表示されるべきか」という広さを伝えるにはsizes必要です。

例えば：

 <img src = "image-400w.jpg" 
     srcset = "image-400.jpg400w、image-800w.jpg 800w、image-1200.jpg 1200w"
     サイズ= "（max-width：600px）100VW、50VW"
     alt = "example picture">

このラインsizesの意味は次のとおりです。

• 畫面幅が600px以下の場合、畫像はビューポート幅全體（100VW）を埋めます
• それ以外の場合、畫像はビューポート幅（50VW）の半分を占めています

srcsetと組み合わせて使用??することの利點(diǎn)：

• ブラウザは、「正しい」畫像サイズをより正確に選択できます
• 大きすぎたり小さすぎたり、帯域幅を節(jié)約したり、パフォーマンスを向上させたりする畫像の読み込みは避けてください

実際の使用に関する提案

これら2つのプロパティをより適切に活用するために、次の実用的な提案に従うことができます。

• 複數(shù)のサイズの寫真を準(zhǔn)備する：共通の幅の3?4バージョン（400px、800px、1200pxなど）を生成することをお勧めします
• 命名をクリアする：たとえば、 -400w.jpgと-800w.jpgを使用して畫像幅をマークします
• メディアクエリと組み合わせた設(shè)計レイアウト： sizesのブレークポイントがCSSメディアクエリと一致していることを確認(rèn)してください
• さまざまなデバイスのパフォーマンスをテストする：Chrome Devtoolsを使用して、さまざまなデバイスをシミュレートして、どの畫像がロードされているかを確認(rèn)できます

CMSまたは靜的Webサイトジェネレーターを使用する場合、さまざまなサイズのsrcsetと寫真を自動的に生成する多くのサポートにより、手動処理の手間を節(jié)約できます。

小さな詳細(xì)を無視しないでください

一部の開発者はsrcsetのみを記述しますが、 sizes無視するため、ブラウザはビューポートの幅に基づいて畫像サイズを大まかに判斷できるため、畫像の選択が間違っている可能性があります。特に、畫像がフル畫面の幅でない場合、 sizesを追加すると、応答性の高い利點(diǎn)に完全なプレイを行うことができます。

間違いを犯すもう1つの簡単な場所は、 pxなどのwを書き込むなど、 wが正しく解析できないように、ユニットが誤って書いていることです。

基本的にそれだけです。 srcsetとsizesの合理的な使用は、負(fù)荷速度を改善するだけでなく、モバイルユーザーのブラウジングエクスペリエンスを改善することもできます。

以上がHTML SRCSETおよびサイズの屬性を使用してレスポンシブ畫像を?qū)g裝するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。