リサイズと圧縮、どっちが先?画像を小さくする正しい順番

「画像を小さくする」には、まったく別の2つの意味があります。画像の寸法を小さくするリサイズと、寸法はそのままファイルを軽くする圧縮です。多くの人がこの2つを混同しますが、順番を間違えると容量が十分減らないか、画質だけが落ちます。この違いと適用順を理解することが、きれいで小さいファイルの鍵です。

リサイズがやること

リサイズはピクセル寸法を変えます。たとえば4000×3000を1200×900に。ファイルサイズはピクセル数に応じて増えるため、寸法を減らす効果は絶大です。縦横を半分にすればピクセルの約75%が消え、たいてい容量の大半も一緒に減ります。

圧縮は同じピクセルを保存するのに必要なバイト数を減らします。目に付きにくい情報を捨てる(非可逆)か、データをより効率的に詰める(可逆)方法です。寸法はそのままに容量を下げますが、非可逆形式では画質を少し犠牲にします。

リサイズが先、圧縮が後です。捨てる予定の何百万ピクセルを丁寧に圧縮しても意味がありません。実際に表示される最大サイズへリサイズしてから、その小さくなった画像に圧縮をかけましょう。逆順だと、せっかく圧縮した情報をリサイズがまた捨てることになり二度手間です。

最大の効果は両方やったときに出ます。ブログの狭いカラムに表示する5MBの写真は、適切な幅にリサイズしてWebPに圧縮すれば、見た目の違いなく100KBを大きく下回ることもあります。Scrunchは変換・圧縮の工程を担当するので、適切な表示サイズと組み合わせれば画像を限界まで軽くできます。

表示サイズより小さくではなく、表示サイズに合わせて縮小するなら、画面上ではむしろシャープに見えます。表示領域より小さくすればぼやけるので、表示サイズ(Retina用に約2倍)を基準にしてください。

元の寸法が表示サイズよりはるかに大きい場合、圧縮だけでは限界があります。不要に大きなピクセルをそのまま圧縮しているからです。先にリサイズでピクセル数を減らす方がはるかに大きく削減できます。

できます。表示サイズへリサイズしてからWebP・AVIFへ圧縮する2段階を順に適用すればOK。順番さえ守れば、同じ品質で最小のファイルになります。

画像が実際に表示される最大幅を基準に。たとえば本文カラムが800ピクセルなら、Retina画面を考慮して約1600ピクセルで十分です。それ以上は帯域の無駄、それ以下は画面でぼやけます。