画像圧縮は、Web パフォーマンスのために実施できる最も費用対効果の高い最適化の一つです。適切に圧縮された画像は、元の画像と見た目は変わらないまま50~80%速く読み込まれます。正しいやり方を説明します。
「画質の劣化」が実際に意味すること
「画質を落とさずに圧縮する」と言うとき、多くの人は目に見える画質の劣化がないことを指しています。数学的に可逆な圧縮のことではありません。人間の視覚システムは完璧ではありません。明るさより色の変化に鈍感で、平坦な領域より複雑な領域のディテールに鈍感で、テクスチャのある領域よりなめらかなグラデーションのアーティファクトに敏感です。
賢い圧縮アルゴリズムは、こうした特性を利用します。品質80で適切に圧縮されたJPEGは、通常の視聴距離では品質100と実質的に見分けがつきません。違いが分かるのは、200%以上に拡大して並べて比較したときだけです。
フォーマット別の適切な圧縮設定
JPEG / JPG
JPEGの品質は通常1100の数値で表されます。**Web用画像には品質8085が標準的な推奨値です**:
- 品質100: ほぼ可逆に近く、ファイルサイズが非常に大きい
- 品質85: 100より約30%小さく、見た目の違いはほぼない
- 品質80: 約45%小さく、ほとんどの写真で十分な品質を維持
- 品質70: 約60%小さく、なめらかなグラデーションでわずかなアーティファクトが出ることがある
- 品質60: 約70%小さく、サムネイルや重要でない画像には許容範囲
用途別の目安:
- ヒーロー画像: 品質80~85
- ブログ記事のサムネイル: 品質70~75
- 商品写真(ECサイト): 品質80~85
- SNS投稿用の画像: 品質75~80
PNG
PNGは可逆圧縮を使っているため、「品質」設定を調整してもファイルサイズを減らすことはできません。ただし、以下のことは可能です:
- 色深度を減らす: PNGが16色や32色しか使っていない場合(ロゴ、アイコンなど)、8ビット(256色)パレットPNGとして保存すると、ファイルサイズが大幅に小さくなります。
- より優れた圧縮アルゴリズムを使う: PNGQuantのようなツールは非可逆パレット削減を適用し、見た目の変化をほぼ感じさせずにPNGのファイルサイズを60~80%削減できます。
- WebPに変換する: PNGとして保存されている写真は、WebPに変換するとPNG圧縮よりはるかに大きな効果が得られます。
WebP
WebPの圧縮品質はJPEGと似た仕組みですが、同じ品質レベルでもより小さいファイルサイズを実現します。非可逆WebPの品質75~80は、見た目上JPEGの品質85に相当しますが、ファイルサイズは約25~35%小さくなります。
ステップバイステップ: 目に見える画質劣化なしで圧縮する方法
写真の場合(JPG/JPEG)
- 品質80から始め、100%ズームで元画像と比較する
- 特に確認するポイント: なめらかなグラデーション(空、肌の色)、シャープなエッジ、テキストのオーバーレイ
- アーティファクトが見えなければ、75を試す
- 違いが見えなくなる最も低い品質で止める
グラフィックとロゴの場合(PNG)
- まず、画像をインデックスパレット(色数を制限したもの)にできるか確認する
- PNGとして保存された写真であれば、代わりにWebPに変換する
- ロゴにはPNGQuantベースの圧縮を使う。多くの場合60%以上の削減が可能
あらゆる画像に共通: 圧縮する前にリサイズする
最も見落とされがちな最適化: 圧縮する前に、画像のサイズが適切かどうかを確認することです。
Webサイトで画像を幅800pxで表示するなら、800pxでアップロードしましょう。4000pxではいけません。表示サイズの4倍でアップロードすると、帯域を無駄にし、圧縮も難しくなります。
- まず最大表示サイズにリサイズする(画像リサイズツール)
- その後、目標のファイルサイズまで圧縮する
一括圧縮
商品写真、ブログ画像、ギャラリー写真など、圧縮したい画像が何十枚、何百枚とある場合は、画像圧縮ツールを使いましょう。複数の画像を一度にアップロードして、同じ品質設定を全ての画像に適用できます。
最大圧縮のための適切なフォーマット選び
| フォーマット | 最適な用途 | PNGと比較した一般的な圧縮率 |
|---|---|---|
| JPG (品質80) | 写真 | 85~90%小さい |
| WebP (品質75) | 写真とグラフィック | 90~95%小さい |
| PNG (8ビット) | 色数の少ないロゴ | 40~60%小さい |
| WebP(可逆) | ロゴ、スクリーンショット | PNGより20~35%小さい |
| AVIF (品質60) | 写真 | 92~97%小さい |
結果を確認する
圧縮後、ブラウザや画像ビューアで画像を100%にズームし、以下を確認してください:
- なめらかな領域(空、肌、グラデーション): 縞模様やブロックノイズがないか確認する
- シャープなエッジ(テキスト、線): リンギングやぼやけがないか確認する
- 複雑な領域(葉、布地): アーティファクトが目立ちにくい部分なので、通常は問題ない
- 単色のベタ塗り: 強い圧縮では量子化ノイズが出ることがある
アーティファクトが見えた場合は、品質設定を5~10上げて再度試してください。
Web用の目標ファイルサイズ
2026年のWeb画像に適した実用的な目標値は以下の通りです:
| 画像の種類 | 目標サイズ |
|---|---|
| ヒーロー / バナー画像 | 200 KB未満 |
| ブログ記事のヘッダー | 100 KB未満 |
| 商品サムネイル | 50 KB未満 |
| ロゴ | 20 KB未満(PNG)、またはSVGを使用 |
| SNS投稿用画像 | 300 KB未満 |
PicsSizerの画像圧縮ツールを使えば、これらの目標サイズに合わせて品質設定を細かく調整しながら画像を圧縮できます。アカウント登録は不要で、サーバーへのアップロードもありません。
よくある質問
- 画像圧縮の品質設定はどれくらいが適切ですか?
- 写真の場合、JPEG品質75〜85が最適な範囲です。品質100と比べてファイルサイズが40〜60%小さくなる一方、通常の閲覧距離では画質の違いはほぼ分かりません。Web用のサムネイルなら品質60〜70でも問題ないことが多いです。設定を決める前に、必ず出力結果を目で確認してください。
- 非可逆圧縮と可逆圧縮の違いは何ですか?
- 非可逆圧縮(JPGやWebPで使用)は、ファイルサイズを小さくするために画像データの一部を完全に削除します。削除されるデータは、見た目への影響が最小限になるよう賢く選ばれます。可逆圧縮(PNGやWebPの可逆モードで使用)は、データを一切削除せずに圧縮するため、解凍した画像はピクセル単位で元と同じになります。
- 見た目を損なわずに画像をどこまで圧縮できますか?
- これは画像の内容によって大きく変わります。柔らかいグラデーションの写真なら、品質70まで圧縮してもアーティファクトが目立ちません。一方、鮮明な文字や単色部分を含む画像は、品質80でもアーティファクトが出ることがあります。必ず目で確認し、100%表示に拡大してアーティファクトをチェックしてください。
- 画像をリサイズするとファイルサイズは小さくなりますか?
- はい、大きく影響します。画像の寸法を半分にする(例:幅2000pxから1000pxへ)と、ファイルサイズは通常4分の1以下になります。Webサイトで幅800pxの画像しか必要ないなら、4000pxでアップロードする理由はありません。
- 無料で使えるオンライン画像圧縮ツールで一番良いのはどれですか?
- PicsSizerの画像圧縮ツールなら、JPG、PNG、WebPなどの画像をブラウザ内で直接、品質設定を調整しながら圧縮できます。無料で、画像はローカルで処理されるため(サーバーへのアップロード不要)、複数画像の一括圧縮にも対応しています。