ハウツー
見た目の画質を落とさずに画像を圧縮する
ほとんどの画像は、ブラウザやメールが必要とする以上に重い状態でカメラやデザインツールから出力されます。圧縮とは画像を劣化させることではありません。適切な品質設定と形式を選べば、出力は元画像と見た目では区別できず、読み込みは2倍から5倍速くなります。重要なのは、まず正しい形式を選び、その次に品質を調整することです。
手順
- 品質スライダーに触れる前に、まず出力形式を選びます。写真には JPEG または WebP を、透過背景やピクセル単位の可逆精度が必要な場合のみ PNG を選びましょう。WebP は同じ見た目の品質で JPEG より25～35パーセント軽く、現代のあらゆるブラウザが対応しています。画像が表示される場所を自分で管理できるなら、WebP を優先してください。
- 画像を圧縮ツールにドロップし、品質スライダーを調整します。写真なら80パーセントから始め、変換前後のプレビューを並べて見比べましょう。ファイルがまだ大きい場合は70まで下げます。通常の画面サイズでは違いはほとんど分かりません。文字がくっきりしたグラフィックや単色のベタ塗りには PNG 可逆を選ぶか、元データがベクター画像なら SVG を試してください。
- 結果をダウンロードし、公開前に100パーセントのズームで確認します。サイトへのアップロード時に画像が再圧縮される場合（SNS では通常そうなります）は、二重圧縮に耐えられるよう少し高めの品質で書き出しましょう。この圧縮ツールは完全にブラウザ内で動作し、ファイルが端末から外に出ることはありません。
なぜ品質の数値より形式選びが重要なのか
品質80の JPEG と品質80の WebP は画面上では似て見えますが、WebP ファイルの方が明らかに小さくなります。AVIF はさらに進んでいますが、エンコードに時間がかかります。PNG は写真に誤用されがちで、設計上可逆であるため同じ写真でも JPEG の数倍の大きさになります。圧縮前のリサイズも効果的です。横4000ピクセルの写真をブログのカラム見出し用に1200ピクセルへ縮小すれば、どんな品質設定よりもリサイズの方がはるかに大きく軽くなります。
アップロードせずにローカルで圧縮する理由
サーバー側の画像サービスは、元データ（多くはスマホの未加工写真）をアップロードさせ、圧縮後のコピーをダウンロードさせます。ここの圧縮ツールは同じアルゴリズムをブラウザ内で実行します。アップロードもアカウントも順番待ちもなく、元のファイルは端末に残ります。複数の画像をまとめて処理でき、結果はすぐに利用したり共有したりできます。
このガイドで使うツール
よくある質問
圧縮をやりすぎたかどうか、どう判断すればよいですか？
出力を100パーセントにズームし、髪、布地、木の葉といった質感のある部分を見てください。非可逆圧縮は、まずこうした領域でブロック状のムラやにじんだディテールとして現れます。100パーセントのズームで気づくなら、スマホで見る訪問者にも見えます。品質設定を5～10ポイント上げてもう一度試しましょう。
リサイズは圧縮の前にすべきですか、後にすべきですか？
先にリサイズしてください。横4000ピクセルの画像を1200ピクセルに縮小すると、品質に関係なくピクセルの4分の3が失われ、これが常に最も大きな削減になります。画像リサイズツールで必要な正確なピクセル寸法を設定してから、形式と品質のために圧縮しましょう。巨大な画像を圧縮してから後でリサイズするのは、両側で手間を無駄にするだけです。