画像圧縮はどうやって画質を保ちながらファイルを小さくするのか
このツールの仕組み
画像圧縮とは、見た目を元の画像にできるだけ近づけたまま、占有するバイト数を減らすように書き直すことです。このツールはJPEG・PNG・WebP・AVIFのファイルをデコードし、HTMLのcanvasに描き直したうえで、より低い画質か小さい解像度で再エンコードします。処理はすべてお使いの端末上で、ブラウザ標準の画像APIを通じて行われるため、10MBの写真でも端末の外に出ることはありません。
用意されている方式は4つです。画質のみ、サイズのみ、画質+サイズ、そして目標ファイルサイズで、最後の方式は指定したKB以内に収まるまで複数回のパスを繰り返します。
方式の選び分け
ピクセル寸法は用途に合っているのにファイルだけが重すぎる場合は、画質のみを選びます。表示される大きさよりはるかに大きい画像、たとえば800ピクセルの段組みに使う4000ピクセルのカメラ書き出しには、サイズのみが向いています。サムネイルをまとめて用意するときなど、思い切って削りたい場合は両方を組み合わせます。
アップロード上限やパフォーマンス予算で上限値がきっちり決まっているときは、目標ファイルサイズが最適です。スライダーを勘で動かす代わりに、数値を指定すればツールがそこへ向けて反復調整します。
具体的な例
カメラの写真が3.8MB・4032×3024ピクセルで書き出されるのに、ページでは横1200ピクセルでしか表示しないとします。画質+サイズを選び、幅の上限を1200に、画質を80%前後に設定します。結果パネルには、新しいファイルサイズ、削減率、最終的な寸法、そして最適化を何回反復したかが表示されます。3.8MB前後で始まったファイルは300KBを下回ることが多く、90%以上の削減でも、実際に見る大きさでは劣化が目立ちません。
フォーマット・透明度・トレードオフ
圧縮は常にトレードオフです。画質を一段下げるたびに取り戻せないディテールが失われるため、JPEG・WebP・AVIFは非可逆圧縮で写真に向いています。PNGは可逆圧縮で全ピクセルを正確に保つので、ロゴやスクリーンショット、線画に適していますが、その分どこまで小さくできるかには限界があります。同じ見た目の画質ならWebPやAVIFがJPEGを上回るのが一般的です。
透明度にも注意してください。PNGとWebPはアルファチャンネルを持ちますが、透明な画像をJPEGで保存すると透けている部分が単色の背景で塗りつぶされます。出力が元より大きくなりそうな場合はツールが警告するので、元のファイルをそのまま残せます。