要素は、Responsive Picturesを?qū)g裝するためにHTML5で導(dǎo)入されたコンテナ要素であり、複數(shù)の<source>および1つのタグを介してデバイスの特性に基づいて最も適切な畫像リソースを選択します。 1.さまざまな畫面幅に応じた適応寫真の読み込みをサポートして、読み込み性能を向上させます。 2. WebPなどの最新の形式を優(yōu)先し、サポートされていない場合は従來の形式に戻ることができます。 3.視覚ディスプレイを最適化するために、デバイスのアスペクト比に応じて異なる構(gòu)成を切り替えることができます。さらに、記述的なALTテキストを常にに追加し、メンテナンス性を向上させるために正しいパス、テスト互換性、標(biāo)準(zhǔn)化された命令を確認(rèn)する必要があります。

レスポンシブ畫像は、最新のWebデザインの不可欠な部分であり、HTML5の<picture></picture>要素はこれを達(dá)成するための柔軟な方法を提供します。単一の畫像サイズに依存するのではなく、さまざまなデバイスの特性に基づいて、最も適切な畫像リソースをロードできます。

<picture></picture>要素とは何ですか？

<picture></picture>は、HTML5で複數(shù)の<source></source>要素と<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175243357589604.jpeg" class="lazy" alt="HTML5畫像要素を使用してレスポンシブ畫像を?qū)g裝します" >タグをラップするために導(dǎo)入されたコンテナ要素です。ブラウザは、設(shè)定したメディアクエリまたは畫像形式のサポートに従って、最初のマッチング<source></source>を選択します。一致する條件がない場合、 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175243357589604.jpeg" class="lazy" alt="HTML5畫像要素を使用してレスポンシブ畫像を?qū)g裝します" >で指定されたデフォルトの畫像に戻ります。

これは、さまざまな解像度、異なるアスペクト比、さらには異なる畫像形式（WebPなど）を扱う場合に非常に便利です。

<picture></picture>を使用してレスポンシブ寫真を?qū)g裝する方法は？

基本構(gòu)造は次のとおりです。

 <picture>
  <source srcset = "image-large.jpg" media = "（min-width：1024px）">
  <source srcset = "image-medium.jpg" media = "（min-width：768px）">
  <source srcset = "image-small.jpg" media = "（min-width：480px）">
  <img src = "image-default.jpg" alt = "説明">
</picture>

• 各<source>は、異なるsrcsetとmediaプロパティを指定できます。
• ブラウザは、各media條件を上から下にチェックし、満たされたら、対応する畫像を使用します。
• 最後の<img alt="HTML5畫像要素を使用してレスポンシブ畫像を?qū)g裝します" >はボトムアップオプションで、すべての不一致の狀況に適しています。

一般的な使用シナリオと提案

1.さまざまな畫面幅に異なるサイズの寫真をロードする

これは最も一般的な使用法です。たとえば、デスクトップ、タブレット、攜帯電話の適切なサイズの畫像リソースをそれぞれ準(zhǔn)備します。

 <picture>
  <source srcset = "desktop.jpg" media = "（min-width：992px）">
  <source srcset = "tablet.jpg" media = "（min-width：768px）">
  <img src = "mobile.jpg" alt = "応答畫像の例">
</picture>

• 不要な大きな畫像の読み込みを避けるために、畫像サイズはできるだけディスプレイエリアサイズに近い必要があります。
• 畫像圧縮ツールを使用して、ファイルのサイズを縮小し、負(fù)荷速度を上げます。

2。最新の畫像形式（Webpなど）をサポートする

一部のブラウザは、より効率的な畫像形式（WebPなど）をサポートしており、最初にこれらの形式で寫真を撮ることができます。

 <picture>
  <source type = "image/webp" srcset = "image.webp">
  <img src = "image.jpg" alt = "互換畫像">
</picture>

• ブラウザがWebPをサポートする場合、 .webpファイルはロードされます。
• それ以外の場合は、自動(dòng)的にJPEGまたはPNG形式に戻ります。

3。さまざまなアスペクト比に適応します（水平バージョン/垂直バージョンなど）

一部のページレイアウトでは、ホームページCarouselはデスクトップのバナーと攜帯電話の垂直チャートなど、異なるデバイスで完全に異なる構(gòu)成方法を必要とする場合があります。

 <picture>
  <source srcset = "landscape.jpg" media = "（min-aspect-ratio：16/9）">
  <source srcset = "portrait.jpg" media = "（max-aspect-ratio：4/5）">
  <img src = "default.jpg" alt = "適応構(gòu)成">
</picture>

• これにより、デバイスのアスペクト比に応じて異なる構(gòu)成を切り替えることができます。
• 特に、寫真やeコマース製品ページなど、視覚的なコンテンツを強(qiáng)調(diào)する必要があるWebサイトに適しています。

ヒント：無視できるいくつかの重要な詳細(xì)

• alt屬性を書くことを忘れないでください。 <source></source> altをサポートしていなくても、最終<img alt="HTML5畫像要素を使用してレスポンシブ畫像を?qū)g裝します" >にはアクセシビリティとSEOにとって重要な説明的なaltテキストが必要です。
• 特に相対パスを使用する場合は、明確な構(gòu)造と簡単なメンテナンスを確保するために、畫像パスは正しい必要があります。
• 特に古いブラウザでは、通常は<img alt="HTML5畫像要素を使用してレスポンシブ畫像を?qū)g裝します" >に戻ることができるかどうかにかかわらず、さまざまなデバイスとブラウザの動(dòng)作をテストします。
• 畫像の命名は標(biāo)準(zhǔn)化および統(tǒng)合されているため、チームのコラボレーションと自動(dòng)処理に役立ちます。

基本的にそれだけです。 <picture></picture>の使用を習(xí)得すると、パフォーマンスの最適化を考慮しながら、ウェブサイトがさまざまなデバイスに最適な視覚効果を示すことができます。

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