JPG vs PNG vs WEBP:どの画像形式を使うべき?

保存やアップロードを行うほぼすべての画像は、JPG、PNG、WebPという3つの形式のいずれかを使っています。選択を誤ると、ファイルサイズが無駄に膨らんだり、画質が目に見えて劣化したりします。この比較では、各形式の仕組み、本当に得意な分野、そして数秒で決める方法を解説します。

結論から言うと

• Webやメールで使う写真:JPG。表示される場所を自分で管理できるならWebPも可。
• スクリーンショット、UIのキャプチャ、ロゴ、シャープな文字や輪郭を含む画像:PNG。
• 透過が必要なもの:PNGまたはWebP(JPGでは透過を保存できません)。
• マークアップを自分で管理できるモダンなWebサイト:写真でもグラフィックでも、サイズ面でWebPが有利になることがほとんど。
• アーカイブ用のマスターや、後からもう一度編集する画像:PNG、またはカメラのオリジナル形式。非可逆JPGの再保存を繰り返すのは避けましょう。

JPG(JPEG):写真の主力フォーマット

JPGは1990年代初頭に写真用として設計された非可逆圧縮形式です。なめらかな色の変化を非常に効率よく圧縮できるため、1200万画素のスマートフォンの写真でも数MBに収まります。一方、弱点も同じ設計に起因します。透過を保存できない、再保存のたびに少しずつ劣化する、シャープな輪郭や文字の周りに目に見えるアーティファクトが出る――だからこそ、スクリーンショットやロゴはJPGにするとにじんで見えるのです。アニメーションには非対応です。

PNG:ピクセルパーフェクトな再現と透過

PNGは可逆圧縮形式です。保存したとおりに、すべてのピクセルが正確に復元されます。シャープな輪郭やフラットな塗り、文字をくっきりと表示し、フルのアルファ透過にも対応しているため、スクリーンショットやグラフィックには安心して使える万能な選択肢です。その代償はファイルサイズです。見た目の品質が同等でも、同じ写真をPNGで保存するとJPGの5~10倍のサイズになることがよくあります。また、PNGはシンプルな1ビットアニメーション(APNG)にも対応していますが、安定して表示できるのは一部のブラウザに限られます。

WebP:モダンな標準

GoogleのWebPは、非可逆圧縮と可逆圧縮、アルファ透過、アニメーションを1つの形式でサポートしています。非可逆WebPは、同等の見た目品質でJPGより通常25~35%小さく、可逆WebPもPNGより約25%小さくなります。Chrome、Firefox、Safari、Edgeといった現行の主要ブラウザはすべて何年も前から対応しているため、かつての「互換性」という言い訳はもう通用しません。残る注意点はブラウザの外です。古いデスクトップソフトウェアやカメラ、一部のワークフローでは、今なおJPGかPNGを前提としているものがあります。

並べて比較:同じ画像を3つの形式で

典型的な幅2000ピクセルの写真では、品質80のJPGが約500 KB、同等の品質の非可逆WebPが約350 KB、PNGが約3 MBになり、画面上ではどれもほとんど見分けがつきません。一方、文字を含むアプリケーションウィンドウのスクリーンショットでは、PNGがほどよいサイズで最もシャープな結果になり、WebPは同等の画質でわずかに小さく、JPGはPNGよりほんのわずかに小さいだけで、文字の一つひとつの周りにぼんやりしたハロー(にじみ)が現れます。この傾向は一貫しています。サイズで勝つのはWebP、確実性で勝つのはPNG、そして汎用性で勝つのはJPGです。

形式間の変換

別の形式が必要になるとき――たとえば、クライアントに「どうしてもPNGで」と言われたWebP形式のダウンロード画像や、メール用に軽量なJPGにしたいPNGのスクリーンショット――も、Image Convertツールなら2クリックで変換できます。JPG、PNG、WebPの相互変換をブラウザ内で行い、バッチ処理にも対応しています。ToolsMioのすべてのツールと同様、画像がサーバーにアップロードされることは一切ありません。

今すぐImage Convertツールで、JPG・PNG・WebPの間で画像を変換してみましょう。