画像形式の問題
JPGがある。誰かがWebPを使えと言う。別の人がAVIFの方が良いと言う。デザイナーはPNGを送ってくる。CMSはWebP一択と言う。メールクライアントはJPG以外でクラッシュする。
これを一度で片付けよう。
各形式の解説
JPEG（JPG）— 安定の定番
1992年発明。いまだWebで最も使われている画像形式。
- 圧縮：良好（非可逆のみ）
- 透明度：なし
- ブラウザサポート：100%
- 最適用途：写真、グラデーション画像、メール、互換性が重要なすべての場面
- 向かない用途：テキスト入り画像、ロゴ、スクリーンショット（圧縮アーティファクトが出る）
基本則：迷ったとき・互換性が重要なとき → JPG。
PNG — 透明度付き無損失品質
- 圧縮：無損失（写真ではJPGより大きい）
- 透明度：あり（アルファチャンネル）
- ブラウザサポート：100%
- 最適用途：ロゴ、アイコン、スクリーンショット、テキスト入り画像、透明背景が必要なもの
- 向かない用途：写真（同等JPGの3〜5倍大きい）
基本則：透明度またはピクセル単位の鮮明さが必要なとき → PNG。
WebP — GoogleによるJPGとPNGの進化版
2010年Googleリリース。JPGとPNG両方を置き換えるために設計。
- 圧縮：同画質でJPGより25〜35%小さい、PNGより20〜30%小さい
- 透明度：あり
- アニメーション：あり（GIFの代替）
- ブラウザサポート：97%+（すべての最新ブラウザ——Chrome、Firefox、Safari 14+、Edge）
- 最適用途：ブラウザ環境を制御できるWeb画像
- 向かない用途：メール（多くのクライアントが非対応）、古いデバイス向けアプリ
注意点：SafariのWebPサポートは2020年から。iOS 13や旧Safariユーザーがいる場合はJPGフォールバックが必要。
AVIF — 新チャンピオン
AV1動画コーデックベース。2019年頃リリース、2022年から広くサポートされる。
- 圧縮：同画質でJPGより50%小さい——現在最高
- 透明度：あり
- アニメーション：あり
- ブラウザサポート：約93%（Chrome、Firefox、Safari 16+、Edge——IEは非対応、古いデバイスも非対応）
- 最適用途：最大圧縮が重要なWeb画像、モダンなオーディエンス
- 向かない用途：まだ対応していないツール（Photoshopは2023年にサポート追加、一部CMSはまだ未対応）
注意点：エンコードが遅い（WebPの10〜20倍遅い）。大量変換にはツールを使おう。
GIF — WebPか動画を使おう
GIFは30年前のもの。8ビット、1フレームあたり256色制限、ファイルサイズが笑えないほど大きい。
5MBのGIFは300KBのWebPアニメーションか200KBのMP4になれる。2026年にGIFを使う理由はほぼない——特定のプラットフォームが必須とする場合を除いて。
形式比較表
| 形式 | ファイルサイズ | 透明度 | アニメーション | サポート | 最適用途 |
|---|---|---|---|---|---|
| JPG | 基準 | なし | なし | 100% | 写真、メール |
| PNG | 3〜5× JPG | あり | なし | 100% | ロゴ、スクリーンショット |
| WebP | −30% JPG | あり | あり | 97% | Web写真とアイコン |
| AVIF | −50% JPG | あり | あり | 93% | モダンWeb、最大圧縮 |
| GIF | 10〜20× WebP | 一部 | あり | 100% | 旧環境互換のみ |
どの形式を選ぶか：決定ガイド
Webサイトの写真 → AVIF（古いブラウザ向けWebPフォールバック付き）。HTMLの書き方：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>
透明背景のロゴ → WebPかPNG。WebPは30%小さい；100%互換性が必要ならPNG。
メール → 常にJPG。メールクライアントは混乱の元；JPGが唯一確実に安全な形式。
画像が多い商品ページ → AVIF。圧縮の差（JPGより50%小さい）はページ読み込み時間とCore Web Vitalsに実際の影響を与える。
WebサイトのGIF置き換え → WebPアニメーションかMP4。動画→GIF変換がWebP対応アニメーションを作成；ほとんどの最新プレーヤーはMP4ループをきれいに処理できる。
SNSへのアップロード → JPG。Instagram、Twitter/X、どのみち再圧縮される。
SEOの観点
Google PageSpeed InsightsとCore Web Vitalsは過大な画像ファイルを特別に減点する。50枚以上の画像があるサイトでJPGからWebP/AVIFに切り替えると、LCP（Largest Contentful Paint）スコアが大きく改善することがある。
400KBのhero画像JPG = 280KBのWebP = 200KBのAVIF。視覚的な結果は同じ。読み込み時間は違う。
今すぐ画像を変換しよう
画像変換ツール — PNG、JPG、WebP、AVIF間を変換——一括処理、無料。アカウント不要。
形式を変えずに圧縮したい場合：画像圧縮ツールが品質と形式を保ちながらファイルサイズを削減する。