WebP・PNG・JPG、どれを使うべき？

画像フォーマットの選択は、ファイルサイズ、画質、透過のバランスです。Web のほぼすべてのケースは 3 つのフォーマットでカバーできます。

早見ルール

写真は WebP。古いシステムが JPG しか受け付けない場合は JPG。ロゴ、アイコン、UI、スクリーンショットは、輪郭のシャープさと透過を保てる PNG かロスレス WebP。ファビコンは ICO と PNG。AVIF はさらに小さくなることが多いものの、エンコードに時間がかかります。

早見表

形式   向いている用途                透過     圧縮
JPG    写真、最大の互換性            なし     非可逆
PNG    スクリーンショット、ロゴ、文字  あり     可逆
WebP   Web用の写真や図               あり     非可逆／可逆
AVIF   いちばん小さい写真            あり     非可逆／可逆
GIF    簡単なアニメーションのみ      1ビット  可逆、256色
SVG    ロゴやアイコン（ベクター）    あり     ピクセルではない

同じ写真が WebP だと小さくなる理由

JPG も非可逆の WebP も目にほとんど見えない細部を捨てますが、WebP のほうが効率的なので、同程度の画質なら写真はたいていかなり小さくなります。PNG は可逆圧縮で、スクリーンショットには最適ですが、写真には無駄が多くなります。

意味のある品質設定

非可逆の形式では、Webサイトの写真なら品質75〜85がたいてい最適です。ファイルは大きく縮み、見た目もきれいなままです。写真のポートフォリオや拡大して見る画像なら上げ、小さなサムネイルなら下げましょう。品質以上に効くのは寸法です。幅4000ピクセルの写真を幅800ピクセルの欄に表示すると、ほとんどのバイトが無駄になります。

透過

JPGには透過がないので、背景が透明なロゴをJPGで保存すると白や黒の四角が付きます。いろいろな背景の上に置くものにはPNGかWebPを使いましょう。GIFは完全に透明か完全に不透明なピクセルしか扱えないため、なめらかな縁がギザギザに見えます。

2026年の互換性

現在の主要なブラウザはすべてWebPとAVIFに対応しています。問題はほかにあります。古いデスクトップソフト、メールソフト、印刷会社、アップロードフォームの中には、いまだにJPGかPNGしか受け付けないものがあります。Webの外に出すファイルなら、写真はJPG、図はPNGがいちばん安全です。

元画像を残しておく

非可逆の形式どうしで変換するたびに画質は落ちるので、すでに圧縮されたコピーではなく、手元にあるいちばん良い元画像から変換しましょう。JPGをPNGにしても失われた細部は戻らず、ファイルが大きくなるだけです。

すばやく決めるための手順

• どの大きさでもくっきり見せたいロゴやアイコン？あればSVG、なければPNG。
• 背景を透明にしたい？PNG、WebP、AVIFのどれか。JPGは不可。
• Webサイト用の写真？WebP、いちばん小さくしたいならAVIF。
• 印刷会社、古いソフト、アップロードフォームに渡す？写真はJPG、図はPNG。
• アニメーション？短い動画ファイルのほうがGIFよりたいていずっと小さくなります。

ローカル変換が大切な理由

4Dev の画像変換ツールはすべてブラウザ内で動きます。画像はお使いの端末でデコード・再エンコードされ、アップロードされることはありません。PNG、JPG、WebP、GIF、HEIC、AVIF、TIFF などを読み込め、変換と同時にサイズ変更もできます。

画像変換ツールを開く