画像圧縮ツール
ブラウザで完結する安全な画像軽量化
画像をここにドロップ
またはクリックしてファイルを選択
JPG, PNG, WebPに対応 / サーバーには送信されません
画像圧縮ツールの使い方
選択した画像をブラウザの Canvas に描き直し、JPEG・PNG・WebP のいずれかの形式と画質（Quality）を指定して再エンコードすることでファイルサイズを小さくするツールです。縦横のピクセル数は元画像のまま維持され、リサイズは行いません。画像の読み込みからエンコード、ダウンロードまでの処理はすべてお使いの端末のブラウザ内で完結し、元画像や圧縮後の画像がサーバーへ送信されることはありません。
画像の選択
圧縮したい画像を枠内にドラッグ&ドロップするか、枠内をクリックしてファイル選択ダイアログから1枚選びます。複数ファイルをドロップした場合は最初の1枚だけを読み込みます。ブラウザが画像として認識できないファイル（MIMEタイプが image/ で始まらないもの）は受け付けません。
形式と画質の設定
出力形式を JPEG・PNG・WebP から選び、画質（Quality）を 10〜100% の10%刻みで調整します。設定を変えると約0.5秒後に自動で再圧縮され、プレビューと圧縮後サイズが更新されます。
サイズを確認してダウンロード
「元のサイズ」「圧縮後」と削減率を確認し、「ダウンロード」ボタンで保存します。ファイル名は compressed_image に選んだ形式の拡張子（.jpg / .png / .webp）を付けたものになります。
JPEG・PNG・WebP の特性と、このツールでの扱いの違い
出力形式を選ぶときの判断材料として、3形式の圧縮方式・透過の可否・画質スライダーの効き方と、このツール固有の処理をまとめました。
| 項目 | JPEG | PNG | WebP |
|---|---|---|---|
| 圧縮方式 | 非可逆 | 可逆 | 非可逆（Canvas 出力時） |
| 透過（アルファ） | 非対応 | 対応 | 対応 |
| 画質スライダー | 効く | 効かない（無視される） | 効く |
| 透明部分の処理 | 白（#FFFFFF）で塗りつぶし | そのまま保持 | そのまま保持 |
| 向いている画像 | 写真・グラデーション | ロゴ・図版・スクリーンショット | 写真から透過画像まで幅広い |
| 保存時の拡張子 | .jpg | .png | .webp |
画質（quality）引数の扱いは HTML Standard の canvas.toBlob() で定義されており、 0.0〜1.0 の数値を「非可逆形式のみ」で使用する旨が記されています。また、ブラウザが要求された形式に対応していない場合は PNG で出力すると定められているため、 WebP 非対応環境で WebP を選ぶと中身は PNG のまま .webp の名前で保存されます。 各形式の仕様は MDN の画像ファイル形式ガイド にまとまっています。
このツールの処理の流れと、画質の値・失われる情報の関係
「圧縮」と呼んでいますが、実際に行っているのは Canvas への描画と再エンコードです。手順を追うと、何が保持され何が失われるかが分かります。
2. Image で読み込み（この時点でデコード・向き補正）
3. Canvas を元画像と同じ幅・高さに設定
4. JPEG のときだけ白で全面を塗りつぶし
5. drawImage() でピクセルを転写
6. canvas.toBlob(callback, 形式, 画質) で再エンコード
7. Blob のサイズを表示し、ダウンロード用リンクを生成
手順3で幅・高さを元画像と同じにしているため、ピクセル数は変わりません。手順5でピクセルだけが転写されるので、EXIF・ICC プロファイル・XMP などのメタデータはこの段階で失われ、出力ファイルには含まれません。 手順2の向き補正は、EXIF の Orientation を画像のデコード時に反映するブラウザの挙動に依存します。
画質スライダーの値は手順6の第3引数にそのまま渡されます。一般的な傾向として、JPEG では画質を 100% から 80% に下げるとファイルサイズが大きく減る一方で見た目の差は小さく、 50% を下回ると輪郭やグラデーション部分にブロック状のノイズが目立ち始めます。ただし実際のサイズと見た目は画像の内容（ノイズの多さ、平坦な領域の広さ、色数）とブラウザのエンコーダー実装によって変わるため、 同じ画質でも結果は一定ではありません。このツールでは設定変更のたびに実際のサイズを表示するので、数値を見ながら段階的に下げるのが確実です。
サイズ表示は 1 KB = 1024 バイトで換算し小数2桁まで表示します。削減率は「(元のサイズ − 圧縮後) ÷ 元のサイズ × 100」を四捨五入した整数で、圧縮後の方が大きければ負の値になり、圧縮後サイズが赤字に変わります。 なお、同じ画像を JPEG や WebP で繰り返し再圧縮すると、そのたびに非可逆の劣化が積み重なります。元画像は残しておき、公開用の1回だけ圧縮する運用をおすすめします。
実際の使用例
写真を JPEG 80% に再圧縮
元ファイルが 2,048,000 バイト、圧縮後が 512,000 バイトになった場合の表示例です。サイズは 1024 を単位に換算し小数2桁で表示、削減率は (元 − 圧縮後) ÷ 元 を四捨五入して求めます。
INPUT
形式: JPEG / 画質: 80% 元のサイズ: 2,048,000 bytes 圧縮後: 512,000 bytes
OUTPUT
元のサイズ: 1.95 MB 圧縮後: 500 KB（緑字） 75% 削減 ダウンロード名: compressed_image.jpg
透過PNGのロゴを WebP に変換
透明部分を保持したまま WebP に変換した例です。PNG・WebP では白の塗りつぶしを行いません。ファイルサイズの結果は画像の内容によって異なります。
INPUT
形式: WebP / 画質: 80% 元画像: 透過PNG（アルファあり）
OUTPUT
透明部分: そのまま保持 ピクセル数: 元画像と同じ メタデータ: 含まれない ダウンロード名: compressed_image.webp
圧縮後の方が大きくなったケース
JPEG 写真を PNG に変換すると可逆化のためサイズが増えることがあります。元 3,145,728 バイト、変換後 4,718,592 バイトの場合、削減率は負の値になり圧縮後サイズは赤字で表示されます。
INPUT
形式: PNG / 画質: 80%（PNG では無効） 元のサイズ: 3,145,728 bytes 圧縮後: 4,718,592 bytes
OUTPUT
元のサイズ: 3 MB 圧縮後: 4.5 MB（赤字） -50% 削減 ダウンロード名: compressed_image.png
よくある質問
画像はサーバーにアップロードされますか？
いいえ。ファイルの読み込みは URL.createObjectURL によるブラウザ内参照で行い、圧縮は HTML Canvas の toBlob() メソッドで端末内で実行されます。このページから外部サーバーへ画像データを送信する処理は含まれていません。ページを閉じれば読み込んだ画像はブラウザのメモリから解放されます。
PNG を選ぶと画質スライダーが効かないのはなぜですか？
PNG は可逆圧縮の形式で、HTML 仕様上 toBlob() の quality 引数は JPEG や WebP のような非可逆形式にだけ意味を持ちます。そのため PNG を選択中は画質を下げてもファイルサイズはほとんど変わりません。写真を小さくしたい場合は JPEG か WebP を選び、透過を残したまま小さくしたい場合は WebP を選んでください。
圧縮したのにサイズが元より大きくなったのですが？
元画像がすでに強く圧縮されていた場合や、写真を PNG に変換した場合によく起こります。Canvas は元ファイルの圧縮情報を引き継がず、ピクセルデータから新たにエンコードし直すため、元より効率の悪い形式・設定を選ぶとサイズが増えます。圧縮後のサイズが赤字で表示されたら、形式を JPEG または WebP にするか画質を下げて再確認してください。
透過PNGを JPEG にすると背景はどうなりますか？
JPEG は透過（アルファチャンネル）を扱えないため、このツールは JPEG 出力時に Canvas 全体を白（#FFFFFF）で塗りつぶしてから画像を描画します。したがって透明だった部分は白になります。透過を保ちたい場合は PNG か WebP を選択してください。PNG・WebP では塗りつぶしを行わず、透明部分をそのまま保持します。
撮影日時や位置情報などのメタデータ（EXIF）は残りますか？
残りません。Canvas に描画した時点で画像はピクセルデータだけになり、toBlob() が生成するファイルには EXIF・ICC プロファイル・XMP などのメタデータは含まれません。カメラの機種名や GPS 位置情報を取り除いて共有したい用途には都合がよい一方、色管理用の ICC プロファイルも失われるため、厳密な色再現が必要な素材には向きません。
スマートフォンで撮った写真の向きが変わることはありますか？
写真の向きが EXIF の Orientation タグで表現されている場合、最近の主要ブラウザは画像を読み込む段階でその向きを反映してから Canvas に描画するため、見た目の向きは保たれた状態でメタデータだけが除去されます。ただし、この挙動はブラウザの実装に依存しており、古いブラウザでは回転前の向きで出力されることがあります。ダウンロード後に向きを確認してください。
対応していない画像や大きすぎる画像を選ぶとどうなりますか？
HEIC など、お使いのブラウザがデコードできない形式は画像の読み込みが完了せず、処理が進みません。また、ブラウザごとに Canvas の最大サイズに上限があり、非常に大きなピクセル数の画像では toBlob() が結果を返せずに処理が止まることがあります。その場合は別の画像編集ソフトで先に縮小してから読み込んでください。アニメーション GIF は最初の1フレームだけが静止画として出力されます。
役立つTips
写真は JPEG か WebP、図版・ロゴは PNG
階調の多い写真は非可逆圧縮が効きやすく、JPEG や WebP で大きく縮みます。文字やベタ塗りが多いロゴ・スクリーンショットは、JPEG にするとブロック状のノイズが出やすいため、可逆の PNG か WebP の方が見た目を保ちやすくなります。
WebP は対応環境を確認してから
WebP は同程度の見た目で JPEG・PNG よりファイルが小さくなる傾向がありますが、エンコードはブラウザの対応に依存します。toBlob() が WebP に対応しないブラウザでは、HTML 仕様に従い PNG 形式のデータが返され、.webp の拡張子で保存される点に注意してください。
画質は 70〜80% から試す
一般的な傾向として、JPEG は画質 80% 前後まではファイルサイズの減少に対して見た目の劣化が小さく、それより下げると輪郭周りのノイズが目立ち始めます。まず 80% で確認し、用途に応じて 1段階ずつ下げるのが手戻りの少ない手順です。
リサイズは行われない
このツールは縦横のピクセル数を変えずに再エンコードだけを行います。4000px 幅の写真を 800px で表示する用途なら、圧縮より先にピクセル数を減らす方が効果が大きいため、必要に応じてリサイズ機能のあるツールと併用してください。