開発者向けAVIF

開発者向けAVIFガイド

WebプロジェクトにAVIFを実装するための完全ガイド。

HTML実装

プログレッシブサポートにpicture要素を使用：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明" loading="lazy">
</picture>

CSS実装

背景画像に@supportsを使用：

.hero {
  background-image: url('hero.jpg');
}
@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

ビルドツール

• Sharp: 画像変換用Node.jsライブラリ
• Squoosh CLI: Googleの画像最適化CLIツール
• ImageMagick: AVIFサポート付き多目的CLIツール

パフォーマンスのヒント

• フォールド下の画像には常にlazy loadingを使用
• srcsetでレスポンシブ画像を実装
• ほとんどのケースで品質60-80を検討
• 様々なデバイスと接続でテスト