画像最適化の基本：PNG・JPEG・WebP・AVIFと表示速度

入門 | 14分 で読める | 2026.07.09

公式ドキュメント
パフォーマンスWeb開発

定義と結論

画像最適化とは、見た目と用途に必要な品質を保ちながら、画像の転送量、表示までの待ち時間、描画後のレイアウト移動を減らす作業です。単に圧縮率を上げることではありません。

確認する軸は、形式、画素寸法、圧縮品質、レスポンシブ配信、読み込み時期、表示領域の予約、キャッシュです。最適な画像は「最も小さいファイル」ではなく、利用者の画面で必要な品質を、必要な時刻までに届ける画像です。

実務では、まず大きすぎる画像を適切な寸法にし、用途に合う形式と品質で書き出します。次にsrcsetとsizesで端末に合う候補を渡し、画面外の画像だけを遅延読み込みします。ファーストビューの主役画像は早く発見・取得できるようにします。

なぜ必要なのか

画像は写真、商品、作品、人物などを一瞬で伝えられる一方、1枚でHTMLやCSSより大きな転送量になることがあります。重い画像は低速回線で待ち時間を増やし、通信量を消費し、端末でのデコードにも負荷をかけます。

とくに初期画面の大きな画像はLargest Contentful Paint（LCP）の対象になりやすく、読み込みが遅いと「主な内容がまだ出ていない」と感じさせます。また画像の幅と高さが不明だと、読み込み後に文章やボタンが押し下げられ、Cumulative Layout Shift（CLS）の原因になります。

登場人物と対象

画像を選ぶデザイナーや編集者は、用途と許容品質を決めます。実装者はHTML、CSS、画像変換、CDNやフレームワークの機能で配信を制御します。ブラウザはsrcset、sizes、画面密度、表示幅などから候補を選びます。利用者の回線、端末、ブラウザ、ビューポートによって最適な画像は変わります。

対象は写真だけではありません。ロゴ、アイコン、スクリーンショット、図解、背景画像、アニメーション、動画のposter画像も含みます。ただしテキストを画像化すると検索、拡大、読み上げ、翻訳が難しくなるため、装飾上の必然性がなければHTMLの文字を使います。

画像形式の主要パターン

形式主な用途特徴と注意
JPEG写真、複雑な階調非可逆圧縮。透過不可。品質を下げすぎるとブロック状の劣化が出る
PNG透過が必要な図、UI、スクリーンショット可逆圧縮。写真では重くなりやすい
WebP写真、透過画像非可逆・可逆・透過に対応。広い用途で軽量化しやすい
AVIF写真、高圧縮を重視する画像小さくできる場合が多いが、エンコード時間や画質を実画像で確認する
SVGロゴ、アイコン、単純な図形ベクター。拡大に強い。複雑な写真には不向き
GIF単純なアニメーション色数と圧縮効率に制約。動画形式やAnimated WebP/AVIFも比較する

「新しい形式なら必ず最小」とは限りません。線画、ノイズ、透過、エンコーダー設定で結果は変わります。候補を実際に書き出し、ファイルサイズと目視品質を比較します。SVGはコードを含められるため、信頼できないSVGをそのままインライン表示しないなど、入力元にも注意が必要です。

最適化の流れ

用途、表示サイズ、形式と品質、表示条件に合う配信、実測確認の順で進める画像最適化の図

1. 用途と表示条件を決める

ヒーロー画像、記事内写真、カードのサムネイル、アイコンでは優先度が違います。最大表示幅、縦横比、透過の要否、拡大表示の有無、ファーストビューに入るかを整理します。

2. 画素寸法を合わせる

CSSで横300pxに縮めても、3000pxの元画像を配信すれば転送量は減りません。高密度ディスプレイ向け候補を用意するとしても、無制限に巨大な画像を送る必要はありません。表示幅ごとの候補を作ります。

3. 形式と圧縮品質を比較する

写真ならJPEG、WebP、AVIFを、透過した図ならPNG、WebP、SVGを比較します。文字や細い線が読めるか、肌や空の階調が崩れていないかを実際の表示サイズで確認します。元画像は再変換用に保管し、圧縮済み画像を何度も再圧縮しない方が安全です。

4. レスポンシブ画像を配信する

srcsetは画像候補、sizesはその画像がレイアウト上で占める幅をブラウザへ伝えます。

<img
  src="/images/course-800.webp"
  srcset="/images/course-480.webp 480w, /images/course-800.webp 800w, /images/course-1280.webp 1280w"
  sizes="(max-width: 700px) 100vw, 800px"
  width="1200"
  height="800"
  alt="ノートパソコンでWeb制作を学ぶ受講生"
>

