BlueprintLab Guide
JPEG・PNG・WebP・AVIF、結局どれにすればいい？ 迷ったら用途から決めると早いです
JPEG・PNG・WebP・AVIFのどれが正解かは、画像より「どこで使うか」から決めると早くなります。
同じ画像を2〜3形式で書き出し、実際の表示サイズで画質と容量を比較すると判断しやすくなります。元画像は残し、変換後ファイルを別名で管理してください。
画像を保存しようとすると、JPEG、PNG、WebP、AVIFと候補が出てきます。
新しい形式ほど高性能なんだろうし、「もう全部AVIFでよくない？」と思いたくなるんですが、実はそうでもないんですよ。
画像形式は、強い・弱いというより 得意な仕事が違う と思った方が分かりやすいです。
先にざっくり言うと、こんな感じです。
- 写真を広く渡す → JPEG
- ロゴ・図・スクショ・透明背景 → PNG
- Webで軽くしたい → WebP
- Webでさらに容量を詰めたい → AVIF
ただし、相手のアプリやアップロード先が対応しているかは別の話です。
JPEGは「写真ならまずこれ」で困りにくいです
スマホ写真、商品写真、ブログの写真。
こういう色の変化が多い画像はJPEGが得意です。見た目をそこそこ保ちながら、かなり容量を小さくできます。
一方で、ロゴや細い文字は少しにじみやすいです。
なので、たとえば会社ロゴをJPEGにして「なんか輪郭がモヤっとするな」となっても、保存方法を間違えたというより、形式の得意分野が違うんです。
PNGは「くっきり残したいもの」に強いです
ロゴ、アイコン、図、スクリーンショット、QRコード。
こういう境界がハッキリした画像はPNGと相性がいいです。透明背景も使えます。
ただ、写真をPNGにすると急にファイルが大きくなることがあります。
「PNGの方が高画質だから写真もPNGで」とすると、Webでは重すぎることがあるんですよ。
WebPはWeb用途ならかなり使いやすいです
WebPは、写真も扱えて透明背景も使えます。
Webサイトに載せる画像で、JPEGかPNGか迷っているなら、WebPを試す価値はかなりあります。
ただし、ここで1つ注意があります。
ブラウザで表示できることと、相手のシステムが受け付けることは別です。
印刷会社の入稿画面や古い業務システムだと、WebPを受け付けないことがあります。
なので「Webで使うならWebP、相手へ渡すなら対応形式を確認」という分け方が分かりやすいです。
AVIFはかなり軽くできる。でも万能ではありません
AVIFは、同じような見た目ならJPEGやWebPよりさらに小さくできることがあります。
これはかなり魅力的です。
ただ、変換に少し時間がかかったり、CMSや画像編集ソフト側がまだ対応していなかったりします。
なので、いきなり100枚全部をAVIFにするより、まず1枚だけ試す方がいいです。
- ちゃんと表示できるか
- 人の顔や細い文字が崩れていないか
- 本当に軽くなったか
- アップロード先が受け付けるか
ここまで見て問題なければ、まとめて変換すれば十分です。
「画質80」は、形式が変わると同じ80ではありません
ここ、けっこう勘違いしやすいところです。
JPEG品質80、WebP品質80、AVIF品質80。
数字が同じなので、同じ画質に見えますよね。
でも、実際には圧縮方式が違うので、80という数字だけで横比較はできません。
たとえばJPEGの80がちょうどよくても、AVIFの80が必要以上に高品質なこともあります。
なので「数値を揃える」より、「見た目と容量を見て決める」方が正解に近いです。
迷ったら、最終用途から逆算します
SNSやメールで送る
互換性重視ならJPEGが無難です。
Webサイトへ載せる
WebPをまず試す。さらに軽くしたければAVIFも候補です。
ロゴ・図・QRコード
PNGが分かりやすいです。
印刷へ回す
入稿先の指定が最優先です。ここは「新しい形式だから良い」ではありません。
まず試すなら
- 画像形式変換 — JPEG / PNG / WebP / AVIFへ変換する
- 画像圧縮 — 見た目を確認しながら容量を小さくする
- 画像リサイズ — ピクセル寸法を変更する
- DPI・印刷サイズ系ツール — 印刷時に必要なピクセル数を確認する
形式選びで迷ったら、「何で開くか」「どこへ載せるか」を先に決めると、かなり話が簡単になります。