PNG vs JPEG vs WebP: which image format should you use?

Most image format decisions come down to two questions. Does the image need transparent areas? And will a little quality loss be visible? Answer those two and the format almost picks itself. The third question, where the file is going, decides whether the newer formats are allowed at all, because marketplaces and many apps still accept only JPEG and PNG.

This guide compares the four formats you will meet most often for photos and graphics on the web: JPEG, PNG, WebP and AVIF. It ends with a quick pick for the jobs people usually have: logos, product photos, ordinary photos and cut-outs with a transparent background.

The comparison table

The format details come from MDN's image file type guide. The support row matters less for browsers than it used to: every current major browser shows WebP, and AVIF is supported in recent versions of all of them. Where it still matters is everywhere else, such as upload forms, marketplaces, email clients and older desktop software.

Lossy vs lossless, in plain terms

Lossless compression shrinks a file without changing a single pixel. Decode a PNG and you get back exactly what was saved. That makes it ideal for anything with hard edges and flat color, such as text, logos, line art, user interfaces and screenshots, where any blur or color fringe is easy to see.

Lossy compression throws away detail the eye is unlikely to notice. Photographs tolerate this well because they are full of noise and gradual tones. JPEG works this way, and at sensible quality settings a photo can shrink to a fraction of its PNG size with no visible change.

Two practical rules follow:

• Every lossy save loses a bit more. Keep a lossless master (the camera original, a PNG, or your editor's own file) and export lossy copies from it, rather than editing and re-saving the same JPEG.
• Lossy compression is worst on sharp edges. A logo saved as JPEG gets smudgy "mosquito noise" around the letters, and a screenshot gets blurry text.

Transparency: the deciding feature for cut-outs

JPEG has no alpha channel. There is no way to store "this pixel is see-through" in a JPEG, so when you remove a background and save as JPEG, the empty area is filled with a solid color, usually white or black. If you want the cut-out to sit on top of other content, you need PNG, WebP or AVIF.

PNG stores a full alpha channel: each pixel can be anywhere from fully opaque to fully transparent, which is what keeps soft edges like hair, fur and shadows looking natural. It also has a simpler mode where one palette color is marked as transparent, which is fine for flat graphics but gives jagged edges on photos. If you want the details, read what an alpha channel is.

WebP supports transparency in both its lossless and lossy modes. Google's WebP documentation says lossless WebP adds transparency for about 22% more bytes, and that lossy WebP with transparency is typically around 3 times smaller than an equivalent PNG. That makes lossy WebP the most efficient way to ship a transparent product photo on your own website.

File size

For the same image, the rough order from largest to smallest is PNG, JPEG, WebP, AVIF, with a big caveat: PNG is only "large" for photos. For flat graphics with few colors, PNG is often smaller than JPEG and always sharper.

Google's published figures for WebP are a useful benchmark:

• Lossless WebP files are 26% smaller than PNGs.
• Lossy WebP files are 25 to 34% smaller than comparable JPEGs at the same SSIM quality score.

MDN's advice for raster images on the web is to prefer WebP or AVIF, which generally compress better than PNG, JPEG and GIF. AVIF also supports 10 and 12 bit color, which helps with smooth gradients. Its weak spot is support outside browsers: many apps and upload forms still reject it.

File size matters most when you serve many images to many visitors. For a single upload to a marketplace that re-compresses everything anyway, the format the marketplace accepts matters more than the bytes you save.

Where each format is accepted

Browsers are the easy part. Marketplaces and apps are where formats get rejected. These are the accepted formats according to each platform's own documentation, checked in October 2026:

Two things stand out. First, WebP and AVIF are not accepted by Amazon, Walmart or Meta catalogs, so keep JPEG or PNG for marketplace uploads. Second, Etsy says transparent PNGs are not supported and transparent areas can show up black, so flatten cut-outs onto a color before uploading there. For exact pixel sizes per platform, see the product photo size reference.

Which format to use for common jobs

Logos

Use SVG when you have a vector original; MDN recommends it for logos and icons. When you need a raster file, use PNG with a transparent background, or lossless WebP on your own site. Never JPEG: it adds fuzz around edges and cannot be transparent.

Product photos

For marketplace main images, use JPEG on a pure white background. Amazon's seller blog calls JPEG the preferred format, and every marketplace in the table above accepts it. Export at a high quality setting (around 85 to 92 in most tools) from a lossless master.

On your own store, upload a high quality JPEG or PNG and let the platform convert. Shopify, for example, says its image service automatically serves each visitor the best format their browser supports.

Ordinary photos

JPEG is the safe default for sharing and uploads. On a website you control, WebP or AVIF with a JPEG fallback gives the same look for fewer bytes. If your phone saves HEIC files, convert them to JPEG before uploading anywhere that does not list HEIC.

Cut-outs and transparent images

Use PNG when the file must work everywhere: in slides, documents, design tools and most upload forms. Use WebP when you are placing the image on your own web page and want it small. Use JPEG only if you have deliberately filled the background with a solid color, for example white for a marketplace.

Screenshots and diagrams

PNG, or lossless WebP. Lossy formats blur text.

Serving modern formats with a fallback

If you run your own site, you do not have to choose one format. The HTML picture element lets the browser pick the first format it understands:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Browsers that support AVIF take the first source, others fall back to WebP, and anything older uses the PNG. Many hosting platforms and image CDNs do this conversion for you based on the browser's Accept header, which is often simpler than generating every format yourself.

Converting between formats without surprises

• PNG or WebP to JPEG: transparent areas are flattened. Choose the fill color yourself (usually white) rather than letting the tool pick, because some tools default to black.
• JPEG to PNG: the file gets bigger but not better. The quality lost in the JPEG does not come back.
• Any format to WebP or AVIF: check transparency survived and that colors look right; convert to the sRGB color profile first if the image will be viewed on the web.
• Re-saving JPEGs: each save at a lower quality compounds the loss. Export once from the master.

A faster option for cut-outs

If you are removing backgrounds in bulk, removebackground.dev exports the cut-out as transparent PNG or WebP, or as JPG on any solid color, so you can produce a marketplace JPEG on white and a transparent PNG for your site from the same upload.