勘ではなく、測って決める
JPGとWebPは複数の画質で書き出して、実際の容量を比べます。見た目が崩れない範囲でいちばん小さいものを残し、元の画像より小さくならなければ元の画像をそのまま返します。
JPG・PNG・WebPの容量を、見た目の画質を保ったまま小さくします
または画像をここにドロップ、または貼り付けCtrl V
画像ツール · ブラウザ内で処理
JPG・PNG・WebPを最大30枚までドロップすると、見た目の画質をできるだけ保ったまま容量を小さくして返します。処理はすべてブラウザの中。アップロードも会員登録も、順番待ちもありません。
応募フォームやメール、ホームページに載せる画像を、画質のつまみを勘で動かさずに軽くできます。
JPGとWebPは複数の画質で書き出して、実際の容量を比べます。見た目が崩れない範囲でいちばん小さいものを残し、元の画像より小さくならなければ元の画像をそのまま返します。
「100KB以下でアップロード」と言われたら「サイズ指定」を選ぶだけ。まず画質を下げ（ブロック状に崩れるほどは下げません）、それでも足りないときだけ縦横のサイズを小さくします。達成できたかは各カードに表示されます。
PNGは色数を最大256色に減らして軽くします。PNG専用の圧縮ツールと同じ方法で、形式はPNGのまま、透過部分も透過のまま残ります。
写真をまとめて最大30枚までドロップできます。このタブの中で1枚ずつ順番に処理し、終わったらZIPでまとめてダウンロードできます。
圧縮はブラウザのタブの中で行います。サーバーへのアップロードも保存もないので、画像圧縮サイトの安全性を心配する必要がなく、待ち時間もありません。
PNGで保存された写真は、JPGにするとずっと小さくなります。そういう画像のときは、結果画面でPNG→JPG変換を案内します。
| 入れる画像 | 起きること | 削減の目安 |
|---|---|---|
| スマホで撮ったJPG写真 | 見た目が崩れない範囲でいちばん低い画質で保存し直す | 50〜80% |
| すでに低画質で書き出されたJPG | これ以上小さくできないので、元の画像をそのまま返す | 0% |
| PNGのスクリーンショットや図 | 色数を減らしてPNGのまま保存 | 40〜70% |
| PNGで保存された写真 | 色数は減らすが、写真はJPGにしたほうがずっと小さい（PNG→JPG変換へ） | ここで20〜50%、JPGなら80%以上 |
| WebP | 見た目が崩れない範囲の画質でWebPのまま保存し直す | 30〜60% |
表の削減の目安は、私たちの言葉を信じてもらうだけのものではありません。ブラウザを作る人たちやWebを測定している人たちが、同じ形式について自分の言葉で書いていることを紹介します。
たいていのJPGは、画面では見分けられないほど高い画質で保存されています。スマホの写真が容量を半分にしても見た目が変わらないのはそのためです。Google自身のページ速度の診断もこの考え方にもとづいていて、各JPGを画質85で保存し直し、その差を測っています。
“If the potential savings are 4KiB or greater, Lighthouse flags the image as optimizable.”PNGで保存された写真は、JPGにするとずっと小さくなります。2つの形式は、もともと別の種類の画像のために作られているからです。結果画面でPNGの写真をPNG→JPG変換へ案内するのはそのためです。
“JPEG is lossy, so it is often a good fallback format for photographs, while PNG is lossless, making it better for screenshots, diagrams, and line art.”WebPは、同じ画像のJPGやPNGより最初から小さいので、そのぶん小さくできる余地が少なくなります。この形式を作ったGoogleが、その差を公開しています。
“WebP lossless images are 26% smaller than PNGs and lossy images are 25-34% smaller than comparable JPEGs at equivalent quality.”そもそも、なぜWebサイトでこれが大事なのか。ページを開いた人がダウンロードするデータの大部分は画像です。HTTP Archiveは毎年、数百万のサイトを測定しています。
“The median desktop page using images requests 1,054 KB, while mobile pages request 900 KB.”身近な6つの場面で決められている容量の上限と、その収め方を公式ページへのリンク付きでまとめました。
アメブロに載せられる画像は1枚あたり3MB以下です。スマホやカメラの写真をそのまま選ぶと「アップロードできる画像サイズを超えています」と表示され、記事に入れられないことがあります。
Vormlyでの解決方法
記事に使う写真をまとめて入れ、まず「画質優先（自動）」で軽くします。各カードに仕上がりのサイズが出るので、3MBを超えたものだけ「サイズ指定」の2MBでやり直せば済みます。
LINE公式アカウントの管理アプリでは、リッチメニューの背景画像は1MB以下、2500px × 1686pxか2500px × 843pxです。デザインツールから書き出したPNGは、1MBを超えがちです。
Vormlyでの解決方法
「サイズ指定」に900KBと入力し、「画像のサイズも小さくする」はオフに。画質だけで調整するのでピクセル数は変わらず、PNGは透過を残したままPNGで仕上がります。
ハローワークの求人者マイページでは、建物の外観や作業風景などの画像を10ファイルまで登録でき、サイズは1ファイルにつき2MBまでです。デジカメで撮った写真は、そのままでは収まらないことがあります。
Vormlyでの解決方法
10枚をまとめて入れ、「サイズ指定」の1MBを選べば上限に余裕をもって収まります。各カードで目標に届いたかを確かめ、ZIPで一括ダウンロードできます。
社会保険労務士試験のインターネット申込みでは、顔写真はJPG形式で、容量の目安は上限3MBです。スマートフォンで撮った写真は、そのままだと上限を超えることがあります。
Vormlyでの解決方法
「サイズ指定」の2MBを選び、「画像のサイズも小さくする」はオフにします。画質から調整するので寸法は元のまま。処理はブラウザの中だけで行われ、顔写真がどこかにアップロードされることはありません。
食べログのメイン写真は、500KBを超えると自動的に圧縮されてアップロードされます。形式はJPG・JPEGのみ。料理写真の仕上がりを自分で確かめたいなら、先に収めておくのが確実です。
Vormlyでの解決方法
「サイズ指定」に480KBと入力して圧縮し、カードで仕上がりのサイズを確認してから登録します。500KB以内に収めておけば、自動圧縮の対象にはなりません。
BASEの商品画像は1商品20枚まで、1枚あたり10MB以下で、10MBを超える画像は登録できません。高画素のカメラで撮った写真は、そのままだと上限を超えることがあります。
Vormlyでの解決方法
1商品分の写真をまとめて「画質優先（自動）」にかけます。30枚まで一度に処理でき、各カードに仕上がりのサイズが出ます。10MBを超えたままのものは「サイズ指定」で指定し直し、ZIPでまとめて保存できます。
圧縮すると画質はわずかに下がりますが、「画質優先（自動）」は複数の画質で試して、見た目で違いがわからない範囲でいちばん小さいファイルを選びます。元の画像より小さくならない場合は、元の画像をそのまま返します。
「サイズ指定」を選び、20KB・50KB・100KB・200KB・500KB・1MB・2MBから選ぶか、好きな容量を入力してください。まず画質を下げ、それでも収まらないときだけ縦横のサイズを小さくします。サイズを変えたくない場合はその設定をオフにでき、届かなかった場合は各カードに表示されます。
できます。アプリのインストールは不要で、iPhoneやAndroidのブラウザでこのページを開けばそのまま使えます。なお、スマホのブラウザは扱える画像の大きさに上限があり（iPhoneでは約1,670万ピクセル）、超える写真は収まるように縮小してカードに表示します。
Vormlyの画像圧縮では、画像はアップロードされません。読み込み・圧縮・保存のすべてをあなたのブラウザの中で行うので、サーバーに画像が残ることはなく、会員登録も不要です。
1回に30枚まで一括で圧縮でき、結果はZIPファイルでまとめてダウンロードできます。1枚あたりのファイルは100MBまで対応しています。
すでに低い画質で保存されたJPGは、これ以上小さくすると見た目が崩れるため、元の画像をそのまま返します。PNGは色数を減らす以外に小さくする方法が少なく、写真ならPNG→JPG変換のほうがずっと小さくなります。どうしても小さくしたい場合は「サイズ指定」を試してください。