WebP

WebP can do the jobs of several older formats. It supports lossy compression like JPEG for photographs, lossless compression like PNG for graphics, transparent backgrounds like PNG, and animation like GIF. For a website, that usually means one modern format can replace most of the others with smaller files.

WebP is not the newest option. AVIF, a newer format, often compresses further, but it is slower to encode and its support has historically lagged slightly behind. Neither format fixes an image that is far too large in pixel dimensions, and neither is needed for tiny icons best drawn as vector graphics; resizing and image compression still matter.

How it works

Lossy WebP uses techniques derived from video compression: it divides the image into blocks, predicts each block from its neighbours and stores only the differences, discarding detail that is hard to see. Lossless WebP uses a different method that finds repeated patterns and colours and stores them compactly. A quality setting controls the trade-off between file size and detail in lossy files.

Websites usually keep the original JPEG or PNG and serve a WebP version alongside it. The HTML can offer both, so a browser that understands WebP downloads it and any very old browser falls back to the original. Many CMS platforms, image plugins and CDNs handle this conversion automatically, producing WebP files on upload or on the fly.

Converting an already heavily compressed JPEG to WebP gains less than converting from a high-quality original, and repeated conversions add artefacts. The best results come from exporting WebP once from the original image. Transparent WebP images can replace PNG cut-outs, such as product shots on a white or coloured background, usually at a fraction of the size, and animated WebP can replace heavy GIFs. For very short looping animations, a small muted video file is often lighter still.

Example

An online gift shop has several hundred product photos saved as JPEG and a set of logos and badges saved as PNG with transparent backgrounds. Its pages are slow on phones, and PageSpeed Insights recommends serving images in modern formats.

The shop installs an image optimisation tool that creates WebP copies of every image and serves them to supporting browsers, while keeping the originals. Product photos become noticeably lighter and look the same to customers, and the badges keep their transparent backgrounds. No product pages need to be edited by hand, and new uploads are converted automatically. When the shop later sends a newsletter, it uses the original JPEG files rather than the WebP copies, because some email clients do not show WebP reliably. Keeping both versions means each channel gets the format it handles best.

Why it matters for your business

Smaller images mean faster pages, which helps visitors stay and supports Core Web Vitals, especially Largest Contentful Paint when the main element is an image. Switching to WebP is usually cheap, often a plugin or a setting, and the originals can be kept. The limits are practical: some desktop software and email clients handle WebP less well than JPEG, so keep original files for print, email and sharing. You can check what your site serves by opening the browser's developer tools on the Network tab and looking at the image types.

Common mistakes

• Converting to WebP but still serving images several times larger in pixels than they are displayed.
• Deleting the original high-quality images after conversion, leaving nothing for print or future formats.
• Converting already compressed images again and again, adding visible artefacts each time.
• Using WebP in email newsletters without checking how the main email clients display it.

Questions people ask

Is WebP better than JPEG?

For websites, usually yes. WebP generally produces smaller files than JPEG at similar visual quality and also supports transparency and animation. JPEG remains more universally supported outside browsers, so it is still a sensible format for originals, print and sharing.

Do all browsers support WebP?

All major modern browsers, including Chrome, Safari, Firefox and Edge, display WebP. Very old browser versions do not, which is why sites often offer a JPEG or PNG fallback in the HTML. For most audiences, the fallback is rarely needed.

What is the difference between WebP and AVIF?

Both are modern formats that make images smaller than JPEG or PNG. AVIF often compresses further at the same quality but takes longer to encode, and its support historically arrived later. Many sites serve AVIF where supported and WebP or JPEG otherwise.