HTMLのSRCSET属性を使用してレスポンシブ画像を提供する方法

SRCSET属性を使用して、応答性の高い画像を効果的に提供し、ページの読み込み速度とユーザーエクスペリエンスを改善します。 1. SRCSET属性を使用すると、複数の画像ソースと幅またはピクセル密度プロンプトを定義でき、ブラウザが最も適切な画像を選択できるようにします。 2。サイズ属性を組み合わせて、異なる画面幅でビューポートを占める画像の割合など、レイアウトの変更に基づいて、より正確な画像選択を提供できます。 3。ピクセル密度記述子（1x、2xなど）は、高解像度画像に使用できます。 4.古いブラウザのフォールバックオプションとして常にSRCを保持します。 5.幅の記述子（w）を使用して、画像がビューポートでスケーリングされている場合、固定サイズの画像の密度記述子（x）を使用します。 6.帯域幅を保存するために、すべての画像バージョンを最適化する必要があります。 7.デバイステストまたは開発者ツールを介して、さまざまな画面の下でパフォーマンスを確認します。 JavaScriptまたはCSSスキルなしでSRCSETを正しく使用します。ネイティブHTMLに依存すると、効率的で適応性のある画像の読み込みが実現でき、最後にブラウザはレンダリングを完了するために最適な画像リソースを自動的に選択します。

HTMLでsrcset属性を使用したレスポンシブ画像を提供することは、ユーザーのデバイスと画面解像度に基づいて適切な画像サイズを配信するスマートな方法です。これにより、ページの読み込み時間が改善され、特にモバイルデバイスでのユーザーエクスペリエンスが向上します。効果的に使用する方法は次のとおりです。

srcset属性の理解

srcset属性を使用すると、複数の画像ソースとヒント（幅やピクセル密度など）を定義でき、ブラウザが最も適切な画像を選択できます。 imgタグと一緒に動作し、より多くのコントロールのためにsizes属性とともに使用されることがよくあります。

基本的な構文：

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175424532752033.jpeg"  class="lazy"  src = "image-small.jpg"
     srcset = "image-small.jpg 480w、
             Image-Medium.jpg800W、
             image-large.jpg1200W "
     alt = "応答性画像">

この例では：

• 各画像の後には、幅の記述子が続きます（たとえば、 480wは幅480ピクセルを意味します）。
• ブラウザは、この情報に加えて、ビューポートサイズとデバイスピクセル比を使用して、最適な画像を選択します。

レイアウトベースの選択にsizesを使用します

画面の幅（モバイルの全幅、デスクトップの半分の幅）に応じて画像サイズが変更された場合、 sizes属性を使用してブラウザにヒントを与えます。

例：

 <img src = "image-small.jpg"
     srcset = "image-480.jpg480w、
             Image-800.jpg800W、
             Image-1200.jpg 1200W "
     サイズ= "（max-width：480px）100vw、
            （最大幅：800px）50VW、
            33vw "
     alt = "サイズのレスポンシブイメージ">

sizes意味は次のとおりです。

• 480px以下の画面では、画像は100vw （全幅）を占めます。
• 481pxから800pxの間で、 50vw （幅の半分）を使用します。
• 大きな画面では、 33vwを使用しています。

ブラウザは、このレイアウト情報srcsetオプションを使用して、最適な画像ファイルを選択します。

高DPI（網膜）画面をサポートします

また、ピクセル密度記述子（ 1x 、 2xなど）を使用して、ピクセル密度が高いデバイスの高解像度画像を提供することもできます。

例：

 <img src = "image.jpg"
     srcset = "image.jpg 1x、
             Image-2x.jpg 2x、
             Image-3x.jpg 3x "
     alt = "high-dpi応答画像">

これはよりシンプルですが、幅の記述子を使用するよりも柔軟性が低くなります。画像サイズがデバイス全体であまり変化しない場合が最適です。

ベストプラクティスとヒント

• 常にsrcフォールバックを含めます。SRCSet srcsetサポートされていない場合（非常に古いブラウザ）。
• 画像の寸法が応答する場合、 srcset sizesと組み合わせます。
• 画像がビューポートでスケーリングするときは、幅の記述子（ w ）を使用します。固定サイズの画像（アイコンなど）に密度記述子（ x ）を使用します。
• すべての画像バージョンを最適化および圧縮して、帯域幅を保存します。
• さまざまなデバイスでテストするか、ブラウザ開発ツールを使用して、さまざまな画面サイズをシミュレートします。

srcsetを使用することでは、JavaScriptやCSSトリックは必要ありません。これは、最新のブラウザがよくサポートするネイティブHTMLです。サイトをより速く、より適応的にするための簡単な方法です。

基本的に、複数の画像オプションを提供し、ブラウザに残りを実行させます。

以上がHTMLのSRCSET属性を使用してレスポンシブ画像を提供する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。