JPEG、PNG、WebP、AVIF：適切な画像フォーマットを選ぶ

画像をエクスポートします。選択肢はJPEG、PNG、WebP、GIF、AVIF、SVGなど。

すべて画像を生成します。互換性はありません。

JPEG：写真の標準

最適： 写真、グラデーションのある複雑な画像、多くの色を持つもの。

避ける： テキスト、ロゴ、スクリーンショット、鋭いエッジを持つもの。

JPEGは非可逆圧縮を使います。写真でおそらく気づかないデータを捨てます。でも鋭いエッジには苦労します——テキストはぼやけ、ロゴにアーティファクトが出ます。

品質設定が重要。80-85%が通常スイートスポット。60%以下だと、圧縮アーティファクトが明白になります。

PNG：鋭いエッジと透明度

最適： スクリーンショット、ロゴ、テキスト付きグラフィック、透明度が必要な画像。

避ける： 大きな写真（ファイルが巨大になる）。

PNGは可逆圧縮を使います。すべてのピクセルが正確に保持されます。鋭いエッジには素晴らしい、複雑な画像でのファイルサイズには恐ろしい。

PNG-8（256色） vs PNG-24（数百万色）。できる時は8を使いましょう。

WebP：現代の妥協点

最適： Web上のほぼすべて。

避ける： 古いブラウザとの最大の互換性が必要な時。

WebPは非可逆と可逆の両方の圧縮を行い、同じ品質でJPEGやPNGより25-35%小さいことが多いです。

ブラウザサポートは今や優秀。古代のブラウザ用にJPEG/PNGフォールバックと一緒にWebPを使いましょう。

AVIF：最新で最小

最適： 良い品質での最大圧縮。

避ける： ブラウザサポート要件、エンコード速度の懸念。

AVIFはWebPよりさらに良い圧縮を達成します。でもエンコードが遅く、ブラウザサポートはまだ成長中。

事前にフォーマットを生成できるなら（静的サイト）、フォールバック付きでAVIFを使いましょう。

GIF：動く画像、限られた色

最適： シンプルなアニメーション、非常にシンプルなグラフィック。

避ける： 写真（256色制限）、大きなアニメーション（巨大ファイル）。

GIFのアニメーションサポートが生き残らせています。でも256色最大は写真が恐ろしく見えることを意味します。

アニメーション用には、MP4やWebM動画の方が小さくて品質が良いことが多いです。

SVG：ベクターグラフィック

最適： アイコン、ロゴ、イラスト、拡大縮小が必要なもの。

避ける： 写真、複雑な画像。

SVGはビットマップフォーマットではありません。形状を記述するXMLです。品質劣化なしに任意のサイズに拡大縮小。

アイコンとロゴには、SVGがほぼ常に正しい選択です。

クイック判断ガイド

| コンテンツタイプ | フォーマット | |-------------|--------| | Web用写真 | WebP（JPEGフォールバック） | | スクリーンショット | PNG | | ロゴ/アイコン | SVG | | シンプルなアニメーション | GIFまたはアニメーションWebP | | 複雑なアニメーション | MP4/WebM動画 | | 最大品質アーカイブ | PNG |

よくある間違い

すべての写真にPNG。 10MBのPNGは目に見える違いなく500KBのJPEGになりえます。

スクリーンショットにJPEG。 テキストがぼやけます。PNGを使いましょう。

2026年にWebPを使わない。 ブラウザサポートは優秀。使いましょう。

JPEGを繰り返し保存。 保存ごとに圧縮アーティファクトが追加されます。ソースファイルを保持して一度だけエクスポートしましょう。

---

フォーマット選択は画像固有です。写真はJPEG/WebP。グラフィックはPNG/SVG。トレードオフを理解し、それに応じて選びましょう。