ブラウザが端末条件から選ぶため、「スマホは必ず480w」と固定されるわけではありません。sizesが実際のCSS幅とずれると、必要以上に大きな候補を選ぶことがあります。

5. 読み込み時期を分ける

画面外の画像にはloading="lazy"を使えます。一方、LCP候補や最初から見える主役画像をlazyにすると、表示位置の判定後まで取得開始が遅れる可能性があります。

<img
  src="/images/hero.webp"
  width="1600"
  height="900"
  fetchpriority="high"
  alt="オンラインで講師と学習する様子"
>

LCP候補には原則としてloading="lazy"を付けず、初期HTMLから画像URLを発見できる状態にします。 fetchpriority="high"は重要度のヒントですが、複数画像へ乱用すると優先順位の意味が薄れます。CSS背景やJavaScript実行後に追加される画像は発見が遅くなりやすいため、主役画像では<img>を優先的に検討します。

6. 表示領域を予約する

widthとheightは表示ピクセルを固定するためだけの属性ではなく、ブラウザが縦横比を早期に計算する助けになります。レスポンシブCSSで幅を変えても、比率に応じた領域を確保しやすくなり、CLSを抑えられます。

具体例：記事のヒーロー画像

横2400pxのPNG写真を、デスクトップでは1200px、スマートフォンでは画面幅で表示しているとします。まず写真向けのWebPまたはAVIFとJPEGの候補を作り、480px、800px、1200px程度の複数寸法を比較します。HTMLにはsrcsetと実レイアウトに合うsizes、元の縦横比を示すwidthとheight、内容を説明するaltを設定します。

この画像が初期画面の最大要素ならlazyを外し、HTMLから直接発見できるようにします。NetworkのウォーターフォールでHTML取得後の早い段階に要求が始まるか、LighthouseやPerformanceパネルでLCP要素になっているかを確認します。

一方、同じページの末尾にある関連記事サムネイルは、画面外ならlazy loadingが適しています。同じ形式の画像でも、ページ内の役割によって読み込み戦略は変わります。

よくある誤解

HTMLで幅を小さくすれば軽くなる

CSSやwidth属性で見た目を縮めても、指定された元ファイルを取得する限り転送量は同じです。画像自体の寸法を減らすか、srcsetで小さい候補を配信します。

すべてAVIFにすれば完了

形式だけで、過大寸法、遅い発見、レイアウト移動は解決しません。また画質とサイズの優劣は画像ごとに異なります。変換前後を測定します。

すべてlazyにすれば速い

画面外画像の初期通信は減らせますが、最初に必要な画像まで遅延するとLCPが悪化します。画像の位置と役割で決めます。

altはSEO用のキーワード欄

代替テキストは、画像が見えない利用者へ役割や内容を伝えるものです。意味のある画像は文脈に合う説明、純粋な装飾画像は空のalt=""を使います。キーワードの詰め込みは避けます。

注意とベストプラクティス

  • 元画像を保管し、用途別の派生画像を生成する
  • 実際のCSS表示幅に合わせてsizesを書く
  • 画像の縦横比を指定し、読み込み前から領域を確保する
  • 重要画像だけを高優先度にし、preloadを乱用しない
  • ファイル名やレスポンスヘッダーで長期キャッシュを設計し、更新時はURLを変える
  • 画質は数値だけで決めず、実表示サイズと複数端末で見る
  • CDNやフレームワークの画像機能を使う場合も、生成候補と実際の配信結果を確認する

デバッグと効果確認

最初にChrome DevToolsのNetworkでImgへ絞り、転送サイズ、画像寸法、開始時刻、キャッシュ利用を確認します。大きい順に並べ、表示寸法に対して過大な画像から着手します。PerformanceやLighthouseでLCP要素とCLSの発生箇所を確認します。

改善前後は同じURL、同じビューポート、近いネットワーク条件で比較します。ローカルの一回だけでなく、可能なら実利用者データの75パーセンタイルも確認します。LCPは画像のダウンロード時間だけでなく、サーバー応答、画像発見の遅延、描画待ちでも悪化するため、圧縮後も変わらない場合はウォーターフォール全体を見ます。

ファイルサイズが減ったことと、利用者が早く見られたことは同じではありません。必ず表示指標と見た目の両方で確認します。

まとめ

画像最適化は、用途に合う形式を選び、必要以上の画素を送らず、端末ごとに適切な候補を配信し、重要度に応じて読み込み時期を分ける作業です。widthとheightによる領域予約、適切な代替テキスト、キャッシュも品質の一部です。

最初の一歩は、Networkで最も重い画像とLCP画像を特定することです。計測して対象を決め、1枚ずつ変換し、見た目と指標を再確認する流れが最も確実です。

参考資料

次に読む記事

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR