商品画像はJPG・PNG・WebPのどれ？無料でできる書き出し比較

拡張子だけでなく、中身で選ぶ

MDNの形式ガイドでは、JPEGは写真向けの非可逆圧縮、PNGは透過に対応した可逆圧縮、WebPは可逆・非可逆の両方式に対応すると整理されています。ただし、どの画像でも同じ形式が最小になるわけではなく、アップロード先の対応も別問題です。

参照: MDN: Image file type and format guide ↗

同じ条件で比べる

大きなPNGと、小さく縮めたJPGを比べて形式の差だと判断しないでください。同じ構図と出力サイズを使います。また、以前圧縮したJPGを何度も開いて保存するより、保存しておいた元データから各候補を書き出します。

ピクセル数・縦横比・ファイル容量は別の情報です。1000 × 1000は画素の数、1:1は形、KBは保存データの量を示します。一つを変えれば残りも解決するとは限りません。

1. 掲載先の対応形式とサイズ条件を確認する。
2. 同じ画像を同じピクセル数で2形式に書き出す。
3. 原寸と掲載予定の表示幅で開く。
4. アップロード後も確認し、必要な画質を保つ軽い方を選ぶ。

容量より先に、文字と輪郭を点検する

ラベルの小さな文字、明るい背景上の暗い輪郭、滑らかな影を見ます。圧縮によって文字周辺がにじんだり、影が段階状になったりする場合があります。容量が少し減っても、容量表示の数字が読み違えられるなら不適切です。

この記事では、一律の目標KB数は設定しません。必要な容量は画像と掲載先、見せたい細部によって違います。自社ページなら読み込みも確認しますが、ファイルが小さいことだけでページ全体が速いとは判断できません。

PNG保存だけでは背景は透明にならない

形式が透過に対応していても、その画像に透明部分があるとは限りません。白や色の背景がある構図をPNGで保存しても、背景は残ります。拡張子で判断せず、対照的な背景の上でファイル自体を確認してください。

SokuPhotoではJPG・PNG・WebPで構図を書き出せますが、PNG保存は背景除去の操作ではありません。また「画像だけ保存」と編集後の書き出しは別です。見出しが必要なら、最後のファイルに文字が入っているかを確認します。文字なしの元画像も残しておくと、別の構図に使い回せます。