png vs webp: which format should you use?

the fundamental difference

png uses lossless compression exclusively. every single pixel in the original image is preserved perfectly. no data is ever discarded. this produces files that are bit-for-bit identical to the original image data.

webp supports both lossy and lossless compression. in lossless mode, it's similar to png but typically produces smaller files. in lossy mode, it discards some image data to achieve much smaller file sizes, relying on the fact that human eyes can't perceive the discarded information.

the choice between them often comes down to: do you need pixel-perfect accuracy, or do you need the smallest possible file size?

file size: how much smaller is webp really?

the difference is significant and consistent across different image types.

for large images like product photos, hero images, or blog post illustrations, these savings are meaningful. smaller files mean faster pages, better core web vitals scores, and lower bandwidth costs.

transparency support: a draw

both png and webp support full alpha channel transparency. this means both formats can handle partially transparent images, gradual fade effects, and complex cutouts with soft edges.

in practice, the transparency quality between the two formats is indistinguishable when webp is used in lossless mode. when using lossy webp with transparency, there can occasionally be very slight artifacts along the edges of transparent areas at lower quality settings, though this is rarely visible at 80% quality or above.

if your image uses transparency, this isn't a reason to stick with png. webp handles it well.

where png still wins

there are genuine use cases where png is the better choice, and it's worth knowing them.

source and working files. if you're saving an image you'll open and edit again, png's lossless nature means no degradation. every time you re-save a lossy format, you lose a tiny bit of quality. over multiple save cycles this adds up. keep working files as png (or psd, tiff, etc).

screenshots with text or ui elements. lossy compression introduces subtle artifacts around high-contrast edges, which is especially noticeable with text. a screenshot saved as png will always look crisper than lossy webp.

digital art with flat colors. illustrations with large areas of solid color sometimes compress better as png because lossless compression handles repeated identical pixels very efficiently. try both and compare.

maximum compatibility requirements. png is supported in literally every context that handles images, including very old software, obscure cms platforms, and legacy enterprise systems. if you're not sure something supports webp, png is always safe.

where webp wins

website images in general. for anything going onto a public-facing website, webp produces smaller files than png for equivalent quality. faster loads, better seo.

photographs with transparency. if you need a photo with a transparent background (like a product cutout), webp lossy will be dramatically smaller than the png equivalent while looking identical.

hero images and banners. large decorative images benefit most from lossy webp compression. a 2mb png hero image might become 400kb as webp at 85% quality with no visible difference.

animation. webp supports animation like gif, and animated webp is dramatically more efficient than both animated gif and animated png.

browser and software support

png has been around since 1996 and is supported absolutely everywhere without exception. every browser, every operating system, every image editing tool, every cms.

webp is supported in all modern browsers: chrome, firefox, safari (2020+), edge, opera, samsung internet. the only gaps are internet explorer and very old mobile browsers that represent negligible traffic in 2026.

where webp has more friction is outside browsers. not all image editing apps support it natively, though most major ones do now. some older cms platforms and enterprise tools may not handle webp uploads. if you need your images to work beyond the web, png remains the safer choice.

the side-by-side comparison

the practical workflow

the best approach for most people is to keep working files as png (or in your native app format), and convert to webp when you're ready to publish. this way you always have the original lossless version, and your published images are as small as possible.

think of png as your archival format and webp as your delivery format. create and edit in png, publish in webp.