Featured image of post 2024年の画像最適化戦略：AVIF、WebP、そして次世代フォーマット Featured image of post 2024年の画像最適化戦略：AVIF、WebP、そして次世代フォーマット
Performance

2024年の画像最適化戦略：AVIF、WebP、そして次世代フォーマット

2024年最新の画像最適化戦略を解説。AVIF、WebP、JPEG XLなどの次世代フォーマット、srcsetによるレスポンシブ画像、CDN変換、遅延読み込み、Core Web Vitalsへの影響まで網羅。

English
  1. ホーム
  2. web
  3. 2024年の画像最適化戦略：AVIF、WebP、そして次世代フォーマット

はじめに

画像は一般的なWebページの総重量の半分以上を占めます。Webアプリケーションがより視覚的になるにつれて、画像配信の最適化はパフォーマンス、ユーザー体験、Core Web Vitalsスコアにとって不可欠になっています。本記事では、次世代フォーマットからレスポンシブ配信技術まで、最新の画像最適化戦略を解説します。

2024年の画像フォーマット

画像フォーマットの状況は大きく変化しました。3つのモダンフォーマットが従来のJPEGやPNGと共に競合しています。

フォーマットJPEG比のサイズブラウザサポート最適な用途
WebP25-34%削減97%以上汎用的なフォールバック
AVIF50%削減85%以上写真コンテンツ
JPEG XL60%削減限定的（Safari）将来性重視のアーカイブ
JPEG/PNG基準100%フォールバック

WebPはほぼすべてのブラウザでサポートされ、同等品質でJPEG比25-34%の削減を達成します。プロダクション利用には最も安全なモダンフォーマットです。AVIFはJPEG比約50%削減という優れた圧縮率を提供しますが、エンコード速度に課題があります。JPEG XLは最高の圧縮率と機能を備えますが、ブラウザサポートは限定的です。

srcsetによるレスポンシブ画像

srcset属性とsizes属性により、ブラウザはビューポートとデバイスピクセル比に基づいて最適な画像サイズを選択できます：

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="ヒーロー画像"
  loading="lazy"
  width="800"
  height="450"
>

w記述子はビューポート幅に基づくレスポンシブサイジングに使用し、x記述子は特定のデバイスピクセル比をターゲットにする場合に使用します。

<picture>要素によるフォーマット選択

<picture>要素を使用すると、ブラウザがサポートする最も効率的なフォーマットを自動選択するフォールバックチェーンを構築できます：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="ヒーロー画像" width="800" height="450">
</picture>

このパターンはAVIF対応ブラウザにAVIFを配信し、非対応の場合はWebP、最後にJPEGにフォールバックします。また、<picture>要素はアートディレクション（モバイルとデスクトップで異なる切り抜き画像の配信）もサポートします。

CDN画像変換

Cloudflare Images、Imgix、Cloudinary、AkamaiなどのCDNは、URLパラメータを使用して画像をオンザフライで変換できます：

https://cdn.example.com/image.jpg?w=800&h=600&fit=cover&f=webp&q=80

最新のCDNはAcceptヘッダーをチェックしてAVIFやWebPを自動配信するフォーマットネゴシエーションもサポートします。これにより、オリジンは単一のマスター画像を保存し、CDNがクライアントの能力に応じた複数のバリアントをキャッシュできます。

遅延読み込みとCore Web Vitals

loading="lazy"属性で画面外の画像読み込みを遅延できます。LCP（Largest Contentful Paint）に影響するファーストビュー画像にはfetchpriority="high"を使用します：

<!-- LCP画像 - 即時読み込み -->
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="ヒーロー">

<!-- 画面外画像 - 遅延読み込み -->
<img src="gallery-1.jpg" loading="lazy" width="400" height="300" alt="ギャラリー">

CLS（Cumulative Layout Shift）を防ぐには、画像に常に明示的なwidthとheight属性を設定します。

指標影響対策
LCPヒーロー画像の読み込み遅延先行読み込み、fetchpriority=“high”
CLSレイアウトシフト明示的なwidth/height、アスペクト比ボックス
INPメインスレッドブロッキング遅延デコード、遅延読み込み

結論

2024年における効果的な画像最適化戦略は複数の手法を組み合わせます：<picture>によるAVIF + WebP + JPEGのフォールバック、srcsetによるレスポンシブサイジング、CDN変換による動的リサイズとフォーマットネゴシエーション、画面外画像の遅延読み込みとLCP画像の先行読み込み、そして常に明示的なサイズ指定によるレイアウトシフトの防止です。これらのスタックを一貫して実装することで、画像容量を50-80%削減しながらCore Web Vitalsスコアを改善できます。

© 2022 - 2026 たかおの解説