画像フォーマット解説: PNG・JPG・GIF・WebP・SVG

正しい画像フォーマットを選ぶことは、ページを速く鮮明にする最も簡単な方法の一つです。間違って選ぶと、ぼやけたロゴや本来の 5 倍重い写真になります。ここでは各よくあるフォーマットが何に強いかを紹介し、画像にフォーマットを合わせられるようにします。

二つの系統

まず、他のすべてを説明する区別です。ラスター（Raster） フォーマット（PNG、JPG、GIF、WebP）はピクセルの格子を保存するので、拡大するとぼやけたりピクセル化したりします。ベクター（Vector） フォーマット（SVG）は図形を数式として保存するので、どんなサイズでも切れるように鮮明なままです。写真は常にラスター、ロゴやアイコンはベクターが最適です。

フォーマット

JPG / JPEG

写真 向けに作られた非可逆圧縮。写真コンテンツに優れたサイズで、どこでも対応しますが、透明度がなく、過度に圧縮すると目立つアーティファクトが出ます。WebP が選べないときの写真の既定です。

PNG

透明度 を備えた可逆。ロゴ、アイコン、スクリーンショット、そして鋭いエッジ・テキスト・平坦な色があるものすべてに最適です。可逆なので、PNG で保存した写真は大きくなります。

GIF

256 色 に制限された古いフォーマットで、今やほぼ単純な アニメーション だけに使われます。静止画では PNG に劣り、アニメーションには現代のフォーマット（アニメーション WebP や動画）の方が小さく高品質です。

WebP

すべてをこなす現代のフォーマット: 非可逆でも可逆でも、透明度とアニメーションつき。同じ見た目の品質で、たいてい JPG や PNG より 25〜35% 小さい ファイルを生み、現行のすべてのブラウザが対応します。今日のたいていのウェブ画像には、WebP が最良の既定です。

SVG

XML として定義されたベクターグラフィックス。ロゴ、アイコン、イラスト に理想的です — 無限に拡大でき、単純な図形はごく小さく、CSS でスタイルを与えられます。写真には向きません。

素早い判断ガイド

• 写真 → WebP（最大の互換性なら JPG）
• ロゴやアイコン → SVG（ラスターのコピーが要るなら PNG）
• テキストのあるスクリーンショットや図 → PNG（または WebP）
• 透明度が必要 → PNG、WebP、または SVG
• 単純なアニメーション → アニメーション WebP

フォーマットを選んだら、私たちの 画像圧縮ガイド がサイズを下げる方法を扱います。SVG 変換ツール と 画像リサイザー でフォーマットを変換し、画像圧縮ツール でファイルを縮めましょう — すべてブラウザで。