用語
画像圧縮
画像圧縮は、実用的な見た目の品質を保ちながら画像のファイルサイズを小さくする処理です。共有、アップロード、保存がしやすくなり、Web上での読み込みも速くなります。
可逆圧縮と非可逆圧縮
可逆圧縮は、画像データを取り除かずにファイルサイズを減らします。展開後の画像は元と同じです。PNGは可逆圧縮を使うため、文字の輪郭や色の正確さが重要なスクリーンショットに向いています。
非可逆圧縮は、人の目では気付きにくいと判断された画像データの一部を取り除き、ファイルサイズを減らします。JPGは非可逆圧縮です。ファイルは小さくなりますが、元の画質を完全には戻せません。中程度の設定では差を見分けにくい場合もあります。強い設定では、特に文字や鋭い輪郭の周囲にノイズが見えるようになります。
WebPは可逆圧縮と非可逆圧縮の両方に対応し、同等の画質ならJPGやPNGより小さくなるのが一般的です。
画像圧縮が重要な場面
- Webの表示性能: 大きな画像はページの読み込みを遅くします。圧縮すれば読み込みが速くなり、通信量も減ります
- 共有とメール: ファイルが小さいほど添付しやすく、送信も短時間で済みます
- 保存: 圧縮した画像はディスクの使用量を減らせます。大量に撮影する場合ほど影響が大きくなります
- スクリーンショットのワークフロー: 一括撮影では数百枚の画像が生成されることがあります。圧縮すると出力全体を管理しやすくなります
- ドキュメント: 書類やPDFへ埋め込むスクリーンショットは、画質とファイルサイズの均衡を取って圧縮すると扱いやすくなります
主な形式と圧縮方法
- PNG: 可逆圧縮。文字、UI要素、べた塗りを含むスクリーンショットに向いています。画質は正確ですが、ファイルが大きくなる場合があります
- JPG: 非可逆圧縮。写真やグラデーションを含む画像に向いています。ファイルを小さくできますが、鋭い輪郭や文字の周りにノイズが出ることがあります
- WebP: 可逆圧縮と非可逆圧縮の両方に対応します。同等の画質ならPNGやJPGより小さくなるのが一般的です。現在のブラウザで広く対応しています
- AVIF: 圧縮効率に優れた比較的新しい形式です。ブラウザ対応は広がっていますが、すべての環境で使えるわけではありません
よくある失敗
- 文字入りのスクリーンショットを強く圧縮する: 非可逆圧縮を強くすると文字がぼやけ、鋭い輪郭の周囲にノイズが出ます。文字の読みやすさが重要なら、PNGまたはWebPの可逆圧縮を使います
- 圧縮済みの画像を再び圧縮する: JPGや非可逆WebPを繰り返し圧縮すると、処理のたびに画質が落ちます。必ず元画像から圧縮してください
- べた塗りの多いスクリーンショットをJPGにする: JPGは写真向けに設計されています。単色背景、UI要素、文字を含む画像は、PNGまたは可逆WebPのほうが小さく鮮明になる場合があります
- 一括書き出しの前に画質を確認しない: 全体へ適用する前に、目的の圧縮設定でサンプルをプレビューしてください
よくある質問
画像を圧縮すると見た目が悪くなりますか?
非可逆圧縮では、特に強い設定にすると画質が落ちます。可逆圧縮なら画質を変えずにファイルサイズを減らせます。適した方法は、画像の用途によって異なります。
スクリーンショットに適した形式は?
文字の輪郭や色の正確さが重要ならPNGが適しています。一部の画質低下を許容できる写真中心の画像ならJPGを使えます。WebPは、どちらの内容でも画質とファイルサイズのバランスを取りやすい形式です。
圧縮を元に戻せますか?
可逆圧縮は完全に元へ戻せます。非可逆圧縮は元に戻せません。一度取り除かれた画質の情報は、圧縮後のファイルから復元できません。
ファイルサイズをどの程度減らせますか?
画像によって異なります。単色の広い領域を持つPNGスクリーンショットは、可逆圧縮で50〜80%小さくできる場合があります。JPGでは画質設定により60〜90%削減できることがありますが、削減率が大きい設定ほど画質低下が目立ちます。
出典
- Imageminで画像を圧縮する — web.dev