Transparent images without the PNG weight
For years PNG was the only safe choice for any web image with transparency: cut-out product photos, logos over coloured headers, illustrations with soft shadows. JPG cannot store transparency at all, so designers accepted PNG's large files as the price. A cut-out product photo at 1500×1500 px often weighs 1.5 to 3 MB as PNG.
WebP removes that trade-off. It supports a full 8-bit alpha channel in both its lossless and lossy modes, so the photo part of an image can be compressed like a JPG while the transparency stays smooth. The same cut-out product shot typically ends up at 150 to 400 KB, and since every current browser displays WebP, it can replace PNG on most websites directly.
Which PNGs benefit most
The saving depends on what is inside the PNG, not on the file size alone.
- Photographic content with transparency gains the most: product cut-outs, portraits with removed backgrounds, textured illustrations. Savings of 70 to 90 percent are common.
- Screenshots and UI mockups with gradients, photos or shadows usually shrink by half or more.
- Flat icons and simple logos with a handful of solid colours gain little. PNG already compresses these very well, and a few small icons may even come out slightly larger. For those, keeping PNG or running it through Compress PNG is often the better choice.
- PNGs that were already optimised with palette reduction save less than fresh exports from a design tool.
The file list shows the original and new size for each image, so it is easy to spot the ones that are not worth converting.
How the conversion is done
The browser decodes each PNG, draws it on a canvas at the original pixel size and encodes it with its built-in WebP encoder, in a background worker when the browser supports one. The image never leaves your device.
The quality slider, from 10% to 100% with 90% as the default, controls the lossy compression of the colour data. The transparency mask is compressed separately from the colours and, with the usual browser encoders, is not degraded by the slider in the same way, so edges of cut-outs stay clean even at 75%.
A technical detail matters for some workflows: the canvas works with premultiplied alpha, so the colour values of fully transparent pixels are discarded. This is invisible in a browser or document. It matters only if you use PNGs as game textures or masks that rely on hidden colour data under transparent areas; keep those as PNG.
Quality values for graphics
The 90% default is set higher than for photos because typical PNG content, such as interface elements, text and sharp outlines, shows compression artefacts sooner than a photo does.
- 90% for logos, interface screenshots and illustrations with text. Visually identical to the source in nearly every case.
- 80% for photographic cut-outs and hero images where file size matters. Differences only show up when zooming in.
- 95–100% for pixel art, charts with thin lines and screenshots of small text. WebP's lossy mode stores colour at half resolution, which can blur single-pixel coloured lines; at the top of the range this effect is minimal.
If you plan to change the image later, keep the original PNG. WebP is meant for the final published copy, and converting a lossy WebP back with WebP to PNG gives a large file without restoring any lost detail.
Using the result on a site
Swap the image file and update the extension in the reference; no other markup changes are needed for current browsers. A few practical notes:
- Size the image to its display size before converting. A logo displayed at 240 px wide gains nothing from being 2400 px.
- The WebP format has a hard limit of 16383 px per side, so very long screenshots or sprite sheets beyond that need splitting.
- Files up to 50 MB each are accepted, and a batch is converted with one quality setting and can be downloaded as a ZIP.
- Text chunks and other metadata inside the PNG are not copied into the WebP.