ブラウザでの画像圧縮のしくみ
すべての圧縮処理は完全に JavaScript で実行されます。コーデックライブラリのダウンロードも、サーバーへの通信も不要です。ブラウザ組み込みの Canvas API が画像をデコードし、低品質で再エンコードして、ページがプレビュー・ダウンロード・ZIP 化できる Blob を返します。すべての処理がタブのサンドボックス内に留まるため、元のファイルはネットワークに一切触れません。
- アップロードされた各ファイルを Blob として読み込み、オブジェクト URL を生成して、ブラウザがサーバーにバイトをコピーせずにローカルでデコードできるようにします。
- デコードした画像を元のピクセル寸法のままオフスクリーン Canvas 要素に描画し、再エンコードの準備をします。
- ピクセルを再エンコードするために
canvas.toBlob(callback, mimeType, quality)を呼び出します。品質モードではスライダーの値がエンコーダーの量子化設定に直接対応し、目標サイズモードではページが品質値を二分探索して出力 Blob がバイト予算に収まるまで繰り返します。 - 元のサイズ・圧縮後のサイズ・削減率を示すビフォー/アフターの読み取り値を表示し、画像ごとのダウンロードまたはバッチ全体を一括 ZIP でダウンロードできます。ZIP は fflate（初回使用時に読み込まれる 8 KB のライブラリ）を使ってメモリ上で構築されます。
なぜ画像を圧縮するのか
- 画像が小さいほどページの読み込みが速くなります。4 MB のヒーロー画像を 600 KB に削減すると Largest Contentful Paint が直接改善され、これは Google がランキングに使用する Core Web Vitals のひとつです。複数の写真があるページでは節約効果が重なり、さらに速い初回描画につながります。
- アップロードや添付ファイルのサイズ制限はどこにでもあります。多くの CMS プラットフォーム・チケットツール・メールシステムが 1 MB や 2 MB を超えるファイルを拒否します。素早く圧縮するだけで、フル機能のエディターを開かずに上限以内に収めることができます。
- 帯域幅とストレージはスケールするとコストがかかります。フルサイズ PNG の代わりに品質 0.8 の WebP を配信すると画像ペイロードが 3 分の 1 以上削減でき、CDN の転送料金を下げ、訪問者のモバイルデータ使用量を減らします。
- 機密性の高い画像ではプライバシーが重要です。すべてがブラウザ内で完結するため、本人確認書類のスキャン・医療画像・社内スクリーンショットはデバイス上に留まり、TinyPNG のようなサードパーティサーバーへのアップロードを心配する必要はありません。
主な活用シーン
画像が送り先よりも大きいとき、圧縮が必要になります。繰り返し見られる 3 つのパターンをご紹介します。
- オンラインストア向けの商品写真を準備する。JPEG 原本を品質 0.8（または 200 KB 目標）に圧縮して、ストアフロントのスピードを保ちモバイルで Core Web Vitals をクリアします。
- バグトラッカーや Wiki に添付する前にスクリーンショットを縮小する。PNG 画像を一括して品質 0.85 の JPEG に変換すると、数十 MB から数 MB まで圧縮できます。
- 写真をアップロード上限以内に収める — 1 MB 超のファイルを拒否する就職応募ポータル、添付ファイル容量が厳しいメールシステム、バイト予算に合わせる必要があるフォームのアバターなど。
実践例: 4 MB JPEG → 400 KB
スマートフォンのカメラで撮影した 4 MB の JPEG は、アップロード制限を超えてページを重くする典型的なファイルです。圧縮効果を測る適切な基準になります。
JPEG をアップロードゾーンにドロップし、フォーマットは JPEG のままにして、品質スライダーを 0.7 まで下げるか、目標サイズモードに切り替えて 400 KB と入力します。品質モードでは Canvas パイプラインが 1 回再エンコードして結果を表示します。写真の内容によりますが、通常 500 〜 700 KB になります。目標サイズモードでは、ページがいくつかの品質値を試して 400 KB 以下に収まる最高品質を選び、削減率を表示します。カードの ダウンロード をクリックして 1 枚のファイルを取得するか、複数の画像を圧縮した場合は .zip をダウンロード をクリックしてください。このサイズの画像なら全工程が 1 秒以内に完了し、ページ本体の読み込み完了後は帯域幅を一切消費しません。
品質モードと目標サイズモードの違いは何ですか？
品質モードは 0.1 〜 1.0 のスライダーを提供し、JPEG または WebP エンコーダーの量子化設定に対応します。数値が低いほどファイルが小さく、アーティファクトが目立ちます。目標サイズモードはこれを逆にします。キロバイト単位のサイズを指定すると、ページが品質値を二分探索して予算以内に収まる最高品質を見つけるまで数回エンコードします。ハードな上限がある場合（たとえば 1 MB のアップロード制限）は目標サイズモードが便利で、予測可能な視覚的結果が欲しいだけなら品質モードのほうが速く適しています。PNG はロスレスなので、どちらのモードも適用されません。
処理はデバイス上で行われますか？
はい、完全にデバイス上で行われます。ページはブラウザのネイティブ Canvas API と Web File API を使用して、各画像をメモリ内でデコードおよび再エンコードします。画像データはサーバーに送信されず、一時的なアップロードも、クラウドへの往復通信もありません。自分で確認するには、DevTools を開いてネットワークパネルに切り替え、圧縮を実行してみてください。表示される送信リクエストは初期ページ読み込みと広告呼び出しのみで、画像に関するものは何もタブの外に出ません。
PNG を圧縮してもほとんど縮まないのはなぜですか？
PNG はロスレスフォーマットなので、Canvas API は細部を捨てて小さくすることができません。同じピクセルを再パッキングするだけです。写真の場合、PNG はもともと大きく、ロスレスの再エンコードではほとんど節約できません。本当の効果は出力フォーマットを JPEG または WebP に切り替えることで得られます。これらは写真に適した非可逆圧縮を使用し、通常 4 〜 10 倍小さくなります。PNG はロスレス品質や透明度が必要なときだけ使用してください。それ以外は JPEG（写真向け）または WebP（サイズと品質の最良バランス）を選びましょう。
どのフォーマットを選べばよいですか？
写真には、品質 0.8 の WebP がサイズと品質の最良バランスを提供し、2021 年以降に出荷されたすべてのブラウザでサポートされています。送り先が古いまたは制限が厳しい場合は、JPEG が安全な汎用フォールバックです。PNG はロスレス品質や Alpha チャンネルが必要なときのみ選んでください — ラインアート・UI スクリーンショット・透明度を持つロゴなどです。ページスピードを最適化していて受け手が現代的なブラウザを使っているなら、WebP がほぼ常に正解です。古い CMS や WebP を拒否する印刷パイプラインに送る場合は JPEG にしてください。
画像をドロップし、品質レベルまたは目標サイズを選んで圧縮してください。すべてがタブ内で完結します。アップロード不要、アカウント不要、サーバーの待機なし。