WebP vs PNG and JPG: modern formats for the web

In the WebP vs PNG and JPG question, WebP wins on your own website: it can compress like a JPG or losslessly like a PNG, supports transparency, and produces smaller files at the same visual quality. Every current browser supports it. Where PNG and JPG still win is everywhere outside your site: uploads to Instagram and LinkedIn, email attachments, files for clients and printers. So the practical rule is simple. Make and keep masters in PNG, serve WebP (or AVIF) to visitors.

What WebP is

WebP is an image format developed by Google and documented on web.dev. One format covers what used to need three: lossy photos like JPG, lossless graphics with transparency like PNG, and short animations like GIF. The saving comes from smarter compression, which predicts each block of pixels from its neighbours and stores only the difference.

WebP vs PNG for graphics and transparency

For logos, interface images and cutouts, lossless WebP keeps every pixel like PNG and is usually smaller. Lossy WebP with transparency is the bigger win: a product cutout that needs a soft, see through edge can be a fraction of the PNG size with no visible difference.

Gradients are the exception that needs care. A smooth dark blend can band in lossy WebP just as it does in JPG. If your hero image is mostly gradient, compare lossy at a high quality against lossless, and consider whether it should be an image at all: a CSS gradient costs no download.

WebP vs JPG for photos

For photographs, lossy WebP at a quality around 75 to 80 usually matches a JPG at 85 while being smaller. The difference adds up on pages with many images: product grids, portfolios, blogs. On a single hero photo the gain is real but less dramatic, and getting the pixel dimensions right matters more than the format.

1. 1

   Size first

   Export the photo at the largest size it actually displays. A 1920×1080 website hero never needs a 6000 pixel original.

2. 2

   Pick a quality

   Start lossy WebP at 80. Look at skin, skies and dark corners at 100% zoom, then step down until something changes, and go back one step.

3. 3

   Make smaller versions

   Export 640, 1280 and 1920 pixel widths so phones download the small one.

4. 4

   Serve with srcset

   Let the browser choose the right width with srcset and sizes, as in the code below.

AVIF vs WebP

AVIF is newer and usually compresses further than WebP, especially on photographs and smooth tones. It is supported in all current major browsers. Its costs are slower encoding, which matters if you convert images on the fly, and fewer tools that open it. Many sites serve AVIF first, WebP second and JPG last, and let the browser take the first it understands.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

If you use a framework or an image CDN, it may do all of this automatically from one uploaded original. Check what it outputs before you hand convert anything.

Where PNG and JPG still win

Social platforms convert uploads themselves, and some reject or mishandle WebP. Link preview crawlers vary too, so keep your Open Graph image as a 1200×630 PNG or JPG. And a WebP sent to a client often opens in the wrong app or not at all.

How to convert PNG to WebP

Google's free cwebp command line tool converts one file or a whole folder, and most image editors and design tools now export WebP directly.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Your master design files can stay in PNG: Gradiently exports designs as PNG and JPG, which are the right inputs for this step and the right files for every social upload. For the reasoning behind quality settings, read image compression without ruining gradients; for the older pair, PNG vs JPG; and for the full speed checklist, optimising images for the web.