画像圧縮ツール

画像圧縮とは何ですか？

画像を圧縮する方法

1. 1
   写真をドロップ

   JPG、PNG、またはWebPをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。最大50MBのファイルがサポートされています。

2. 2
   出力形式を選択

   最新のウェブで最適なサイズ対品質比を得るにはWebPを使用します。広範な互換性のためにJPGを使用するか、可逆圧縮または透明性が必要な場合はPNGを使用します。

3. 3
   品質スライダーをドラッグ

   品質80は写真にとって良いデフォルトです。低い値はファイルをより小さくしますがブロッキングを引き起こします；高い値はソースに近い見た目になりますが、保存されるスペースは少なくなります。

4. 4
   オプションで長辺を制限

   1920pxまたは2400pxにリサイズすることは、画面で表示される写真にとって最大の利点です。アスペクト比は自動的に保持されます。

5. 5
   比較してダウンロード

   前後のペインはファイルサイズと保存されたパーセンテージでライブ更新されます。トレードオフに満足したら「圧縮ファイルをダウンロード」をクリックしてください。

ブラウザの画像圧縮の仕組み

1. ファイルをワーカー向けのキャンバス上のImageBitmapにデコードします。
2. 必要に応じて、ビットマップを最大の長辺制約に合わせてリサイズします。
3. ターゲットの寸法でOffscreenCanvasにビットマップを描画します。
4. canvas.toBlob(format, quality)を呼び出して、選択した設定で再エンコードします。
5. blob.sizeを元のサイズと比較し、節約比率を表示します。
6. blobをブラウザにダウンロード可能なオブジェクトURLとして渡します。

参考: MDN — HTMLCanvasElement.toBlob()

期待すること

画像圧縮ツールを使用するタイミング

• ヒーロー画像や製品写真をスリム化して、ページの読み込みを速くし、Core Web Vitalsを改善します。
• Photoshopを開かずに、メール、チケットトラッカー、またはチャットツールのアップロードサイズ制限を超えます。
• 遅いまたはメーター制限のある接続で写真を送信する際のデータ使用量を削減します。
• 電話の写真のフォルダーを軽量なWebPに変換して、アーカイブまたは共有します。
• 最大ファイルサイズを強制するデザインシステムやCMS用のアセットを準備します。
• ドキュメントに貼り付ける前に、スクリーンショットから不要な解像度を削除します。
• サイズ制限が厳しく、品質が許容範囲内でなければならない広告クリエイティブ用に画像を圧縮します。

関連ツール

よくある質問