見た目の画質を落とさず画像ファイルを小さくする方法
大きすぎる画像の大半には単純な理由があります。ピクセル寸法が、どの表示場所よりも3倍大きいことです。まず直すと、画質スライダーに触れる前に、通常80〜90%小さくなります。3つの調整手段には明確な優先順位があり、順序を違えると、見た目がぼやけているのに大きすぎる画像になります。
3つの調整手段を順番に
- 寸法。 画像に含まれるピクセル数です。幅と高さを両方半分にすると、ピクセルの4分の3がなくなり、ファイルサイズもおおむねそれに従います。
- 形式。 ピクセルのエンコード方法です。写真をPNGに、ロゴをJPGに保存するなど、ここを間違えると必要な数倍のバイトを使うことがあります。
- 画質設定。 非可逆エンコーダーが捨てる細部の量です。有用ですが、3つの調整手段の中では最も効果が小さく、画像の見た目を実際に損ねる可能性がある唯一のものです。
効果が掛け合わされるので順序が重要です。4000×3000の写真をPNGで保存すると12MBになるかもしれません。1200×900へのリサイズで約10分の1になり、JPGへの変更でさらに大きく減ります。その後で初めて品質を95から82へ下げます。その時点では、リサイズで解決すべき問題をごまかすのではなく、少量の残りを削っています。
逆の順番で行うと、最悪の結果になります。サイズ目標のために画質40まで落とした画像に、必要な4倍のピクセルが残り、劣化が目立つうえ、本来より大きいファイルになります。圧縮後に画像の見た目が悪い場合、通常は最初の手順を飛ばしたことが原因です。
調整1：圧縮する前にリサイズ
カメラの生成サイズではなく、実際の表示場所から目標寸法を選んでください。
| 使用 | 適切な幅 | 注意事項 |
|---|---|---|
| 画面幅いっぱいのヒーロー画像 | 1920–2560 px | 大きなサイズが正当化される唯一の場面 |
| 記事本文の画像 | 1200–1600 px | 一般的な列幅で2x表示に対応 |
| サムネイル／カード | 400–800 px | 大きなファイルを縮小表示せず、別のファイルを配信する |
| アバター | 200–400 px | 正方形で、通常はいずれにしても切り抜かれる |
| Open Graphカード | 1200×630 px | このとおりに指定。クローラーが期待する形式です |
| メールの添付ファイル | 1600–2000 px | 閲覧や小さな印刷に十分 |
覚えておくべき倍率は2つです。高密度画面で鮮明に表示するにはCSS幅の約2倍のピクセルが必要です。幅600pxで表示する画像なら、ファイルでは約1200pxにします。2xを超えると効果は急減し、3xは2xとほぼ見分けがつかないのに、バイト数は2倍を超えます。
調整2：内容に形式を合わせる
判断の要点です。詳しくは当サイトの次の記事で説明しています 形式比較ガイド:
- 写真 → 非可逆WebP、互換性が重要ならJPG。写真をPNGで保存するのは最も一般的で高コストな形式の誤りで、必要容量の5〜10倍になることがよくあります。
- フラットな画像、ロゴ、スクリーンショット、ピクセルアート → PNG、理想はパレットPNG。平坦な絵をJPGにすると各縁に明確なリンギングが出ます および PNGより大きいファイルになります。この場合、非可逆WebPもパレットPNGより大きいことがよくあります。
- 透明度が必要なもの → PNG、写真の内容なら非可逆WebP。JPGにアルファはなく、透明部分は単色で埋まります。
実例では、606KBのPNGソーシャルカードを画質82のJPGで再出力すると81KBになり、選択欄1つの変更で87%減りました。フラットな画像向けの形式に入れた写真だったためです。別方向では、柔らかいグラデーションのページ背景をPNGからWebPに変えると約57%減りました。鋭い端のない滑らかな内容は、まさに非可逆圧縮が得意なものです。
調整3：画質設定と、その効果の限界
JPGと非可逆WebPでは、画質は0〜100の数値で、エンコーダーがどの程度強く量子化するかを調整します。その数値とファイルサイズの関係は強い非線形で、曲線の形を知ると適切な設定位置が分かります。
| 画質 | 一般的な結果 | 使用する場面 |
|---|---|---|
| 100 | 非常に大きいが、90と比べて見た目の改善なし | 基本的にない |
| 90–95 | 大きいが、見た目はオリジナルと区別できない | 保管用、印刷用、再編集する画像 |
| 75–85 | 最適な範囲。通常の閲覧では圧縮の乱れが見えない | ウェブ上のほぼすべて |
| 60–70 | よく見ると劣化が見え、追加のサイズ削減は控えめ | サムネイル、厳しい容量上限 |
| 50未満 | 明らかなブロック状の劣化とぼやけた細部 | バイト上限で選択の余地がない場合 |
100から90へ下げると、目に見える損失なしにファイルが半分になることがよくあります。90から80でもさらに大きく減り、写真では引き続き違いが見えません。80から70では削減量がはっきり減る一方、劣化が見え始めます。60未満では、さらに下げるたびに、少ない削減のために目に見える品質を失います。これが収穫逓減の曲線であり、次の理由です 品質80 が一般的な初期値なのは、効果が変化する折れ曲がり点にあるからです。
画質とサイズの変化の転換点は、内容によって変わります。複雑で細かい写真は劣化が目立ちにくく、70でも耐えられます。空、スタジオ背景、グラデーションのように、大きく滑らかな領域がある画像は、帯状の色むらが早く現れ、85が必要です。文字や鋭い輪郭を含むものには、そもそも非可逆形式を使うべきではありません。
PNGにパレット量子化が必要な場合
PNGに画質スライダーはありませんが、多くの人が使わない色数削減という手段があります。トゥルーカラーPNGは1ピクセル4バイト、パレットPNGは最大256色の表への1バイトのインデックスです。本当に少ない色の画像なら数倍小さくなり、すべての色が表に収まれば数学的に同一です。
適した例：
- 少数の色を使うロゴ、アイコン、フラットなイラスト。
- 通常、最初から限定パレットで制作するピクセルアート。
- 大半が平坦な領域と文字で構成されるUIスクリーンショット。
- 図表。
不向きな例は、写真、滑らかなグラデーション、多様な背景に接する柔らかいアンチエイリアスの端です。量子化で帯状の色むらが出て、優れた量子化ツールはディザで隠しますが、ノイズが増えて圧縮しにくくなり、削減の一部を打ち消します。
ここではアルファに注意が必要です。パレットPNGはパレットの各項目に透明度を設定できるため、部分的に透明なアンチエイリアスの端は、混ざり具合ごとにパレット枠を使います。柔らかい影のあるアイコンでは、256項目の多くを影の階調に使ってしまうことがあります。公開する前に、対照的な背景の上で結果を確認してください。
メタデータを除去
カメラやスマートフォンの画像は、露出設定、レンズのモデル、日時、サムネイル、そしてGPS座標を含むことも多いEXIFブロックを持ちます。デザインツールも独自のデータを追加します。通常は数十キロバイトですが、埋め込みのカラープロファイルやプレビューのサムネイルがあると、はるかに大きくなることもあります。
2MBの写真では小さな差ですが、40KBのサムネイルでは15KBのEXIFは3分の1以上です。サイズ以外の理由もあります。公開写真のGPS座標は撮影場所を全員に伝え、苦い経験で気づきがちなプライバシーの問題になります。
意図的に残す価値があるのは2つです。sRGBでない画像のカラープロファイルは、削除すると色が変わります。著作権フィールドを利用している場合はそれも残してください。なお、キャンバスにはピクセルしかないので、キャンバス経由で再エンコードするブラウザーツールは副作用としてメタデータを自動で除去します。
よくある目標への手順
25MBのメール添付上限内
通常はスマートフォン写真の一括処理です。長辺2000pxにリサイズし、JPG品質85で書き出します。一般的な1200万画素の写真は約500KBになるので、40枚が収まります。さらに必要なら品質を下げる前に1600pxにしてください。受信者はポスター印刷ではなく画面で見ます。
100KBのフォーム・アップロード上限内
プロフィール写真、文書のアップロード、求職の応募などでよくある条件です。大きい設定から順に調整してください。最大表示サイズ、通常800px以下へリサイズし、画質80のJPGで書き出して確認します。まだ超えていれば70へ下げ、その後さらに寸法を小さくします。画質60未満は避けましょう。同じファイルサイズなら、画質75の600px画像は、画質45の1200px画像よりはるかにきれいに見えます。
ウェブページの画像
本文の画像は1枚200KB未満、ヒーロー画像は500KB未満を目標にしてください。複数のサイズは次を使って配信します srcset スマートフォンがデスクトップ版をダウンロードしないようにします。画面下部は遅延読み込みにし、ページが実際に要求するものを確認してください。よくあるのは、CMSがCSS幅600pxで4000px原本を配信する失敗です。その場合、問題は画像ファイルではなくテンプレート設定です。
ゲームのテクスチャ容量
ここではダウンロードサイズではなくGPUメモリが重要なので、別のルールが適用されます。GPUメモリは寸法とテクスチャ形式で決まり、ディスク上のPNGの圧縮サイズでは決まりません。高度に最適化したPNGも肥大化したPNGも、GPUへ転送すれば同じVRAMを使います。原画像は可逆で保持し、処理が求める場合はテクスチャを2の累乗のサイズにし、GPU圧縮はエンジンの取り込み設定に任せてください。PNG自体の最適化が変えるのはインストールサイズだけです。
よくある質問
「目に見える品質低下なし」とは実際に何ですか？
ピクセル単位の同一ではありません。それでは非可逆形式をすべて除外します。通常の条件で、表示サイズの画像を、版を交互に切り替えずに見て、違いが分からないという意味です。写真の画質80では差分ツールで変わったピクセルを見つけられても、見ただけでは気づきません。
リサイズと圧縮は1段階ですべきですか、2段階に分けるべきですか？
対応するなら1段階がよく、中間エンコードを避けられます。2段階なら、中間を可逆にしてください。リサイズしてPNGを保存し、JPGやWebPへ圧縮します。JPGのリサイズとJPGでの再保存は劣化を重ねます。
可逆PNG最適化ツールは本当に役立ちますか？
ある程度は可能です。より適切なパラメーターで圧縮をやり直すツールは、通常、ピクセルをビット単位で同一に保ちながら5〜20パーセント削減します。効果は実際にありますが、リサイズや形式変更と比べると小さいため、主な方針ではなく最後の仕上げとして使ってください。
ブラウザー内の圧縮は、デスクトップツールと同程度ですか？
リサイズやJPG・WebPへの再エンコードでは、ブラウザーは同じ基盤のコーデックを使い、結果も同程度です。専用ツールが優れるのは、高度なPNG量子化や、より多くの調整項目を持つ特化したエンコーダーです。ブラウザーには、画像が端末の外に出ないという実質的な利点があります。内容がアップロードする権利のないものである場合は、重要です。