TOOLPIPO LAB IMAGE · 25条件
画像を500KB以下にすると、画質はどこまで変わる？
同じ自作画像を1MB・500KB・200KB・100KBへ軽量化し、JPEG・WebP・PNGで容量、解像度、エンコードquality、pixel差分がどう変わるか実測しました。
公開日・検証日：2026-10-11 · Chromium 151.0.7922.34
500KBでも、残せる解像度は形式と画像内容で違いました
写真風画像のJPEG・WebPは2400 × 1600pxを維持し、PNGは703 × 468pxへ縮小しました。一方、UI風画像は500KBだけでなく100KBでも、3形式とも1600 × 1000pxを維持できました。
同じ容量目標でも、画像内容で処理結果は変わります。容量だけで決めず、解像度とBefore / Afterも確認してください。この結果は自作画像3種類を使った検証で、写真一般やすべての画像への順位付けではありません。
今回の検証方法
人物や既存の写真は使わず、固定seed・自作bitmap文字で3種類のPNGを生成しました。OSのフォントには依存しません。Aはgradient・細かいtexture・明暗・細線・文字・平坦部分を持つ写真風の合成画像（2400 × 1600px）、Bは白背景・罫線・文字・色面のUI風画像（1600 × 1000px）、Cはalpha 0・半透明・不透明を持つ図形画像（1600 × 1000px）です。
Aは3形式 × 4目標の12条件、Bは3形式 × 3目標の9条件、Cは200KBの3条件、変換不要controlは1条件。合計25条件を現行Tool UIで測定しました。500KBのJPEG/WebP/PNGを追加で各2回測り、初回を含む3回ずつ、総実行31回です。
出力形式をJPEG・WebP・PNGへ明示指定し、最大画像サイズは「元のサイズ」、JPEG背景は#ffffffに固定。1KB = 1024 bytes、1MB = 1024 × 1024 bytesです。Toolが必要と判断した場合だけ自動縮小させました。
JPEG/WebPのquality範囲は0.20〜0.95です。元寸法の最低qualityでも目標を超えた場合にだけ縮小へ進みます。PNGだけqualityを下げる処理はしていません。
500KBへ軽量化するとどうなった？
写真風画像Aの元ファイルは6,583,236 bytes。500KBの上限は512,000 bytesです。3形式とも、実際に保存したファイルが上限以下であることを確認しました。
| 形式 | 目標 | 実容量 bytes | 解像度 px | quality | resize | encode回数 | 状態 |
|---|---|---|---|---|---|---|---|
| JPEG | 500KB | 495,612 | 2400 × 1600 | 0.674609 | なし | 10 | achieved |
| WebP | 500KB | 508,772 | 2400 × 1600 | 0.733203 | なし | 10 | achieved |
| PNG | 500KB | 510,619 | 703 × 468 | 対象外 | あり | 10 | achieved |
JPEG：quality調整だけで500KBに到達
495,612 bytes・2400 × 1600px・quality 0.674609でした。今回のAでは200KBまで元寸法を維持し、100KBで初めて2135 × 1424pxへ縮小しました。
WebP：今回の500KBも元寸法を維持
508,772 bytes・2400 × 1600px・quality 0.733203でした。200KBまでは元寸法、100KBでは2391 × 1594pxでした。JPEGとquality値だけを並べても同じ見え方の比較にはなりません。
PNG：500KBでは解像度の変更が必要
510,619 bytes・703 × 468px。quality探索はなく、元寸法のPNG再保存では目標に届かなかったため縮小しました。1MB条件からすでに995 × 663pxへ縮小しています。PNGの保存がlosslessでも、元画像と同じ解像度ではありません。
実画像の同じ領域を比べる
元画像Aの座標（1500, 750）から320 × 240px相当のtexture領域を、元画像・500KB・100KBの各出力から切り出しました。出力をdecodeし、PNGで保存しているため、比較画像をJPEGへ再圧縮していません。
PNGは解像度が変わったため、出力上の対応する領域を切り出しています。各パネルは最大幅320pxにそろえた表示です。元画像は幅320pxなら100%表示、縮小PNGは拡大表示になります。切り出しの実寸と倍率を併記しました。画素1:1の同寸法比較ではありません。
1MB・500KB・200KB・100KBを比較
| 形式 | 目標 | 実容量 bytes | 解像度 px | quality | resize | encode回数 | 状態 |
|---|---|---|---|---|---|---|---|
| JPEG | 1MB | 1,026,374 | 2400 × 1600 | 0.882617 | なし | 10 | achieved |
| JPEG | 500KB | 495,612 | 2400 × 1600 | 0.674609 | なし | 10 | achieved |
| JPEG | 200KB | 203,053 | 2400 × 1600 | 0.293750 | なし | 10 | achieved |
| JPEG | 100KB | 101,925 | 2135 × 1424 | 0.202930 | あり | 20 | achieved |
| WebP | 1MB | 1,031,710 | 2400 × 1600 | 0.891406 | なし | 10 | achieved |
| WebP | 500KB | 508,772 | 2400 × 1600 | 0.733203 | なし | 10 | achieved |
| WebP | 200KB | 203,360 | 2400 × 1600 | 0.337695 | なし | 10 | achieved |
| WebP | 100KB | 99,398 | 2391 × 1594 | 0.293750 | あり | 20 | achieved |
| PNG | 1MB | 1,031,990 | 995 × 663 | 対象外 | あり | 10 | achieved |
| PNG | 500KB | 510,619 | 703 × 468 | 対象外 | あり | 10 | achieved |
| PNG | 200KB | 202,411 | 456 × 304 | 対象外 | あり | 10 | achieved |
| PNG | 100KB | 96,539 | 320 × 213 | 対象外 | あり | 10 | achieved |
100KBは変化を確認する極端な条件です。推奨容量として提示していません。今回のJPEGとWebPは、100KBで最低qualityの元寸法出力が上限を超え、縮小に進んだことをencode記録でも確認しています。
写真風画像とスクリーンショット風画像で違う？
UI風画像Bは元PNGが27,011 bytesと小さく、明示的に再保存したPNGは41,077 bytes、WebPは35,446 bytesでした。いずれも100KBまで元寸法を維持しています。JPEGは500KB・200KBが108,416 bytes、100KBだけqualityを調整しました。
| 形式 | 目標 | 実容量 bytes | 解像度 px | quality | resize | encode回数 | 状態 |
|---|---|---|---|---|---|---|---|
| JPEG | 500KB | 108,416 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 200KB | 108,416 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 100KB | 98,727 | 1600 × 1000 | 0.932422 | なし | 10 | achieved |
| WebP | 500KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| WebP | 200KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| WebP | 100KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| PNG | 500KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
| PNG | 200KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
| PNG | 100KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
同じ500KBでも、写真風画像AのPNGは縮小が必要で、UI風画像Bでは不要でした。色面や罫線が多い画像と高detailの画像を、同じ条件の一般論で扱えないことが分かります。今回は形式を明示したため、元のPNGより出力容量が増えた条件もあります。
透明画像ではどうなる？
Cを200KBへ変換しました。PNGとWebPの出力にはalpha 0・半透明・不透明の3種類が残りました。JPEGにはalphaがなく、透明な左上pixelは白（255, 255, 255, 255）になりました。背景色は#ffffffです。
| 形式 | 目標 | 実容量 bytes | 解像度 px | quality | resize | encode回数 | 状態 |
|---|---|---|---|---|---|---|---|
| PNG | 200KB | 202,825 | 1246 × 779 | 対象外 | あり | 10 | achieved |
| WebP | 200KB | 57,522 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 200KB | 45,929 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
PNGは1246 × 779pxへ縮小、WebP/JPEGは1600 × 1000pxを維持しました。ここでは透明維持と背景flattenを確認しており、画質順位を付けていません。PNG出力・WebP出力・JPEG出力で確認できます。
pixel差分0でも、元の細部が残るとは限りません
各pixelのRGBA各成分の最大差を集計し、しきい値0でchanged pixel rate・mean delta・max deltaを出しています。人間が感じる画質点数ではありません。99%のpixelが変わっても、全pixelが目に見えて大きく変わったという意味ではありません。
リサイズ時は、元画像を出力サイズへリサイズした基準画像と出力画像を比較しています。今回のPNGは差分0ですが、703 × 468pxや320 × 213pxになった画像が、元の2400 × 1600pxと同品質という意味ではありません。解像度を落とした時点で失われた細部は、この数値に含まれません。
| 条件 | changed pixel % | mean delta | max delta |
|---|---|---|---|
| JPEG 1MB | 99.1244 | 4.4792 | 68 |
| JPEG 500KB | 99.6274 | 7.1901 | 90 |
| JPEG 200KB | 99.9395 | 9.4753 | 111 |
| JPEG 100KB | 99.9447 | 8.4339 | 122 |
| WebP 1MB | 98.4102 | 3.3119 | 58 |
| WebP 500KB | 99.2950 | 5.2114 | 72 |
| WebP 200KB | 99.5849 | 7.6841 | 105 |
| WebP 100KB | 99.3651 | 6.4699 | 84 |
| PNG 1MB | 0.0000 | 0.0000 | 0 |
| PNG 500KB | 0.0000 | 0.0000 | 0 |
| PNG 200KB | 0.0000 | 0.0000 | 0 |
| PNG 100KB | 0.0000 | 0.0000 | 0 |
表は小数4桁へ丸めており、丸め前の値はresults.jsonに保存しました。JPEG/WebPのquality値はencoderへの指定で、quality 0.7を70点とは扱いません。
すでに目標容量以下なら再圧縮しない
Bを「元の形式」・「元のサイズ」・1MBで処理すると、encode 0・27,011 bytesのまま返りました。元ファイルとSHA-256が完全一致し、埋め込んだComment metadataも保持されました。
再encodeした条件では元のCommentは引き継がれませんでした。EXIF / GPS / XMP等も再保存時には原則引き継ぎません。一方、変換不要時は元bytesを返すためmetadataも元のままです。metadataの変化と画質の変化は別の話です。
この検証で分からないこと
この結果は検証時のChromium環境での実測値です。ブラウザやversionにより出力容量が異なる場合があります。JPEG/WebPのCanvasエンコードはブラウザ実装に依存するため、別ブラウザでは同じqualityでも容量が異なる可能性があります。
画像3種類だけで形式の優劣、何KBなら十分か、用途別の適正画質を断定しません。Canvas再保存ではICC/profileなど色管理の違いもあり得るため、色校正用途の検証ではありません。APNG・animated WebPは比較対象外で、Toolは拒否します。
EXIF Orientation 6はTool開発時の別fixtureで向きの維持を確認済みです。本記事の25条件には含めていません。入力画像と処理結果はブラウザ内で扱い、Tool入力の外部送信はありません。
自分の画像で、容量と見た目を確認する
同じ500KBでも結果は画像内容で変わります。保存前に、出力寸法とBefore / Afterを確認してください。
再現用データと全検証結果
source fixture3種類、全25出力、lossless切り出し7画像、JSON、生成scriptとREADMEを同梱しました。sourceと自作図形はCC0-1.0。生成用のfflateはMITライセンスです。
ZIP：13,160,092 bytes
SHA-256：528cbaeeda78374f90f654063eca3a4b8da8cfc9a51fea1973c831cc524eb77c
全測定値 results.json · source SHA-256 · 切り出し座標 · 再現手順
| source | 寸法 | bytes | SHA-256 |
|---|---|---|---|
| photo-detail-source.png | 2400 × 1600 | 6,583,236 | e20016bb83899e17f46a117679a807ca267e7d055b9658d88da43c8f9fc32a37 |
| ui-flat-source.png | 1600 × 1000 | 27,011 | 2328613c1daf92a4e27ba28e2ced9161eb06c3979aabec0e40d510e42adff729 |
| transparent-graphic-source.png | 1600 × 1000 | 157,229 | d878af17efda51bee0aa2f4241a46ef3bad32755e20d51d7cd35e4f6d343f1e5 |
全25条件の測定値を見る
| 形式 | 目標 | 実容量 bytes | 解像度 px | quality | resize | encode回数 | 状態 |
|---|---|---|---|---|---|---|---|
| JPEG | 1MB | 1,026,374 | 2400 × 1600 | 0.882617 | なし | 10 | achieved |
| JPEG | 500KB | 495,612 | 2400 × 1600 | 0.674609 | なし | 10 | achieved |
| JPEG | 200KB | 203,053 | 2400 × 1600 | 0.293750 | なし | 10 | achieved |
| JPEG | 100KB | 101,925 | 2135 × 1424 | 0.202930 | あり | 20 | achieved |
| WebP | 1MB | 1,031,710 | 2400 × 1600 | 0.891406 | なし | 10 | achieved |
| WebP | 500KB | 508,772 | 2400 × 1600 | 0.733203 | なし | 10 | achieved |
| WebP | 200KB | 203,360 | 2400 × 1600 | 0.337695 | なし | 10 | achieved |
| WebP | 100KB | 99,398 | 2391 × 1594 | 0.293750 | あり | 20 | achieved |
| PNG | 1MB | 1,031,990 | 995 × 663 | 対象外 | あり | 10 | achieved |
| PNG | 500KB | 510,619 | 703 × 468 | 対象外 | あり | 10 | achieved |
| PNG | 200KB | 202,411 | 456 × 304 | 対象外 | あり | 10 | achieved |
| PNG | 100KB | 96,539 | 320 × 213 | 対象外 | あり | 10 | achieved |
| JPEG | 500KB | 108,416 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 200KB | 108,416 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 100KB | 98,727 | 1600 × 1000 | 0.932422 | なし | 10 | achieved |
| WebP | 500KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| WebP | 200KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| WebP | 100KB | 35,446 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| PNG | 500KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
| PNG | 200KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
| PNG | 100KB | 41,077 | 1600 × 1000 | 対象外 | なし | 1 | achieved |
| PNG | 200KB | 202,825 | 1246 × 779 | 対象外 | あり | 10 | achieved |
| WebP | 200KB | 57,522 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| JPEG | 200KB | 45,929 | 1600 × 1000 | 0.950000 | なし | 1 | achieved |
| 元の形式 | 1MB | 27,011 | 1600 × 1000 | 対象外 | なし | 0 | unchanged |
環境・探索記録・3回の再現性
環境：win32 10.0.26200 x64 / Chromium 151.0.7922.34 / 測定時刻 2026-10-11T06:33:06.320Z。Tool commit：ce1a21f9451afb878286b6f2bc890b9c0330642a。
500KBのJPEG・WebP・PNGは各3回でoutput bytes・寸法・quality・SHA-256が一致しました。環境が変わった場合の一致を保証するものではありません。results.jsonには各runの値と、全encode試行の寸法・quality・実Blobサイズを記録しています。
再現：node scripts/generate-image-compression-article-fixtures.js → node scripts/measure-image-compression-article.js → node scripts/package-image-compression-article.js → node scripts/render-image-compression-article.js。測定時のTool処理4 JSは変更していません。