ブログ › 画像ファイルが大きいと起きる問題

画像ファイルが大きいと起きる問題

スマートフォンのカメラで撮った写真1枚が4〜6MBになる時代です。高画質であることは明らかにメリットです。しかし、その写真をブログに投稿したり、メールに添付したり、ショッピングサイトの商品画像として登録する際に、原画のまま使ったらどうなるでしょうか？

大きな画像ファイルが引き起こす問題

どれくらい圧縮すればいい？

用途によって基準が異なります。Webページの一般的な画像なら幅1200px基準でJPEG品質80%を適用すると、通常100〜300KB程度が適切です。サムネイルなら20〜50KBで十分です。逆に印刷用画像は圧縮より画質を優先する必要があります。

重要なのは「どこで使われるか」です。Retinaディスプレイでフルスクリーン表示する背景画像なら200〜400KBも許容されます。しかし一覧ページのサムネイルに2MBの画像を使うのは明らかな無駄です。

どのフォーマットを使えばいい？

フォーマットの選択だけでもファイルサイズが大きく変わります。同じ画像を同じ画質で保存した場合、JPEGと比較してWebPは約25〜35%、AVIFは約40〜50%小さくなります。透明背景が不要な写真なら、WebPが現在最も実用的な選択です。Chrome、Firefox、Safari、Edgeすべてで対応しています。

ロゴやアイコンのように透明背景が必要で色が単純なものはPNG、テキストが含まれる画像もPNGの方が鮮明さをよく保ちます。最も効率の良いAVIFはChrome 94+、Firefox 93+、Safari 16+以上でのみ対応しているため、古い環境が含まれる場合はWebPを使ってください。

圧縮する際の注意点

JPEGとWebPは保存するたびに画質が劣化します。すでに圧縮されたファイルを再度開いて保存すると、さらに画質が低下します。原画ファイルは常に別途保管し、圧縮版を配布用として使う習慣が重要です。PNGは可逆圧縮フォーマットなので、繰り返し保存してもピクセルは変わりません。