支給されたロゴが白背景のJPGで、背景を抜き直したことはないでしょうか。 写真・テロップ・サムネ・ロゴの4素材を、JPG・PNG・WebPで書き出して測りました。 同じ写真でもPNGは20.6倍、文字ものはWebPで5割減。 判断の基準は、絵柄ではなく「渡す先」でした。
- 元データ … 写真 6000×4000px / 4,500KB のJPG（筆者撮影）、配信用テロップ 1920×1080px の透過PNG
- 同上 … 当サイトの記事サムネ 1200×545px、記事用に作ったサンプルロゴ 800×240px の透過PNG
- 計測方法 … PixForgeのツールと同じブラウザの
canvas.toBlob()で書き出し、バイト数を記録。写真だけ幅1600pxに縮小し、透過素材をJPGにするときは白地に合成しました - 比較用の別エンコーダ … Python の Pillow 12.3.0（libpng / libwebp を使用。WebPは method=6）
- 計測日 … 2026年8月15日（Chromium系ブラウザ）。図版のみPillowで書き出し
- !注意 … 素材4点の結果です。絵柄によって効き方は変わります
01形式は絵柄ではなく「渡す先」で決まる
結論写真はJPG、ロゴとイラストはPNG。動画に渡す素材は透過PNG。Webに載せると決まっているものだけWebPにする。
形式は、絵柄よりも先に誰にどう渡すかで決めています。
| 渡す先・用途 | 使う形式 | 理由 |
|---|---|---|
| 作業データ（原本） | PSD / AI | いちばん使う。修正が入るので、必ずここから書き出す |
| 写真（基本） | JPG | どこでも開ける。容量も軽い |
| ロゴ・イラスト | PNG | 透過が要る。線や文字がにじまない |
| 動画編集ソフトに渡す素材 | 透過PNG | 白背景のままでは映像に乗せられない |
| Webに載せる画像（自分で仕上げる） | WebP | いちばん軽い。LPを軽くするときに全部変換した |
迷うのは、渡す先がはっきりしないときだけです。
marudee
絵柄から考えると毎回迷います。渡す先から考えると、だいたい一発で決まります。
02写真は、形式を間違えると20倍重くなる
結論写真をPNGで持つとJPGの20.6倍。写真はJPGかWebPの二択で、迷う場面はない。
6000×4000pxの写真を幅1600pxに縮小し、形式だけを変えて書き出しました。
| 形式 | 容量 | JPG 0.80比 |
|---|---|---|
| WebP 品質0.80 | 100.4 KB | 0.66倍 |
| JPG 品質0.80 | 153.0 KB | 1.00倍 |
| JPG 品質0.92 | 274.6 KB | 1.79倍 |
| WebP 品質1.00 | 1,817.7 KB | 11.9倍 |
| PNG | 3,151.6 KB | 20.6倍 |
同じ写真でも、PNGにすると3.1MBです。 PNGは色を1画素ずつ正確に記録するため、階調の多い写真とは相性が悪くなります。 写真をPNGで納品するのは、20倍の荷物を送るのと同じです。
いちばん軽いのはWebPの100.4KB。JPGより34.4%小さくなります。 リサイズ・品質・形式のどれが容量に効くかは、 画像を軽くする一番かんたんな方法で測っています。
03文字とベタ塗りは、WebPの効きが写真の1.5倍
結論写真でのWebPは34%減。テロップ・サムネ・ロゴでは52〜54%減。文字ものほどWebPが効く。
| 素材 | JPG 0.80 | PNG | WebP 0.80 | WebPの削減率 |
|---|---|---|---|---|
| テロップ 1920×1080 | 39.3 KB | 73.0 KB | 18.0 KB | −54.2% |
| サムネ 1200×545 | 12.0 KB | 154.7 KB | 5.7 KB | −52.5% |
| ロゴ 800×240 | 14.0 KB | 15.0 KB | 6.7 KB | −52.1% |
| （参考）写真 1600×1067 | 153.0 KB | 3,151.6 KB | 100.4 KB | −34.4% |
削減率の列を見てください。写真では34.4%減ですが、文字ものはいずれも52%以上。 写真より1.5倍ほどよく効きます。テロップやサムネを何十枚も書き出す仕事なら、この差は大きいです。
ロゴはJPG 14.0KB、PNGは15.0KBでほとんど変わりません。 ロゴをJPGにしても軽くならず、透過だけ失うことになります。 見た目にも差が出ます。
JPGはなだらかな階調が得意な代わりに、色が急に変わる境界が苦手です。 テロップや文字入りのサムネをJPGで書き出すと、容量で損をして画質でも損をします。
04白背景のJPGで届いたロゴは、作り直すしかない
結論透過を持てるのはPNGとWebPだけ。JPGで受け取った時点で背景は戻らず、切り抜き直しになる。
白背景のJPGは、白い紙の上なら問題ありません。困るのは色地や映像に乗せるときです。
映像に乗せる素材では、白い四角が出た時点で使えません。こちらで抜き直しますが、 !JPGからの切り抜きは輪郭にノイズが残ります。
ロゴは支給の時点で頼むのがいちばん早いです。「AIかPSD、なければ背景を抜いたPNGでいただけますか」と伝えます。
05可逆で持ちたいなら、いまもPNGが確実
結論WebPの品質1.0は可逆になることが多いが、必ずではない。4素材のうち1つはピクセルが一致しなかった。
書き出したWebPを読み直し、元の画素と1つずつ比べました。
- 写真・テロップ・サムネ … 品質1.0で完全に一致しました。
- ロゴ … 一致せず、透明部分ではなく絵柄の部分で最大42（256段階中）の差が出ました。
品質を1.0にすれば必ず可逆、とは言えません。 原本に手を入れ、JPGやWebPは書き出し専用にするのが確実です。
なお同じ形式でも、書き出すツールによって容量は変わります。
| 素材 | PNG ブラウザ | PNG libpng | WebP品質1.0 ブラウザ | WebP可逆 libwebp |
|---|---|---|---|---|
| テロップ | 73.0 KB | 33.1 KB | 320.1 KB | 10.0 KB |
| サムネ | 154.7 KB | 68.0 KB | 49.6 KB | 31.8 KB |
| ロゴ | 15.0 KB | 7.8 KB | 11.4 KB | 3.2 KB |
06WebPを渡してよい相手かどうか
結論ブラウザは主要なものがすべて対応済み。ためらう理由は技術ではなく、受け取る人の側にある。
WebPの対応状況は、MDNの 画像ファイルの種類と形式ガイドで確認できます。 Chrome・Edge・Firefox・Opera・Safariが対応と示されています（確認日 2026年8月15日）。 Webに載せる用途なら、もう心配は要りません。
あるLPでは画像を全部WebPにしましたが、表示側で問題は起きていません。 それでも全部をWebPにしないのは、受け取る人の環境が分からないからです。
- 自分でWebまで仕上げる … WebPにします。いちばん軽くなります。
- 先方が編集したり差し替えたりする素材 … PNGかJPGで渡します。開けないと作業が止まります。
- 確認用に送るだけの画像 … JPGにします。どの環境でも開けます。
marudee
WebPは浸透してきましたが、まだ知らない人もいます。「開けない」と連絡が来るとお互いに手間なので、渡す相手で分けています。
07まとめ：形式で迷わないための手順
実測を通しても、最初の決めごとは変わりませんでした。数字は、その理由を説明してくれます。
- 1. 渡す先を先に確認する … 絵柄から考えると毎回迷います。渡す先が決まれば形式も決まります。
- 2. 写真はJPGかWebP … PNGにすると20.6倍になります。写真をPNGで持たないだけで大きく変わります。
- 3. テロップ・サムネ・文字ものはWebPが効く … 52%以上減り、JPGのような文字まわりのノイズも出ません。
- 4. 透過が要るならPNGかWebP … ロゴはJPGにしても軽くならず、透過だけ失います。
- 5. 原本を残し、そこから書き出す … WebPの品質1.0は、必ず可逆になるとは限りませんでした。
- 6. 相手が編集する素材はWebPにしない … ブラウザは対応済みですが、人とソフトはそうとは限りません。
形式の変換はWebP一括最適化ツール、サイズ変更と形式変換は画像リサイズ・変換ツールで、 フォルダごとまとめて処理できます。すべてブラウザ内で完結するため、画像が外部に送信されることはありません。