用途に合わせて選ぶ
Web用の写真なら、まずWebPとJPEGを比較しましょう。輪郭を正確に保ちたい図、スクリーンショット、ロゴでは、PNGと可逆圧縮形式を比較します。WebPは透過と非可逆・可逆圧縮に対応しますが、JPEGはアルファチャンネルを保持しません。ただし、形式の機能を変換ツールがすべて書き出せるとは限りません。作業前に必ず元画像を保存してください。
画質設定より先にサイズを決める
幅800ピクセルで表示する場所に、通常は幅6,000ピクセルの画像は不要です。表示サイズと高密度画面で必要な鮮明さを決め、縦横比を維持して縮小します。トリミングは構図を変え、リサイズは寸法を変えます。商品ページの拡大表示には、別の大きな画像を用意します。小さなサムネイルを主画像へ引き伸ばすのは避けましょう。
実際の表示サイズで比較する
中程度の画質設定で書き出し、使用時のサイズで見比べ、実ファイルの容量を確認します。文字、髪、細かい布地、滑らかなグラデーションは圧縮による劣化を見つけやすい部分です。画質80という値は、異なるエンコーダーで同じ見え方を保証しません。削減率を固定して考えず、すでに効率的な画像はほとんど小さくならないか、逆に大きくなることも想定してください。
透過・向き・アニメーションを確認する
透過画像にはアルファチャンネルを保持する形式が必要です。JPEGにする場合は、輪郭が意図せず黒くならないよう背景色を選びます。保存した画像を開き直し、向きと色を確認しましょう。静止画向けの変換ではアニメーションの1フレームだけが残る場合があり、書き出し時にメタデータが消えることもあります。それらが必要なら原本を保管します。
公開手順を統一する
構図を決めて一度だけ縮小し、候補の2形式へ書き出して、許容できる画質で小さい方を選びます。意味のあるファイル名と、画像の役割を説明する代替テキストを付けてください。完成ページはパソコンとスマートフォンで確認します。これは編集上の推奨手順であり、特定エンコーダーの性能試験ではありません。評価すべきなのは、閲覧者に届く結果です。
developers.google.com · developer.mozilla.org