見た目の劣化なしで画像を圧縮する方法

画像の過大サイズはほとんどのウェブページで最も重い部分であり、最も修正しやすいものです。朗報：「圧縮した」からといって「ぼやける」わけではありません。次の 5 つのテクニックを、この順番で適用してください。

1. まずリサイズ —— これがすべてに勝る

最大の利益はタダで手に入ります。カメラやスマホの写真は 3000〜5000 ピクセル幅なのに、ブログ本文のカラムは 700〜900 ピクセルでしか表示されません。4000 ピクセルの画像を 800 ピクセルの枠に配信するのは、誰にも見えないディテールに容量の 8〜9 割を浪費しているのと同じです。

画像は実際の最大表示サイズの 2 倍（高解像度スクリーン対応）に合わせます。1440 ピクセルのビューポートを埋めるヒーロー画像でも最大 ~2880 ピクセル、本文画像なら 1200〜1600 で十分。それ以上は死に重です。

2. 正しい形式を選ぶ

形式の選択だけで、同じ見た目のまま容量が半分になることがあります：

写真 → JPEG、さらに良ければ WebP（同品質で JPEG より通常 25〜35% 小さい）
スクリーンショット・グラフィック・文字 → PNG または WebP 可逆
透過が必要 → PNG または WebP（JPEG は絶対に使わない）
最大節約 → AVIF、フォールバックは WebP

写真を PNG から JPEG/WebP に変えるだけで 70〜90% 減ることも珍しくありません。PNG はそもそも写真向けに設計されていないからです。

3. 品質のスイートスポットを使う

非可逆圧縮の品質設定には収穫逓減の法則が働きます：95 から 75 への低下でファイルは半分になり得るのに、通常は見分けがつきません。実用ガイド：

70〜80 —— ウェブ写真のスイートスポット
80〜90 —— ディテールが重要なポートフォリオや商品写真
60〜70 —— サムネイルとプレビュー
60 未満 —— 偽影が見え始める。公開コンテンツでは避ける

迷ったら数段階で圧縮して 100% 表示で比較してください。判定するのは数字ではなくあなたの目です。

4. 要らないものを剥がす

画像ファイルには手荷物が詰まっています：EXIF 撮影データ、GPS 座標、カラープロファイル、埋め込みサムネイル。ウェブ用途ではこのメタデータはほぼ純粋な無駄ですし、公開写真の GPS タグは位置情報の漏えいになり得ます。

圧縮パイプラインを通した再エンコード（Canvas ベースのツールは自然にそうなります）は、ほとんどのメタデータを自動で落とします。数パーセントの節約に加え、プライバシーのおまけ付きです。

5. バッチ処理して検算する

圧縮はファイルごとの判断ですが、200 枚のためにスライダーを調整し続けたい人はいません。良いワークフローはこうです：

バッチ全体をツールにドロップ
妥当なプロファイルを 1 つ設定（例：WebP、品質 78、最大幅 1600）
前後のサイズ表を確認 —— ほとんど縮まなかったファイルはすでに最適化済み
重要な画像だけフル解像度でスポットチェック

「可逆」で実際に得られるもの

可逆圧縮（PNG、WebP 可逆）は全ピクセルを保持する代わりに、写真では 10〜20% しか縮みません。適切な品質の非可逆圧縮なら 60〜80% 縮んで見た目は無差別です。写真にとって可逆はほぼ常に間違った取引で、偽影が一目で分かるグラフィックのために取っておくべきものです。

アップロードせずに圧縮する

画像がプライベートなもの、クライアントの仕事、守秘義務のある素材なら、見知らぬ圧縮サイトへのアップロードは現実のリスクです。当サイトの画像圧縮ツールは Canvas と WebAssembly でブラウザ内エンコードを行い、ファイルは端末を離れません。ダウンロードの前に、ファイルごとの削減結果を確認できます。