画像のサイズと形式の基本（WebP/AVIF対応）｜表示速度とSEOを両立する最適化ガイド
画像はページ容量の大半を占めやすく、最適化の良し悪しが表示速度（LCPなど）とユーザー体験を左右します。ただし「とにかく軽くする」だけでは画質劣化でUXを損ねることも。この記事では、解像度と容量の違い、主要形式（JPEG/PNG/GIF）と次世代形式（WebP/AVIF）の使い分け、Lazy Loadの落とし穴、alt属性・srcset/sizesまで、実務で迷わない形でまとめます。
なぜ画像最適化が重要なのか（SEOと表示速度の関係）
画像はページ容量の大半を占めやすく、重い画像は表示速度の悪化につながります。とくにファーストビューの大きな画像（ヒーロー画像・アイキャッチ）は LCP（Largest Contentful Paint）に影響しやすく、体験品質（離脱・CVなど）を下げる要因になりがちです。
ただし、画像最適化は「必ず順位が上がる」ための魔法ではありません。検索順位は多要因で決まります。 それでも、表示が遅いページはユーザーに選ばれにくく、結果として不利になり得るため、画像最適化は成果を支える土台になります。
画像サイズの基本：解像度（px）と容量（KB/MB）の違い
まず押さえるべきは「解像度（ピクセル数）」と「容量（ファイルサイズ）」は別物という点です。
- 解像度（px）：縦×横のピクセル数（例：1200×800）
- 容量（KB/MB）：データの重さ。表示速度に直結しやすい
基本は実際の表示幅に合わせてリサイズしてから圧縮すること。表示幅より大きい画像を置くと、見た目は変わらないのに容量だけ増えます。
目安（サイト構成・画質要件で調整）
- アイキャッチ：横1200px前後
- 記事内画像：横800〜1000px程度（実際の表示幅に合わせる）
- 容量：可能なら1枚あたり200KB前後以内を目標に（写真/図解で調整）
主要な画像形式：JPEG / PNG / GIFの使い分け
JPEG（JPG）
- 写真向き（グラデーションに強い）
- 非可逆圧縮で軽くしやすい
- 透過不可
PNG
- ロゴ・図解・文字入り画像向き（くっきり表示）
- 可逆圧縮
- 透過対応
- 容量が大きくなりがち
GIF
- アニメーション対応
- 色数制限（256色）で画質は低め
現在は用途が限定的で、アニメ用途はWebP（または軽量動画）も選択肢になります。
次世代画像形式：WebPとAVIFをどう選ぶ？
近年の実務では、JPEG/PNGの代替としてWebP（必要に応じてAVIF）を優先するのが定番です。
WebPの特徴
- 写真（lossy）・図解（lossless）どちらにも対応
- 透過・アニメーションにも対応
- 主要ブラウザで広くサポートされ、運用しやすい
AVIFの特徴
- より高い圧縮効率が出ることがある
- 一方で、制作・配信・デコード負荷など運用条件で最適解が変わる
迷ったら：まずWebPを標準にし、さらに詰めたい場合にAVIFも併用（<picture>で出し分け）がおすすめです。
実装の注意点：Lazy Load・LCP・フォールバック
Lazy Loadは「全部」にかけない
Lazy Load（遅延読み込み）は初期表示を軽くしますが、ファーストビューの主要画像まで遅延すると、LCPが悪化することがあります。 ヒーロー画像・アイキャッチなどLCPになりやすい画像は遅延しない（または優先読み込み）運用が基本です。
WebP/AVIFのフォールバック（推奨）
古い環境も考慮する場合は、<picture>でフォールバックを用意できます。
<picture>
<source type="image/avif" srcset="/img/sample.avif">
<source type="image/webp" srcset="/img/sample.webp">
<img src="/img/sample.jpg" alt="サンプル画像" width="1200" height="800">
</picture>
圧縮の実務フロー：リサイズ→変換→品質調整
- リサイズ：表示幅に合わせて縮小（例：4000px→1200px）
- 変換：WebP（必要ならAVIF）へ変換
- 品質調整：まずは品質80前後を初期値に、文字のにじみ等がないか目視で調整
ツール例：Squoosh、TinyPNG、CMS/プラグイン（ただし自動最適化は出力品質を確認）
alt属性とレスポンシブ配信：画像検索・モバイル最適化
alt属性は「説明文」を自然に
alt属性はアクセシビリティだけでなく、画像の内容理解の手掛かりにもなります。 キーワードの羅列ではなく、画像が何かを短く正確に書きます。
- 良い例：
alt="黒のビジネスリュック（A4対応・防水素材）" - 避けたい例：
alt="リュック おすすめ 人気 通販 最安"
srcset/sizesで端末ごとに適量配信
スマホに大きすぎる画像を配らないために、srcsetとsizesで出し分けると効果的です。
img
src="/img/sample-800.webp"
srcset="/img/sample-480.webp 480w, /img/sample-800.webp 800w, /img/sample-1200.webp 1200w"
sizes="(max-width: 600px) 480px, (max-width: 960px) 800px, 1200px"
alt="サンプル画像の説明"
width="1200"
height="800"
loading="lazy"
まとめ：チェックリスト
- 表示サイズに合わせてリサイズしてからアップ
- 可能ならWebP（必要に応じてAVIF併用）
- 容量は目安として200KB前後以内を狙う（役割次第で調整）
- LCP画像は遅延しない（Lazy Loadのかけ方に注意）
- altは自然文で内容を説明
- srcset/sizesで端末ごとに最適配信