画像圧縮
画像Canvas の品質制御で画像をリサイズ・再エンコードし、圧縮前後のサイズを比較します。
- 元のサイズ
- —
- 圧縮後
- —
- 削減
- —
このページの内容
画像圧縮ツールとは？#
本ツールは、画像をブラウザの Canvas パイプラインで低い品質・別の形式・より小さなピクセルサイズのいずれか（あるいはその組み合わせ）で再エンコードし、ファイルサイズを縮小します。出力はダウンロード可能な新しいファイルで、前後のサイズ比較も表示されるためトレードオフが一目で分かります。日常的な「添付するには大きすぎる」という問題を、アップロードなしでローカルに解決します。
3 つの調整ツマミがあり、これらは組み合わせて使えます。
- 形式 — JPEG（非可逆・不透明）、WebP（非可逆・モダン、同等の画質で JPEG より約 25〜35% 小さい）、PNG（可逆。リサイズでのみ縮小し、品質低下では縮小しない）。
- 品質 — 5〜100 のスライダーで、エンコーダーの品質設定に対応します。JPEG と WebP にのみ適用され、PNG では設計上品質を落とせないためスライダーは非表示になります。
- 最大幅 / 最大高 — エンコード前に画像を（アスペクト比を保ったまま、拡大はせずに）縮小するオプションの上限。写真の場合、リサイズが最も効果的なサイズ削減手段です。
処理は <canvas> 上で createImageBitmap と canvas.toBlob によって行われるため、画像のデコード・変換・再エンコードはすべてメモリ上で完結し、元のファイルは一切変更されません。
使い方#
- 画像を点線の領域にドロップします。
- コントロール行で以下を選びます。
- 形式 — PNG/WebP のソースはその形式が既定値、それ以外は JPEG が既定値になります。
- 最大幅 / 最大高 — 空欄で「自動」（リサイズなし）。ピクセル上限を入力すると、画像は歪みなくその箱に収まるよう縮小されます。
- 品質 — スライダー（5〜100）をドラッグします。現在値が横に表示されます。PNG では無視されます。
- 圧縮 をクリックします。統計バーに 元のサイズ、圧縮後、削減（バイト数と割合）が表示され、結果が逆に大きくなった場合はその旨の通知も出ます。
- 圧縮ファイルを ダウンロード します。プレビューに結果が表示されるので、画質を確認できます。
主な機能#
- 形式を意識した既定値。 PNG は PNG のまま維持され（透過とシャープなエッジが保持される）、写真は JPEG が既定値になります。アルファチャンネルが知らず知らずのうちに破壊されることはありません。
- アスペクト比を保持したリサイズ。 最大幅と最大高はバウンディングボックスを定義します。画像は比率を保ったままその中に収まり、拡大されることはありません。
- 正直なサイズ報告。 再エンコードでファイルが大きくなった場合（PNG→PNG や、すでに極小の JPEG でよく起きます）、節約できたかのように見せかけるのではなく、その事実を通知します。
- WebP 出力。 モダンブラウザでは、同じ視覚品質で JPEG よりさらに 25〜35% 小さくなります。Web 用アセットに便利です。
- ローカルパイプライン。 Canvas API がエンコードを行い、データはアップロードされません。
実例#
4032×3024・4.5 MiB のスマートフォン写真はメールには大きすぎます。ドロップして、形式 を WebP、最大幅 を 1920（高さは自動的に 1440 に縮小）、品質 を 80 に設定し、圧縮 をクリックします。統計バーの結果は次の通りです。
| 指標 | 値 |
|---|---|
| 元のサイズ | 4.5 MiB（4032×3024） |
| 圧縮後 | 0.41 MiB（1920×1440） |
| 削減 | 91% |
リサイズが大部分を担い（ピクセル数が約 4 分の 1 に）、品質 80 の WebP が残りを処理しました。結果は 0.5 メガバイト未満で、画面上では視覚的な差はほとんど分かりません。
対照的に、同じソースを PNG でリサイズなし・品質 100 に設定すると、圧縮後のファイルは逆に 大きく なるのが通常です。PNG は可逆形式であり、JPEG や WebP のように写真のノイズを切り捨てることができないためです。本ツールは偽の節約を主張せず、「大きくなった」通知でその旨を伝えます。
よくある質問#
品質スライダーがグレーアウトしています。なぜですか？#
PNG は可逆形式であり、品質を調整するツマミを持ちません。PNG を選ぶとスライダーは効果がないため非表示になります。品質を制御したい場合は JPEG か WebP に切り替えてください。
「圧縮」したファイルが元より大きくなりました。なぜですか？#
よくある原因は 2 つあります。すでに圧縮済みの JPEG を PNG として再エンコードした（PNG は写真において JPEG の非可逆圧縮に太刀打ちできません）、あるいはソースが極小で高圧縮の画像で、PNG の再エンコードがオーバーヘッドを加えてしまった。非可逆形式（JPEG か WebP）を選ぶか、リサイズを有効にしてください。
大きな最大幅を入力すると拡大されますか？#
いいえ。最大幅と最大高は 上限 としてのみ働きます。ソースがすでに小さければ、元のサイズのまま出力されます。拡大してもファイルが膨らむだけで品質のメリットはありません。
WebP はどこでも安全に使えますか？#
モダンブラウザ（Chrome、Edge、Firefox、Safari 14 以降）はすべて WebP をサポートしています。非常に古いブラウザや特定の画像処理パイプラインをサポートする必要がある場合は、JPEG にフォールバックしてください。