← back to blog
original test by · published August 9, 2026 · tested and updated August 9, 2026 · 8 min read

png vs jpg vs webp: a real browser conversion test

broad format advice is useful, but it can hide how much the source image matters. we ran three images from this website through CozyConvert itself, recorded every output, and kept the method simple enough for anyone to repeat.

what we tested

one image cannot represent every workload, so we chose three deliberately different inputs: a large photo-like composition with subtle texture, a flat graphic containing prominent text and gradients, and a small transparent icon. these are real assets used by CozyConvert, not files chosen after seeing favorable results.

photo-like arrangement of envelopes used as the 1920 by 1080 test input
photo-like: 1920 × 1080 WEBP, 181.6 KB
CozyConvert social graphic used as the 1200 by 630 text-heavy test input
text graphic: 1200 × 630 PNG, 720.2 KB
transparent CozyConvert icon used as the 512 by 512 test input
transparent icon: 512 × 512 PNG, 10.1 KB

method, so you can reproduce it

  1. we selected the three original files in the current CozyConvert interface on a desktop browser running macOS.
  2. we kept every image at its original pixel dimensions. CozyConvert does not resize during conversion.
  3. we exported the complete batch to WEBP at 85%, JPG at 85%, and PNG. PNG has no quality slider because its canvas export is lossless.
  4. we recorded the blob sizes shown by the converter after it verified each output MIME type.
  5. for the quality comparison, we repeated WEBP export at 70%, 85%, and 95%.

test date: August 9, 2026. browser encoders can change, so another browser or future version may produce different byte counts. canvas export can also omit metadata and color profiles. the original files remain available on this page for visual inspection.

measured results at 85% quality

Actual CozyConvert output sizes for three source images exported to WEBP, JPG, and PNG
inputoriginalWEBP 85%JPG 85%PNG
photo-like image 1920 × 1080 WEBP source181.6 KB65.7 KB (−64%)167.3 KB (−8%)1.9 MB (about 10.7× larger)
text-heavy graphic 1200 × 630 PNG source720.2 KB30.8 KB (−96%)59.1 KB (−92%)1013.1 KB (+41%)
transparent icon 512 × 512 PNG source10.1 KB7.4 KB (−26%)12.7 KB (+26%)17.2 KB (+70%)

what the WEBP quality slider changed

WEBP output sizes at 70, 85, and 95 percent quality
input70%85%95%
photo-like image28.9 KB65.7 KB178.4 KB
text-heavy graphic20.0 KB30.8 KB59.5 KB
transparent icon5.9 KB7.4 KB10.3 KB

the photo-like input is the clearest warning against blindly selecting maximum quality. WEBP at 95% was 178.4 KB, almost the same size as the 181.6 KB source. at 70% it fell to 28.9 KB, but that saving comes with a greater risk of visible changes in paper texture and fine edges. 85% landed between those extremes.

what surprised us

re-exporting to the same format can grow the file

the 720.2 KB text graphic became a 1013.1 KB PNG, and the 10.1 KB icon became a 17.2 KB PNG. both remained PNG, but the browser encoder made different compression choices than the tools that created the originals. “lossless” describes pixel preservation, not guaranteed byte-for-byte size.

JPG was the wrong result for the transparent icon

the JPG grew to 12.7 KB and transparency had to be filled with white. WEBP kept transparency and produced a 7.4 KB file. this is a case where choosing by compatibility alone would damage a useful property while increasing size.

the biggest percentage was not automatically the best recommendation

the text graphic shrank 96% as WEBP at 85%, but it contains lettering and sharp edges where lossy artifacts matter. the number is impressive, yet it still needs a visual check at the size where visitors will read it.

our practical conclusion

WEBP at 85% is a reasonable first test for photographic or mixed website graphics, not a universal final answer. PNG still makes sense when exact decoded pixels, sharp interface captures, or a lossless editing copy matter. JPG remains useful for broad compatibility and photographs that do not need transparency.

the reliable workflow is simple: keep the original, convert a copy, compare it at the intended display size, and keep the smallest result that still looks right. CozyConvert shows the output size immediately so that decision can be based on the actual file instead of a generic percentage.

repeat the test with your own images

your content is the only test set that perfectly represents your site.

open the converter