Use WebP when it suits your delivery needs, but choose the encoding mode per image and verify the result before replacing PNGs. Google’s cwebp tool converts PNG files to WebP; the essential checks are pixel fidelity, visual quality, transparency, metadata, file size, and support in the browsers or applications your project targets.
Choose lossless or lossy WebP
WebP supports both modes, and the right choice depends on what the image must preserve. Lossless encoding reconstructs the source exactly; lossy encoding trades some image fidelity for compression. Neither mode guarantees a smaller output for every PNG, so evaluate the converted file rather than assuming a format-level saving.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Introducing Squoosh: A Beginner’s Guide to Image Compression (Wish I Knew This Sooner) | $6.99 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
- Choose lossless when exact pixel reconstruction matters.
- Choose lossy when some visual change is acceptable and you can inspect the result at its intended display size.
The -q quality factor ranges from 0 to 100, but its meaning depends on the mode. In lossy mode, lower values mean smaller files and lower quality. In lossless mode, the factor affects compression speed and file size. Google’s getting-started example is cwebp -q 80 image.png -o image.webp; treat 80 as an example setting, not a universal recommendation. See the cwebp command-line documentation.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Convert a representative image and measure it
Start with a source representative of the assets you plan to convert. Record the original and output byte sizes, then compare the rendered images at their intended dimensions and on the backgrounds where they will appear. Inspect small text, sharp edges, gradients, and other details that matter for that asset type. If one setting is being applied to a large collection, test a representative range rather than assuming one image predicts every result.
#1 Best Overall
Google’s WebP overview says lossless WebP images are 26% smaller than PNGs, but the page does not state a publication year or the methodology behind that figure. It is a general comparison, not a promised saving for an individual conversion. Measure your own output. Google’s WebP overview.
Convert PNG from the command line
Google documents cwebp for compressing supported image inputs, including PNG. Its basic syntax is cwebp [options] input_file -o output_file.webp.
- For a lossy conversion: run
cwebp -q 80 image.png -o image.webp, then inspect the result and adjust the quality setting if needed. - For lossless conversion: run
cwebp -lossless image.png -o image.webp. - For a reproducible build: record the
cwebpversion, command options, and source asset alongside the conversion workflow. The options alone do not establish that a particular command was tested against your images.
Consult the cwebp documentation for the available encoder options and exact syntax.
Check transparency and edge quality
WebP supports transparency in both lossy and lossless modes. If the PNG has an alpha channel, inspect the converted image over both light and dark backgrounds, paying attention to halos, softened edges, and partially transparent pixels. The cwebp documentation describes a separate control for alpha compression quality.
Fully transparent pixels can contain RGB values that are invisible in the source but may matter to a particular workflow. The -exact option preserves those RGB values. Use it when that preservation is required, and validate the output in the actual consumer rather than relying only on a file inspection.
Decide whether to retain metadata
cwebp does not copy metadata by default. If the output must retain metadata, select it explicitly with -metadata: the documented choices are all, none, exif, icc, and xmp. Decide which metadata your workflow needs—for example, an ICC profile for color management—then verify that the generated files contain what you selected. See the metadata options in the cwebp manual.
Verify support in every target consumer
Compatibility depends on browser and version, and a browser support claim does not automatically cover non-browser applications or other image consumers in your pipeline. Google’s WebP FAQ lists support thresholds of Safari 14+, Firefox 65+, and Edge 18+ for lossy, lossless, and alpha support. Confirm the requirements for the versions and environments your project actually supports before removing PNG files or fallbacks. Google’s WebP FAQ.
If any required consumer cannot use the WebP output, keep or generate a PNG fallback for that consumer. The appropriate delivery arrangement depends on your supported environments; test the selected approach there before changing production assets.
Quick Recap
Pre-conversion checklist
- Decide whether the image requires exact reconstruction; select lossless when it does.
- For lossy output, choose a quality setting and inspect the visual result.
- Compare actual output bytes with the PNG rather than relying on a general compression figure.
- For transparent assets, inspect alpha and edge appearance; consider
-exactif fully transparent RGB values must remain intact. - Choose which EXIF, ICC, or XMP metadata to retain, since metadata is not copied by default.
- Check browser versions and non-browser consumers; keep a fallback wherever a required consumer needs PNG.
- Record the tool version and settings so future builds can reproduce the conversion.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
