Web サイトに載せる画像は、ファイルサイズ、品質、機能のトレードオフです。PNG、JPG、WebP があればほぼすべてのケースをカバーできますが、互換性があるわけではありません。この記事では、各形式が何に強いのか、どう選べば迷わないのかを説明します。
結論から言うと
- JPG：写真や複雑な画像で、画素の完全さよりファイルサイズを優先したい場合。
- PNG：スクリーンショット、図、ロゴ、透明や可逆のディテールが必要なもの。
- WebP：同じくらいの品質でできるだけ小さいファイルが欲しく、透明も使いたい場合。
早見比較
| 形式 | 圧縮 | 透明 | 向いている用途 |
|---|---|---|---|
| PNG | 可逆 | 対応 | スクリーンショット、グラフィック、ロゴ |
| JPG | 非可逆 | 非対応 | 写真、共有、メール |
| WebP | 非可逆または可逆 | 対応 | モダンなサイト、小さいファイル |
PNG：くっきりした画素、大きくなるファイル
PNG は可逆圧縮の形式です。すべての画素が正確に保持されるため、スクリーンショット、UI のモックアップ、グラフ、輪郭のくっきりしたロゴに向いています。アルファチャンネルにも対応しているので、透明な背景は透明のまま残ります。
代償はサイズです。写真を PNG で保存すると、同じ写真を JPG にした場合の5〜10倍になることも珍しくありません。写真には可逆圧縮では捨てられない微妙な色の変化が多く含まれているからです。そのため、写真ギャラリーの既定形式としては PNG は不向きです。
PNG を使うのは次のような場合です。
- 画像に文字、細い線、鋭いエッジがある。
- 透明な背景が必要。
- 後で再編集する可能性があり、非可逆圧縮の繰り返しを避けたい。
JPG：写真は小さく、透明はなし
JPG は非可逆圧縮を使います。人間の目が気づきにくいディテールを捨てるため、写真に対して非常に効果的です。高品質の JPG は元画像と見分けがつかないことが多く、しかもはるかに小さいサイズになります。
トレードオフは現実にあります。JPG にはアルファチャンネルがなく、保存するたびに少しずつディテールが失われます。JPG を何度も編集して保存し直すのは良い考えではありません。文字や鋭いエッジには、特に低い品質設定で目に見えるノイズが出やすくなります。
JPG を使うのは次のような場合です。
- 画像が写真である。
- 画素単位の正確さよりファイルサイズが重要。
- 画像に透明が必要ない。
品質は 80〜90 あたりが最適なことが多いです。70 を下回ると、顔、空、グラデーションでノイズが目立ちやすくなります。
WebP：モダンな既定の選択肢
WebP は非可逆と可逆の両方の圧縮に対応し、透明も扱えます。同じ見た目の品質なら JPG より 25〜35% 小さくなることが多く、透明が必要なグラフィックでは PNG の代わりにもなります。
ブラウザ対応はもう問題ではありません。現在の Chrome、Firefox、Safari、Edge はすべて WebP を表示できます。非常に古いブラウザをサポートする必要がある場合は JPG か PNG のフォールバックを用意しますが、ほとんどのサイトでは不要です。
WebP を使うのは次のような場合です。
- Web 用にできるだけ小さいファイルが欲しい。
- 画像に透明が必要。
- モダンなブラウザを対象にして問題ない。
考えすぎずに選ぶ方法
- 写真か？ JPG か WebP から始める。
- 透明が必要か？ PNG か WebP を使う。
- スクリーンショットかロゴか？ PNG か可逆の WebP を使う。
- 帯域が重要か？ WebP、次に JPG を優先する。
- 何度も編集するか？ PNG のマスターを残し、圧縮した複製を書き出す。
3つの形式は 画像形式変換ツール でブラウザ内で相互変換できます。元の縦横サイズを保ち、JPG と WebP では品質を調整できます。
よくある失敗
- スクリーンショットを JPG で保存する。 文字のエッジがぼやけ、ファイルサイズもそれほど小さくなりません。PNG か WebP を使いましょう。
- 写真を PNG で保存する。 見た目の利点がないままファイルだけが大きくなります。JPG か WebP を使いましょう。
- 4000px の画像を 400px の幅で表示する。 先にリサイズしてから圧縮します。表示しない画素をブラウザにダウンロードさせるべきではありません。
- JPG を何度も保存し直す。 保存のたびに圧縮ノイズが積み重なります。元画像を残し、書き出しは1回にしましょう。
- 透明を忘れる。 JPG は透明部分を白で塗りつぶすため、色付きの背景に置いたロゴが台無しになることがあります。
大きな写真をアップロード前に軽くしたい場合は、画像圧縮ツール がローカルでリサイズと圧縮を行います。サイトのアイコンを用意するなら、ファビコン生成ツール が1枚の画像から全サイズを生成します。
簡単な目安
Web 用には可能なら WebP、写真には JPG、スクリーンショットやグラフィック、透明が必要なものには PNG を使ってください。意図をもって変換し、圧縮の前にリサイズし、後で編集する可能性があるものは可逆のマスターを残しておきましょう。