HTMLメディア要素：オーディオ、ビデオ、画像
img、picture、audio、video、source、track要素を使用して、レスポンシブ読み込みとアクセシビリティのベストプラクティスでHTMLに画像、オーディオ、ビデオを埋め込みます。
Image/Multimedia
詳細な説明
HTMLメディア要素
HTML5は、Flashなどのブラウザプラグインの必要性を排除するネイティブメディア要素を導入しました。モダンブラウザは、埋め込みオーディオ、ビデオ、レスポンシブ画像をネイティブにサポートしています。
ベストプラクティス
- 画像には常に
altテキストを提供 - フォールド以下の画像とiframeに
loading="lazy"を使用 - クロスブラウザ互換性のために複数のソースフォーマットを提供
- ビデオのアクセシビリティのために
<track>で字幕を含める - レイアウトシフトを防ぐために
widthとheightを指定
ユースケース
メディア要素は事実上すべてのモダンWebサイトで使用されています。レスポンシブ画像と遅延読み込みの適切な使用は、Core Web Vitalsとページパフォーマンスにとって重要です。