WebP vs PNG vs JPG: which image format should you use?
The same photo can be 900 KB as PNG, 180 KB as JPG and 120 KB as WebP, and all three can look identical on screen. Format choice is the single highest-leverage thing you can do for page speed, yet most sites pick one format for everything and apply it to every upload.
How the three formats actually differ
JPG is a lossy format designed for photographs. It analyses an 8x8 block of pixels at a time and keeps the information the eye is most sensitive to, discarding the rest. That is why a photograph looks fine as a 150 KB JPG but a screenshot of a spreadsheet turns to mush.
PNG is lossless, so it reproduces every pixel exactly and supports full alpha transparency. Screenshots, logos, icons and anything with sharp text or flat colour belong here. The cost is size: photographic content stored as PNG is often three to five times larger than the same image as JPG.
WebP is Google's format and can do both — lossy and lossless — plus transparency and animation. At a comparable quality setting it typically saves 25 to 35 percent over JPG, and every current browser supports it. Its one weakness is that older design tools and some image pipelines do not read it.
- JPG: smallest for photos, no transparency, lossy.
- PNG: pixel-perfect and transparent, largest file size.
- WebP: lossy or lossless, transparent, animation, 25–35% smaller than JPG.
Which format for which image
The decision is not a matter of taste. Look at what the image contains. If it is a photograph of the real world, use JPG or WebP. If it contains text, a chart, a logo or a user interface, use PNG, or WebP in lossless mode.
For a website that must work everywhere, the safest high-performance setup is to serve WebP with JPG as a fallback, and keep PNG only for images that genuinely need transparency. Browsers that do not understand WebP are old enough that the fallback costs you almost nothing.
Beware of progressive enhancement in the wrong direction. A CSS background cannot use a <picture> element, so if transparency matters there, ship PNG rather than relying on a format the browser will not be told how to fall back from.
- Photo of a real scene → WebP, with JPG fallback.
- Screenshot, chart, logo, text → PNG or lossless WebP.
- Needs transparency → PNG, or WebP if you can verify browser support.
Getting the size down without visible quality loss
Most of the size win comes from choosing the right format, not from aggressive compression. Converting a large PNG screenshot to JPG can make it smaller but will make it look worse. Converting that same screenshot to WebP in lossless mode is usually both smaller and pixel-identical.
For photographs, quality settings between 75 and 85 are the sweet spot for WebP and JPG: files typically drop by half or more against a camera original, and the difference is invisible at normal viewing size. Below 70 you will start to see blocking around faces and in flat areas like the sky.
Dimensions matter as much as the format. Serving a 4000-pixel image to a phone that displays 800 pixels wastes megabytes no codec can recover. Resize to roughly twice the largest display size, in CSS pixels, and convert afterwards — the Image Resizer and Image Compressor handle both steps.
- Right format beats aggressive compression every time.
- Quality 75–85 for photos; higher for text and flat colour.
- Resize to about 2x the display size before converting.