サンプル1: 各形式を直接表示

直接imgタグで各形式のファイルを読み込む例です。非対応ブラウザではWebPやAVIFは表示されません。
※ 画像クリックで原寸表示します。画質を同程度にする等の調整は行っていないので、ファイルサイズは参考程度としてください。

PNG(2MB)

JPEG(280KB)

WebP(132KB)

AVIF(111KB)

サンプル2: Picture要素による出しわけ

picture要素を使ってJPEG/WebP/AVIFの自動選択を行う例です。

サンプル3: Modernizrによる出しわけ（CSS画像の切り替え）

Modernizrを使ってCSS画像の出しわけを行う例です。Modernizrは現在AVIFの対応検出をサポートしていないため、JPEG/WebPの選択を行っています。