ウェブ用に画像を圧縮する方法（画質を落とさずに）

画像はたいていウェブページで最も重いものです。スマホのカメラから出したばかりの未最適化の写真 1 枚が数メガバイトになることもあり — サイトのテキスト・コード・スタイルを合わせたよりも大きいのです。画像圧縮は、ほとんどの人がページ速度のためにできる最も効果の大きい変更で、うまくやれば訪問者には見えません。このガイドは画像圧縮の仕組みと、目に見える画質低下なしにファイルを小さくする方法を扱います。

なぜ画像サイズが重要なのか

余分な 1 キロバイトごとに、訪問者のブラウザがページを表示する前にダウンロードしなければならないデータです。速いデスクトップ回線では気づかないかもしれませんが、モバイル回線では読み込み時間を直接増やし、ユーザーをいらだたせ、検索順位を損ないます — Google は読み込み速度などのページ体験シグナルを順位要素に使います。小さな画像は、速いページ、低い帯域コスト、満足した訪問者を意味します。

非可逆 vs. 可逆圧縮

画像ファイルを小さくする根本的に異なる 2 つの方法があります。

可逆圧縮

可逆方式は何も捨てずにデータをより効率的に詰めます — 解凍すれば元とピクセル単位で同一のコピーが戻ります。安全ですが節約はほどほどで、通常 10〜50% です。PNG は可逆圧縮を使い、だからロゴ・スクリーンショット・鋭いエッジと平坦な色のグラフィックに向いています。

非可逆圧縮

非可逆方式は、人の目が気づきにくい情報 — 微妙な色の変化、混み合った領域の細部 — を捨てて、はるかに大きな節約、しばしば 70〜90% を達成します。JPEG と WebP は非可逆圧縮を使います。その引き換えは 画質（quality） 設定で調整します: 画質が低いほどファイルは小さいがアーティファクトが目立ちます。写真には、ほどよい画質水準の非可逆圧縮がほぼ常に正しい選択です。

正しいフォーマットを選ぶ

選ぶフォーマットは圧縮レベルと同じくらい重要です:

• JPEG — 写真の主力。どこでも広くサポート。圧縮は良好だが透過はなし。
• PNG — 鋭い線・テキスト・透過のあるグラフィック（ロゴ、アイコン、スクリーンショット）に最適。可逆なので写真は大きくなる。
• WebP — 同じ見た目の画質で通常 JPEG より 25〜35% 小さいファイルを作り、PNG のように透過に対応する現代フォーマット。現行のすべてのブラウザが対応。今日のたいていのウェブ画像には WebP が最良の既定です。
• SVG — 圧縮された写真フォーマットではまったくありませんが、単純なロゴやアイコンならベクター SVG はどんなサイズでも鋭く保たれ、しばしばわずか数キロバイトです。

画質はどこまで譲れる?

非可逆フォーマットでは、画質はふつう 0〜100 の尺度で表されます。直感に反して、その上端は無駄です: 画質 100 と画質 80 の違いはしばしば見分けられないのに、画質 80 はファイルサイズが半分になり得ます。実用的な出発点:

• 画質 75〜85 — たいていのウェブ写真の最適域。大きな節約、通常の閲覧では目に見える損失なし。
• 画質 60〜75 — 絶対的な鮮明さが重要でない大きな背景画像やサムネイルに十分。
• 60 未満 — 節約は頭打ちになり、アーティファクト（ブロック状の空、エッジのハロー）が目立つように。たいてい割に合いません。

最良のやり方は当てずっぽうでなく比較です。ある画質で圧縮し、実際に表示されるサイズで結果を見て、違いがちょうど見え始めるまで画質を下げ — それから 1 段階戻します。

圧縮する前にリサイズする

画像が必要よりはるかに大きければ、圧縮にできることには限りがあります。幅 800 ピクセルのカラムに表示される幅 4000 ピクセルの写真は、誰も見ることのないピクセルを 5 倍抱えています。画像を表示されるおよその寸法にリサイズしてから — 圧縮するのが、しばしばすべての中で最大の単一の節約です。当サイトの 画像リサイザー は切り抜き・回転・リサイズを一度に、すべてブラウザ内で処理します。

シンプルなワークフロー

1. 画像を表示される最大サイズにリサイズする。
2. 可能なら WebP、最大の互換性には JPEG、透過のあるグラフィックには PNG を選ぶ。
3. 画質 ~80 で圧縮し、表示サイズで結果を見る。
4. 違いに気づくまで画質を下げ、1 段階戻す。

最後の 3 ステップは当サイトの 画像圧縮ツール で数秒でできます: 1 枚でも複数でも入れれば、あなたの端末で即座に圧縮されます — サーバーへ何もアップロードしないので、プライベートな写真も安全です。前後のサイズを比べ、結果に満足したらダウンロードしましょう。