Image Compressor

JPEG、WebP、PNG画像をブラウザで直接圧縮できます。品質を調整し、出力形式を選択し、必要に応じてリサイズして、ダウンロード可能です。デバイスからファイルは一切送信されません。

動作方法: 画像を選択またはドラッグして、出力形式と品質を選択し、圧縮ファイルをダウンロードします。Canvas APIを使用してブラウザ内で処理されるため、画像はどこにもアップロードされません。

80%
画像をここにドロップするか、クリックして選択

なぜ画像を圧縮するべきなのか

画像はほとんどのWebページで最大のアセットであり、総ページ容量の60～80%を占めることが多くあります。最適化されていない画像はページの読み込みを遅くし、Core Web Vitals スコアを低下させ、モバイルユーザーに実際の通信量を消費させてしまいます。画像を圧縮することは、人間の目がほぼ知覚できないデータを破棄することでファイルサイズを削減します。200 KBの写真でも品質80で圧縮すれば、40～60 KBまで削減でき、目に見える劣化はほぼありません。ページサイズが小さいほどGoogleでのランキングが上がり、低速接続での読み込みが高速化し、訪問者のエンゲージメント向上につながります。

JPEG vs WebP vs PNG — どのフォーマットを選ぶべきか

JPEGは写真やグラデーション豊かな画像の定番選択肢です。非可逆圧縮を使用するため、データは永久に削除されますが、品質70以上の設定であればほとんどの写真で優れた結果が得られます。WebPはGoogleが開発した最新フォーマットで、同じ知覚品質でJPEGより25～35%優れたパフォーマンスを実現します。非可逆と可逆の両圧縮モードをサポートするため、Web配信に最適です。PNGは可逆圧縮を使用し、すべてのピクセルを完璧に保持します。スクリーンショット、アイコン、ロゴ、大きな単色領域や透明度を含む画像に最適です。原則として、Webに対してはWebPを優先し、互換性にはJPEGを、可逆品質が必須な場合のみPNGを使用してください。

ブラウザベース圧縮の仕組み

このツールはHTML5 Canvas APIを使用して、ブラウザ内で画像を完全に圧縮します。サーバーは一切関与しません。処理は3段階で実行されます。まず、画像をデコードし、ターゲット寸法の非表示キャンバス要素に描画します。次に、canvas.toBlob() がピクセルデータを選択した形式と品質レベルで再エンコードします。最後に、生成されたBlobがダウンロード可能なファイルとして提供されます。すべてがローカルで実行されるため、アップロード待機のレイテンシはゼロ、プライバシーリスクはなく、サーバーによるファイルサイズ制限もありません。オプションのリサイズステップでは、エンコード前に画像を比例的にスケーリングします。これにより、ソース画像が表示サイズより大幅に大きい場合、劇的なサイズ削減が実現できます。

開発者向け圧縮のコツ

  • JPEG/WebPの品質は80から始めましょう。ほとんどの写真でファイルサイズと視覚的忠実度のバランスが最適です
  • 最新ブラウザを対象にする場合、JPEGの代わりにWebPを使用すれば、品質低下なしで25～35%のファイルサイズ削減が実現できます
  • PNG ファイルは可逆圧縮です。このツールでPNGをWebPまたはJPEGに変換して大幅な削減を実現しましょう
  • 最大幅をレイアウトの最大ブレークポイント（通常1280pxまたは1920px）に設定して、サイズの大きすぎる画像の配信を避けます
  • 品質60未満はほぼ価値がありません。アーティファクトが明らかになり、ユーザーの信頼が低下します
  • ヒーロー画像は100 KB以下、サムネイルは10～30 KBを目標にしましょう
  • 圧縮画像は常にCDNから適切なCache-Control ヘッダー付きで配信し、最高のパフォーマンスを実現してください