画像最適化とは何ですか？

Webサイトの画像ファイルサイズを削減し、表示速度を向上させる技術。WebP/AVIF形式やレスポンシブ画像が代表的。

画像最適化のポイントは？

WebP（Google開発）やAVIF（Netflix開発）の次世代フォーマットが主流に。レスポンシブ画像（srcset）でデバイスに最適なサイズを配信。遅延読み込み（Lazy Loading）で画面外の画像読み込みを後回し。Core Web Vitals（LCP）に直接影響するためSEO対策としても重要

【がぞうさいてきか】

画像最適化とは？

💡 「重い画像」をスリムにして高速表示

📌 このページのポイント

WebP（Google開発）やAVIF（Netflix開発）の次世代フォーマットが主流に
レスポンシブ画像（srcset）でデバイスに最適なサイズを配信
遅延読み込みで画面外の画像読み込みを後回し
Core Web Vitals（LCP）に直接影響するためSEO対策としても重要

画像最適化のイメージ

ひよこ

WebPとAVIFはどっちがいい？

ペンギン先生

AVIFの方が圧縮率が高い（同品質でWebPより20〜30%小さい）。ただしエンコード速度が遅く、ブラウザ対応もWebPの方が広い。2024年現在、WebPは主要ブラウザ全対応、AVIFはSafariが16.4以降対応。タグでAVIF→WebP→JPEGの順にフォールバックするのがベストプラクティスだよ

ひよこ

どれくらいサイズが変わるの？

ペンギン先生

JPEG 500KBの写真がWebPだと約200KB、AVIFだと約150KBになることが多い。PNGのイラスト系はさらに差が大きい。Webサイトの通信量の50%以上が画像というケースも多いから、画像最適化だけでページ表示速度が劇的に改善することがあるよ

ひよこ

自動で最適化する方法は？

ペンギン先生

①CDN側で自動変換（Cloudflare Images、imgix、Cloudinary）、②ビルド時に変換（Astroのコンポーネント、Next.jsのnext/image）、③CIで変換（sharp、squoosh）。手動で1枚ずつ変換するのは現実的じゃないから、自動化の仕組みを入れるのが正解だよ

ひよこ

srcsetって何？

ペンギン先生

デバイスの画面サイズやピクセル密度に応じて最適な画像を自動選択するHTML属性。スマホに4K画像を送るのは無駄だし、Retinaディスプレイに低解像度画像を送ると粗くなる。srcsetで複数サイズの画像を用意しておけば、ブラウザが自動的に最適なものを選んでくれるんだよ

まとめ：ざっくりこれだけ覚えればOK！

「画像最適化」って出てきたら「画像を軽く・速く表示する技術の総称」と思えればだいたいOK！

📖 おまけ：英語の意味

「Image Optimization」＝画像最適化

💬 Optimize（最適化する）。見た目の品質を保ちつつファイルサイズを最小化するよ

← 用語集にもどる

画像最適化 とは？

画像最適化とは？