SRCSETで応答性のある画像を作成する方法

MicrosoftのWeb Developmentシリーズの一部であるこの記事では、レスポンシブ画像を探ります。これは、多様なデバイス全体で機能するWebサイトを作成する重要な側面です。 もはやオプションではありません。マルチデバイスの世界では必要です。

キーテイクアウト：

• srcset属性を使用して、さまざまなデバイスピクセル比に最適化されたさまざまな画像ソースを提供します。
• srcset属性と組み合わせて、ビューポートに比べて画像表示サイズを指定し、ブラウザに最適な画像を選択するように導きます。 sizes
要素を活用して柔軟性を高め、メディア条件（CSSメディアクエリなど）に基づいて画像選択を可能にし、
• 属性を介してさまざまな画像形式をサポートします。 <picture></picture>typeサポートを欠いているブラウザのフォールバックとして
属性を使用して、常にデフォルトの画像を含めます。
• 互換性チェックとWebエクスペリエンスの最適化のためにMicrosoftが提供するようなツールを使用して、さまざまなデバイスとブラウザでの応答性とパフォーマンスを徹底的にテストします。 src srcset
レスポンシブ画像の理解：

レスポンシブイメージは、そのプレゼンテーションを表示デバイスに適応させます。 「最高のフォーム」とは異なることを意味します：

画面サイズに基づいて異なる画像アセットを表示します（たとえば、13.5インチのラップトップと5インチの電話の異なる画像）。> デバイス解像度（またはデバイスピクセル比 - デバイスピクセルとCSSピクセルの比率）に基づいて異なる画像を使用しています。

ブラウザでサポートされている場合、画像形式（JPEG XRなど）の選択、潜在的に圧縮が向上する可能性があります。

レスポンシブ画像の有効化：
• 古いスクリプトメソッドが存在しますが、複数のダウンロードや欠落した画像の潜在的な問題のために推奨されません。優先アプローチでは、
を使用します

属性

属性

要素

1. srcset
2. 属性：sizes
3. <picture></picture>使用法に飛び込む前に、定義しましょう：

デバイス - ピクセル比：これは、次の影響を受けたCSSピクセルあたりのデバイスピクセルの数です。 srcset デバイスピクセル密度（インチあたりの物理ピクセル）：高解像度デバイスは密度が高く、同じズームレベルでデバイスピクセル比が高くなります。

ブラウザズームレベル：ズームレベルが高くなると、特定のデバイスのデバイスピクセル比が増加します。

srcsetBASIC

実装では、デバイスピクセル比の

記述子を使用します：

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="How to Build Responsive Images with srcset " />

• 1x：1. space-needle.jpgのデバイスピクセル比の場合 2x：2x：2のデバイスピクセル比の場合
3x：
• デバイスピクセル比3の場合space-needle-2x.jpg
• space-needle-hd.jpg属性は、
サポートなしでブラウザのフォールバックとして機能します。

記述子は、画像幅を指定しています：

src srcsetw

属性：

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="SRCSETで応答性のある画像を作成する方法" >

ビューポートサイズに基づいて画像サイズを制御するには、sizes。

例1（ハーフビューポート幅の画像）：

sizes w srcset

例2（ビューポート幅に基づく応答性のサイジング）：

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="SRCSETで応答性のある画像を作成する方法" >

要素：

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="SRCSETで応答性のある画像を作成する方法" >

要素は、レンダリングされたサイズとブラウザの機能に基づいて画像選択を可能にします。

、、<picture></picture>、属性の要素が含まれています。 an

<picture></picture>（注：画像ソースとサイズが実例しています。）<source></source> srcsetsizes media type <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png?x-oss-process=image/resize,p_40" class="lazy" alt="How to Build Responsive Images with srcset ">

結論：

レスポンシブ画像は、デバイス全体のユーザーエクスペリエンスを強化します。 最適なWeb​​サイトのパフォーマンスのためにそれらを実装します。 Microsoftのさらなるリソースとツールは、クロスブラウザーテストとWeb開発のベストプラクティスに利用できます。 詳細なFAQセクションが続きます。の実装に関する一般的な質問に対処します。

以上がSRCSETで応答性のある画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。