応答性のある寫真の鍵は、必要に応じて適切なサイズをロードすることです。これは主に3つの方法で達(dá)成されます。まず、タグを使用してCSSを使用して、最大幅と高さの屬性を設(shè)定して基本的な応答性を?qū)g現(xiàn)します。第二に、SRCSETおよびサイズの屬性を使用して、デバイスに応じて異なるサイズの寫真を選択します。第三に、<picture>要素を使用して、フォーマットやコンテンツの切り替えなど、より洗練されたコントロールを?qū)g現(xiàn)します。これらの3つの方法は、さまざまな複雑さのシーンに適しており、さまざまなデバイスで畫像を効率的に表示できるようにします。

畫像はWebページのほぼどこにでもありますが、さまざまなデバイスに適切に表示されるようにする方法は、フロントエンド開発の重要な問題です。実際、HTMLのレスポンシブ畫像関數(shù)をうまく使用することは難しくありません。重要なのは、いくつかのコアコンセプトとタグの使用を理解することです。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="HTMLを使用してレスポンシブ畫像を?qū)g裝します" >タグの基本的な応答設(shè)定

最も基本的なアプローチは、 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="HTMLを使用してレスポンシブ畫像を?qū)g裝します" >タグとCSSを使用して、ある程度の応答性を?qū)g現(xiàn)することです。これは最も柔軟な方法ではありませんが、いくつかの簡(jiǎn)単なシナリオでは十分です。

• max-width: 100%およびheight: auto <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="HTMLを使用してレスポンシブ畫像を?qū)g裝します" >を自動(dòng)的にスケーリングしてコンテナサイズに適応させることができます。
• これの問題は、デバイス畫面の大きさに関係なく、同じ畫像がロードされているため、不必要な帯域幅廃棄物を引き起こす可能性があります。

たとえば、デスクトップに使用する必要がある攜帯電話で大きな畫像を開くと、読み込み時(shí)間が長(zhǎng)くなり、エクスペリエンスが割引されます。

したがって、このアプローチは、パフォーマンスが低いページに適しているか、プロトタイプをすばやく構(gòu)築するためだけに適しています。

srcsetとsizesプロパティを使用します

これは、実際の応答性のある畫像ソリューションです。 HTMLは、 srcsetとsizesプロパティを提供します。これにより、ブラウザは異なるデバイスに従って適切な畫像バージョンを選択するように指示します。

• srcsetは、複數(shù)の畫像パスと対応する幅（ image-320w.jpg 320wなど）をリストするために使用されます。
• sizes 、さまざまなビューポート幅（ (max-width: 600px) 100vw, 50vw ）に対して、畫像がどれだけのスペースをとるべきかを定義します。

このように、ブラウザは、現(xiàn)在のデバイスの畫面サイズとピクセル密度に従ってロードする最も適切な畫像を自動(dòng)的に選択できます。これにより、明確さを保証するだけでなく、トラフィックも節(jié)約できます。

実用的な例を示すには：

 <img 
  src = "image-default.jpg"
  srcset = "image-320w.jpg 320w、
          Image-480w.jpg480W、
          Image-800W.jpg800W "
  サイズ= "（max-width：600px）100vw、
         （最大幅：900px）50VW、
         33vw "
  alt = "example picture">

上記のコードは、さまざまなサイズの畫像を選択するようにブラウザに異なる畫面幅で読み込むように指示することを意味します。これは現(xiàn)在最も推奨されている標(biāo)準(zhǔn)的な慣行です。

詳細(xì)な制御には、 <picture>要素を使用してください

畫像サイズを変更するだけでなく、WebPをサポートするブラウザに小さなサイズの寫真を提供したり、小さな畫面にクロップドクローズアップを表示するなど、フォーマットやコンテンツを変更したい場(chǎng)合もあります。

この時(shí)點(diǎn)で、 <picture>要素を使用する必要があります。

複數(shù)の<source>を定義することができます。各<source>は、さまざまなメディアクエリ、畫像形式、または解像度を指定でき、最後にデフォルトの<img alt="HTMLを使用してレスポンシブ畫像を?qū)g裝します" >指定できます。

例えば：

 <picture>
  <source srcset = "image.webp" type = "image/webp">
  <source srcset = "image-800w.jpg 800w、image-480w.jpg 480w" media = "（min-width：600px）">
  <img src = "image-default.jpg" alt = "代替畫像">
</picture>

この例では：

• ブラウザがWebPをサポートしている場(chǎng)合、 .webp畫像の読み込みが優(yōu)先されます。
• 畫面幅が600pxを超える場(chǎng)合、大きなサイズのJPEGをロードします。
• それ以外の場(chǎng)合、デフォルトの畫像がロードされます。

この方法は、高度にカスタマイズされた畫像表示が必要なシナリオに特に適しています。

基本的にそれだけです。レスポンシブ畫像のコアは「必要に応じて適切なサイズをロードする」ことであり、HTMLはこれを達(dá)成するのに十分強(qiáng)力なツールを提供します。重要なのは、 srcset 、 sizes 、 <picture>の使用を理解し、さまざまなプロジェクトで柔軟に使用することです。

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