画像圧縮ツール

使い方

JPG、PNG、WEBP、AVIF、BMPを1枚または複数枚キャンバスにドラッグするか、Add imagesを押します。プレビューが出たら下の設定でTarget sizeをオンにして数値を入力します。単位はKBとMBから選べます。

Compressを押すとファイルごとに目標以下になるまで保存し直し、結果欄に最終サイズと解像度が出ます。下の一覧から必要なファイルだけDownloadするか、複数枚のときはALL ZIPでまとめて保存します。

• 目標サイズをオフにすると、従来どおり品質スライダーで調整します。
• Resizeも併用すると、指定した幅と高さを基準に目標へ合わせます。
• 目標サイズをオンにすると品質はツールが計算するため、スライダーは無効になります。

目標サイズモードは何をしますか

品質を一度だけ適用するのではなく、品質95%から始めて結果サイズを測り、目標より大きければさらに下げる工程を最大8回繰り返します。毎回範囲を半分に狭めるので、目標を超えない範囲で最も高い品質を見つけます。

たとえば1.8MBの写真に200KBを指定すると、品質40%前後で190KB台の結果になることが多いです。結果一覧には目標 200 KBや品質 41% · サイズ 100%のように実際に使った値が併記されるので、画質が気に入らなければ目標を上げて再実行できます。

目標に届かない場合

品質を最低まで下げても目標を超えるファイルがあります。元画像がとても大きいか、目標が低すぎる場合です。このときツールは中断せず、幅と高さを段階的に縮小しながら同じ探索をやり直します。

• 縮小段階は85%、72%、60%、50%、40%、32%、25%、20%、15%の順です。
• 目標を満たす最大の段階で止まるため、必要以上に小さくなりません。
• 最後まで届かない場合はその行に目標未達バッジが付き、作れた中で最小の結果をそのまま保存できます。

目標未達が出たら数値が現実的でない合図です。目標を一段上げるか、出力形式をJPGに変えるほうが画質の損失は少なくなります。

よく使う目標サイズ

どの数値にすべきか迷うときは、以下を目安にすればおおむね合います。プリセットボタンからも入力できます。

• 50KB — 掲示板のプロフィール画像、小さなサムネイル、一覧用アイコン。
• 100KB — ブログ本文の挿入画像、メール署名。
• 200KB — 商品詳細画像、課題や書類の添付。最も使われる値です。
• 500KB — 画質を保ちたいメイン画像、バナー。
• 1MB — 印刷用ではないが拡大して見る写真。

提出先が正確な数値を指定しているなら、その値をそのまま使ってください。ツールは目標を超えない範囲で最大限に近づけるので、200KB制限なら199KBに合わせる形になります。

形式の選び方

写真はJPGまたはWEBP出力が無難です。AVIFとBMPもアップロードできますが、保存形式はJPG、PNG、WEBPから選びます。ロゴ、アイコン、スクリーンショットのように透明背景や輪郭の鮮明さが必要ならPNGかWEBPを先に確認してください。

• JPGは透明背景を白で合成し、目標サイズに最も合わせやすい形式です。
• WEBPは同じ容量ならJPGより画質が良い傾向があり、Web掲載に向きます。
• PNGはブラウザが品質値を反映しないため、目標達成が解像度の縮小だけに依存します。

複数枚を同じ目標で

ファイルを複数入れても、目標は1つ決めるだけで足りります。元のサイズが違っても、ファイルごとに個別に探索して各自が目標以下まで下がります。

3MBの写真と400KBの写真を一緒に入れて目標を200KBにすると、前者は品質を大きく下げ、後者はほぼ元の品質のまま通ります。両方に同じ品質を強制しないので、小さいファイルが不要に劣化しません。

終わったら結果欄のALL ZIPでまとめて保存するか、下の一覧から必要なファイルだけ個別に保存します。

圧縮前に確認すること

すでにWeb用に最適化されたファイルは、保存し直すとかえって大きくなることがあります。元が小さいアイコンや、すでに強く圧縮された写真の場合は、結果の数値を見てから保存するか判断してください。

解像度が必要以上に大きい場合は、品質を下げすぎるよりResizeで表示サイズに先に合わせてください。4000pxの写真を1200pxにすれば、はるかに高い品質で目標サイズを達成できます。

よくある失敗

• PNGのまま目標だけ下げる — ブラウザのPNG保存は品質値を無視します。透明が不要ならJPGかWEBPに変えてください。
• 単位を確認しない — 200と書いて単位がMBのままだと目標が200MBになり、何も変わりません。
• 目標を10KBのように極端にする — 目標未達バッジが出て、結果も判読しにくくなります。
• 圧縮済みファイルの再圧縮 — 結果が元より大きくなるなら、元のファイルを使うほうが良いです。
• 結果を見ずに保存する — 一覧の品質比率が20%を下回ると目に見えて劣化します。先にプレビューを確認してください。

ブラウザ処理の前提

このツールはFile APIで選んだ画像を読み込み、Canvas toBlobで保存し直します。目標サイズの探索も同じ方法でブラウザ内で何度も保存しながら進むため、ファイルがRoberinのサーバーへ送られることはありません。

そのぶん探索の回数だけエンコードが繰り返されるので、大きな画像は少し時間がかかります。20MBの上限と出力解像度の上限は、ブラウザのメモリを超えないための値です。

保存前チェックリスト

• 結果欄の最終サイズが目標以下か確認しました。
• 一覧に目標未達バッジが残ったファイルがないか見ました。
• 品質比率が低すぎないか、プレビューで文字と輪郭が読めるか確認しました。
• 透明背景が必要な画像をJPGで保存していないか確認しました。
• 複数枚ならALL ZIPと個別Downloadのどちらが必要か選びました。