Transparent Images: PNG vs WebP and Why JPEG Fails

What transparency is

A transparent image has an extra piece of information for every pixel, called the alpha channel, which says how much of the background should show through. A value of zero means fully transparent, the maximum means fully opaque, and the values in between give semi-transparent pixels, which are needed for smooth edges, shadows and glass effects. Without an alpha channel, an image is a plain rectangle.

Transparency is used for logos, icons, cut-out product photos, stickers and interface elements that sit on different backgrounds.

Which formats support it

PNG supports full alpha transparency, usually with 256 levels per pixel, and also supports a palette mode that can carry transparency. WebP supports full alpha in both its lossless and its lossy mode. GIF supports only on-off transparency: a pixel is either transparent or not, which gives jagged edges. AVIF supports alpha as well. JPEG has no transparency at all.

When you convert a transparent PNG to JPEG, the transparent areas must become a solid color. The compressor on this page fills them with white, which looks right on a white page and wrong on a dark one. If the image will appear on colored backgrounds, keep PNG or convert to WebP instead.

PNG or WebP?

PNG is the classic choice, supported by every program and browser, and it keeps the image exactly. WebP offers the same transparency with smaller files. Google reports that lossless WebP images are 26 percent smaller than PNG and that lossy WebP with transparency can be about three times smaller than PNG, where some loss of quality is acceptable. Results depend on the image.

For a website with a modern audience, WebP is usually the better choice for transparent images. For files that must be opened in design software or sent to others, PNG is the safer choice.

Halos and fringes

Cut-out images often show a light or dark outline when placed on a new background. This happens when the semi-transparent edge pixels were blended with the old background color, for example white, and then displayed on a dark page. The fix is in the source: remove the matte color when you export the cut-out, or place the image on a background of a similar color.

Lossy compression can also add fringes around edges. If you compress a transparent image with lossy WebP, check the edges on the background where it will be used, and raise the quality if you see artifacts.

Making transparent images smaller

Reduce the pixel dimensions to the size at which the image is displayed, because that has the biggest effect. Remove unneeded transparent margins around the object by cropping. Reduce the number of colors for flat logos with a palette tool, which can shrink a PNG a lot. And consider lossy WebP for photos with transparency, such as cut-out product pictures, where the saving can be large.

The compressor can resize and convert to WebP while keeping transparency. It cannot create a reduced-color palette, and when the format stays the same and the size is not changed, it keeps the original if the new version is not smaller.

Shadows and soft edges

Soft shadows and glows are made of many semi-transparent pixels, and they are the hardest part to compress and to display well. They show banding when the quality is too low and look wrong when the image is placed on a different background than the one it was designed for. If a shadow is part of the design, test the compressed image on the real page background.

If you only need a shadow on a plain background, a JPEG with the shadow baked in on that background can be smaller and simpler than a transparent file.

Choosing for your case

For a logo with flat colors, use SVG if it is vector art, or PNG, and optimize it with a palette tool. For a cut-out product photo on a modern website, use lossy WebP. For an icon that must work everywhere, use PNG. For a photo without transparency needs, use JPEG or WebP without alpha.

Test the actual file on the actual background, at the actual size. The compressor shows a thumbnail and the size, so you can compare formats quickly.

Keep a master of every transparent graphic in its original editable form, such as a layered file or a vector drawing, and export the web versions from it. Exporting from a master avoids stacking compression artifacts on top of each other, and it lets you create a new size or a new format in a minute when the design of your site changes.

Transparency in practice: a short test

To see the effect for yourself, take a transparent PNG logo and run it through the compressor three times, changing the output format each time: keep the format, convert to WebP and convert to JPEG. Note the size shown in the list and download the result of each run. Then place all three on a white page and on a dark page. The WebP version should keep the transparency and be smaller than the PNG, and the JPEG version will show a white box on the dark page.

This quick experiment explains better than any rule why the choice of format depends on where the image will be used. It takes less than a minute, and it avoids surprises after publishing.