JPEG・PNG・WebP:画像の用途に合わせて形式を選ぶ

すべての画像に最適な形式はありません。背景が透明な商品画像、旅行写真、小さな文字のスクリーンショットでは優先事項が違います。ファイルを小さくする前に、残すべき細部を決めましょう。

用途から考える

JPEGは写真でよく使われ、通常は非可逆圧縮を行い、アルファ透過を保持しません。PNGは透明な背景や劣化させたくない細部に向いています。WebPは非可逆・可逆の両方の圧縮と透過に対応します。受け取り側のアプリが形式に対応していることも必要です。

参考資料: MDN — Image File Type and Format Guide · Google for Developers — WebP

画像の寸法とファイル容量は別

1600 × 1000はピクセルの並びを、450 KiBは保存するデータ量を表します。寸法を小さくするとピクセル数が減り、圧縮設定を変えると保存方法が変わります。同じ寸法でも容量は同じとは限りません。

画面の小さな領域に使うなら、表示に合う寸法から始めます。印刷では必要な大きさとピクセル数を対応させましょう。1800ピクセルを1インチあたり300ピクセルで印刷すると、理論上の幅は6インチです。これは密度の計算であり、プリンターや元画像の品質を保証するものではありません。

変換しても戻らない情報がある

JPEGをPNGにしても、すでに失われた細部は戻りません。透明な画像をJPEGにするには、透明部分を背景で置き換える必要があります。元画像を保存し、拡張子だけでなく出力を確認しましょう。

予定の表示サイズで見た後、文字や輪郭を拡大します。滑らかな色の変化、ロゴ、透明部分を確認してください。容量が少し減っても、表示された文字が読めなくなれば改善とはいえません。

参考資料: MDN — Image File Type and Format Guide

例:色付きカードに載せるロゴ

透明なロゴが1200 × 800ピクセルで、幅300ピクセルで表示されるとします。適切な画面では表示寸法の2倍を用意するため、透過対応の形式を保ったまま600 × 400の版を試します。

明るい背景と暗い背景の両方に載せてみましょう。白い四角や輪郭の縁取りが出る場合は、背景処理と変換を見直します。どの画像も同じ割合で小さくなるとは考えず、見やすさと容量を一緒に比較してください。

ほかの関連ツール

参考資料