画像圧縮ツール — JPEG・PNG・WebP を無料でオンライン圧縮

画像圧縮とは？

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

主な機能

JPEG vs PNG vs WebP

圧縮の例

photo-landscape.jpg（2.1 MB、4000×3000）

photo-landscape.jpg（品質 75 で 680 KB）

logo-transparent.png（450 KB、1200×800）

logo-transparent.webp（品質 80 で 85 KB）

hero-banner.webp（800 KB、1920×1080）

hero-banner.webp（品質 75 で 250 KB）

オンラインで画像を圧縮する方法

1. 1

   画像をアップロード

   アップロードエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択してください。JPEG、PNG、WebP 画像を一度に最大 20 枚、各ファイル最大 10MB まで選択できます。

2. 2

   品質を調整

   品質スライダーで圧縮レベル（0〜100）を設定します。デフォルト値は 75 で、品質とファイルサイズのバランスが取れた設定です。ファイルサイズと圧縮率の変化をリアルタイムで確認できます。

3. 3

   結果をダウンロード

   個別のファイルの「ダウンロード」をクリックするか、「すべてダウンロード」ですべての圧縮画像を保存できます。ダウンロード前に「比較」ボタンで画質を視覚的に確認できます。

活用シーン

Webサイトのパフォーマンス最適化

Web サイトにアップロードする前に画像ファイルサイズを縮小します。画像が小さいほど読み込みが速くなり、Core Web Vitals スコア（特に Largest Contentful Paint）が向上し、帯域幅コストが削減され、SEO ランキングも改善されます。

メール添付ファイルのサイズ削減

メールに添付する前に画像を圧縮して、添付ファイルのサイズ制限（通常 10〜25MB）に収めます。20 枚の写真を 50MB から 10MB 未満に圧縮できることも珍しくありません。

SNS アップロードの事前準備

SNS プラットフォームにアップロードする前に画像を事前圧縮します。プラットフォーム側でも自動的に再圧縮されますが、最適化済みのファイルから始めることで、最終的な品質をより細かくコントロールできます。

アプリ・ゲームのアセット最適化

モバイルアプリ、ゲーム、プログレッシブ Web アプリの UI アセット、テクスチャ、スプライトを圧縮します。アセットが小さいほど、ダウンロードが速くなり、ストレージ使用量が減り、ユーザー体験がスムーズになります。

ドキュメント・プレゼンテーションの最適化

PDF、Word ドキュメント、プレゼンテーションに埋め込まれた画像のサイズを削減します。高解像度写真を含む 50MB のスライドデッキも、目立った品質低下なしに 10MB まで縮小できることが多いです。

技術的な詳細

Canvas API による圧縮

本ツールは HTML5 Canvas API の toBlob() メソッドを使用して圧縮を行います。画像は非表示の canvas 要素に描画された後、指定された品質パラメータで再エンコードされます。JPEG と WebP の場合、品質パラメータ（0.0〜1.0）が非可逆圧縮のレベルを制御します。PNG の場合、Canvas API は品質パラメータを完全に無視し、Canvas 経由の PNG エンコーディングは常に可逆圧縮となります。

PNG から WebP への変換

Canvas toBlob() は PNG 画像に対して品質パラメータを無視する（出力は常に可逆圧縮）ため、品質スライダーが 100 未満に設定されている場合、本ツールは PNG ファイルを WebP 形式に変換します。WebP は非可逆圧縮（品質制御可能）と透過の両方をサポートしており、PNG の理想的な非可逆代替フォーマットです。品質が 100 に設定されている場合、PNG ファイルは元のフォーマットのまま保持されます。

品質パラメータの動作

品質スライダーは Canvas toBlob() の quality パラメータに対応します。100 = 1.0（最高品質、最大ファイルサイズ）、0 = 0.0（最低品質、最小ファイルサイズ）。JPEG の場合、品質 75（0.75）が一般的にスイートスポットで、50 未満ではアーティファクトが目立ち始めます。WebP の場合、同じ品質値で JPEG よりわずかに小さいファイルが生成され、視覚品質は同等です。

ブラウザのメモリと制限

各画像はメモリ上に元の File オブジェクトと圧縮後の Blob の両方が存在し、さらにプレビュー表示用の 2 つのオブジェクト URL が作成されます。20 枚の各 10MB の画像では、ピーク時のメモリ使用量は約 400MB に達する可能性があります。画像をクリアするかページを閉じると、メモリリークを防ぐためにオブジェクト URL が解放されます。

ベストプラクティス

JPEG/WebP は品質 75 から始める

品質 75 はほとんどのユースケースで推奨される出発点です。通常、視覚的な品質低下をほとんど伴わずにファイルサイズを 60〜80% 削減できます。品質を 85 以上に上げるのは、細部の保持が重要な場面（医療画像、印刷用写真など）に限定しましょう。

可能な限り WebP を使用する

WebP は同等の視覚品質で JPEG より 25〜35% 小さいファイルを生成し、PNG と同様に透過もサポートします。2024 年時点ですべてのモダンブラウザが WebP に対応しています。Web 上で最良の圧縮対品質比を得るには、JPEG や PNG を WebP に変換しましょう。

元ファイルを保存しておく

元の未圧縮画像を常にソースファイルとして保存しておきましょう。非可逆圧縮は不可逆です。すでに圧縮された画像を再圧縮すると、サイズの大幅な削減なしに品質がさらに劣化します（これを「世代劣化」と呼びます）。

ダウンロード前に品質を確認する

ダウンロードする前に「比較」ボタンを使って圧縮アーティファクトを視覚的に確認しましょう。テキスト、シャープなエッジ、微妙なグラデーションのある領域に特に注意してください。これらは JPEG アーティファクトが最も目立つ箇所です。

類似した画像をまとめて処理する

同じ種類の被写体、解像度、色深度など特性が似た画像は、同一の品質設定で最も良い結果が得られます。写真とグラフィック・ロゴを別々にバッチ処理することで、最適な圧縮結果を得られます。

よくある質問