JPEG・PNG・WebPの選び方：写真とスクリーンショットをきれいに軽くする
この記事はAIの支援を受けて原文を翻訳したものです。専門用語や数式は原文とあわせて確認してください。
画像の容量が大きければ見やすいとは限りません。ブログの写真をすべてPNGにすると重くなり、文字の多い画面をJPEGにすると小さな文字の周囲がにじむことがあります。最初に判断するのは、写真の質感、文字の輪郭、透明な背景のどれを守りたいかです。原本を残し、公開用のコピーで比較しましょう。
読み手が見る細部に合わせて選ぶ
MDNの画像形式ガイドでは、JPEGは非可逆圧縮、PNGは可逆圧縮と透明度、WebPは非可逆・可逆圧縮と透明度に対応すると説明されています。可逆圧縮は保存する画素を保持する仕組みであり、元からぼけている写真を鮮明にする機能ではありません。
| 内容 | 比較する候補 | 確認する部分 |
|---|---|---|
| 風景や料理の写真 | JPEG・非可逆WebP | 空の階調、暗部、細かい模様 |
| 画面説明や図 | PNG・可逆WebP | 小さな文字と細い線 |
| 透明背景のロゴ | PNG・WebP | 曲線の縁と背景との境界 |
同じ画素数で比較する
記事で横幅1,200ピクセルまで表示するなら、両方の候補をその幅で書き出します。一方だけ縮小すると、形式の効果と画素数の違いを混同してしまいます。photo-jpeg、photo-webpなど、候補が分かる名前を付け、実際の容量を記録します。品質設定の「80」はソフトごとに意味が違うため、同じ数値でも同じ画質とは限りません。
- 原本を複製し、公開する画像の寸法を決めます。
- 適した二つの形式で書き出し、容量を控えます。
- 100%表示で文字、顔、輪郭、暗い部分を確認します。
- 記事の実際の幅とスマートフォンでも見ます。
- 必要な情報が読みにくい候補は、軽くても採用しません。
この比較は自分の素材で再現できます。他人の圧縮テストの削減率が、すべての画像に当てはまるとは考えないでください。
変換後に容量が増えることもある
GoogleのWebP FAQでは、形式の変換によってファイルが大きくなる場合も説明されています。すでに非可逆圧縮された写真を可逆形式にすると、残った圧縮の跡まで保持して容量が増えることがあります。JPEGをPNGにしても失われた細部は戻りません。できれば良い原本で編集を終えてから公開用を一度書き出し、非可逆形式で何度も保存することを避けます。
透明部分と公開後の画像を確認する
JPEGでは透明背景を保持できません。白い背景できれいなロゴでも、暗いテーマでは縁に白い線が見えることがあります。明暗両方の背景に置いて確認しましょう。公開サービスがアップロード後に縮小や再変換を行うこともあるため、手元のファイルだけでなく、公開ページから画像を開いて確認します。
説明用スクリーンショットは可逆形式、添える写真は非可逆形式という組み合わせでも構いません。拡張子を統一するより、読者が必要な情報を読み取れることが大切です。原本、公開用コピー、寸法をまとめて管理すると、後のデザイン変更でも圧縮済みの画像を編集原本にせずに済みます。
あわせて読みたい記事
本文の理解を助けるために制作したオリジナルイラストです。