画像はJPEG・PNG・WebPのどれで保存する？

写真と文字入り画像を分ける

JPEGは写真の配布でよく使われますが、非可逆圧縮の設定によって細部が変わります。細い文字や線を含む画面キャプチャでは、PNGなどの可逆形式も比較対象にします。WebPには可逆・非可逆の両方があり、透明度も扱えます。

用途を先に決める

これは用途別の比較案です。提出先から形式指定がある場合は、その指定を優先します。

元画像から書き出す

編集用の元画像を残し、配布用を別名で保存します。JPEGを繰り返し開いて再圧縮するより、元画像から必要な条件で書き出すと変更を管理しやすくなります。拡張子だけの変更は変換になりません。

相手の環境で確認する

書き出したファイルを実際の表示サイズで開き、文字と色を確認します。透明画像は白い背景と暗い背景で確認し、相手のアプリで開ける形式を渡します。容量をさらに減らす場合は、縦横のピクセル数と圧縮品質を別々に調整します。

1. 写真では、圧縮後の細部や暗い部分を確認します。
2. 文字入り画像では、小さい文字や線の輪郭を比べます。
3. 透明な画像では、背景を変えて縁の見え方を確認します。

画質・透明度・開けるかを別々に考える

画像形式を選ぶときは、一つの「おすすめ」で全部を決めようとせず、三つの条件に分けます。画質は写真の質感や文字の輪郭を残せるか、透明度は背景を透かしたいか、互換性は受取先のアプリや投稿先がその形式を扱えるかです。画質がよくても提出先で受け付けられなければ、配布用としては使えません。

たとえば透明なロゴを白い紙に印刷するだけなら、透明度を使わず白い背景で仕上げる選択もできます。一方、そのロゴを色の付いたWebページへ重ねるなら、白い四角まで画像に含めてしまうと意図した表示になりません。「ロゴだからこの形式」と決める前に、どこへ置くのかを確認するわけです。

保存形式を変更することと、画像の内容を修復することも別です。文字がつぶれたJPEGをPNGに保存し直しても、つぶれる前の文字が戻るわけではありません。必要な細部が残っていない場合は、形式を試し続けるより元の撮影データや図の編集ファイルへ戻ります。

作業例：商品写真と説明図を同じページに載せる

ここでは、商品写真一枚と文字入りの説明図一枚をWebページへ載せる場面を考えます。どちらも「画像」ですが、確認する箇所を変えると判断しやすくなります。以下は比較の進め方の例で、特定の設定の優劣を測った結果ではありません。

1. 写真と説明図の元ファイルをそれぞれ残し、公開用の保存先を作ります。
2. 写真は候補の形式で書き出し、商品表面の質感、影、色の境目を見比べます。
3. 説明図は細い矢印、数字、注釈を確認します。小さな文字を読むために拡大が必要なら、図の構成や掲載寸法も見直します。
4. 両方を実際のページへ置き、スマホでも必要な情報が読めるか確かめます。

この比較では、一度に画像の寸法と形式と品質を全部変えない方が、違いの原因を追いやすくなります。まず同じ寸法で形式を比べ、次に必要なら寸法を調整します。容量の小さい方が、必ずしもそのページで使いやすい方とは限りません。

迷ったときの決め方

最終的に残すのは「元画像」と「使う場所が決まった配布版」です。形式違いの候補をすべて同じ名前で保存すると、後からどれを渡したか分からなくなります。用途が分かる名前を付け、実際に掲載・送信したファイルを記録してください。

参考リンク

• MDN: Image formats