画像の圧縮 — 形式を変えるだけで大きく減ります
画像をブラウザの中だけで圧縮します。アップロードはしません。保存形式と長辺のサイズを選べて、目標の容量に収めることもできます。写真のPNGはWebPに変えるだけで大幅に小さくなります。
容量を減らす方法は三つあります。画質を落とす、寸法を小さくする、形式を変える。効き目が大きい順に並べると、多くの場合は形式の変更が一番です。
実際に測った例があります。1,200×800の写真をPNGで保存すると1,974,819バイトでした。同じ画像をWebPの品質80で保存すると253,218バイト、87%小さくなります。見た目の差はほとんど分かりません。
PNGをPNGのまま保存しても減りません
ブラウザの中で画像を作り直すときに使うcanvasには、PNGの圧縮率を調整する仕組みがありません。だからPNGをPNGとして保存し直すと、先ほどの写真は1,974,819バイトのまま、1バイトも減らずに戻ってきます。品質のつまみもPNGには効きません。
そこで保存形式の初期値を「自動」にして、PNGの写真はWebPで書き出すようにしています。PNGのまま残したい場合は選べますが、その結果が元より小さくならなければ元のファイルをそのまま返し、画面にもそう表示します。圧縮したつもりでファイルが大きくなる、ということが起きません。
PNGを保ったほうがよいのは、写真ではなくロゴ、スクリーンショットの文字、透過が必要な画像です。色数が少なく輪郭がはっきりした絵はPNGがもともと得意なので、形式を変えても差は小さくなります。
形式の選び方
| 形式 | 向いているもの | 注意 |
|---|---|---|
| WebP | 写真全般。透過にも対応 | 現行のブラウザはすべて対応。古い端末では表示できないことがある |
| JPG | 写真。互換性を最優先するとき | 透過を持てないため、透明部分は白で塗られる |
| PNG | ロゴ、図、文字、透過 | 写真では容量が大きくなりやすい |
目標の容量に合わせる
応募フォームやメールの添付で「2MB以内」と決まっていることがあります。目標の容量を入れると、まず品質を二分探索で下げて収めようとします。それでも入らないときに限って寸法を縮めます。画質より先に解像度を捨てることはしません。
長辺のサイズを決めることもできます。ブログや商品ページに載せる写真は1,920pxもあれば十分で、スマートフォンで撮った4,000px級の写真をそのまま載せるのは無駄です。長辺を選ぶと縦横比はそのまま保たれます。
書き出したファイルの名前は実際の形式に合わせて変わります。WebPで保存すれば拡張子も .webp になるので、中身と名前が食い違うことはありません。
使うときのこつ
- •品質は75〜85あたりが目安です。これより下げると、平らな空や肌のグラデーションに縞が出はじめます。
- •一度に20枚までまとめて処理できます。圧縮後の容量と削減率が一覧に出るので、設定を変えてやり直せます。
- •画像に含まれる撮影情報（Exif）は作り直しの過程で失われます。撮影日時や位置情報を残したい場合は元のファイルも保管してください。逆に、SNSに上げる前に位置情報を落とす用途にも使えます。
- •処理はすべて端末の中で行われます。画像がどこかに送られることはありません。
よくある質問
どのくらい小さくなりますか？
写真なら50〜80%が目安です。PNGの写真をWebPに変える場合はさらに大きく、実測で1.88MBが247.9KB（87%減）になりました。
透過は残りますか？
WebPとPNGでは残ります。JPGには透過がないため、透明な部分は白で塗りつぶされます。
圧縮したら元に戻せますか？
戻せません。失われた情報は復元できないので、元のファイルは残しておいてください。
画質が落ちないか心配です。
圧縮後の容量と削減率を確認してから保存できます。結果が元より小さくならない場合は元のファイルをそのまま返します。
画像はアップロードされますか？
されません。すべてブラウザの中だけで処理されます。