The Complete Guide to Converting Images to WebP

Why WebP is better for most web images

Let's get straight to the point. At the same perceived visual quality, WebP files are 25-35% smaller than JPEG files. For a website with 30 product images, that's potentially 35% less image bandwidth per page load. Users see the same images, but the page loads faster.

WebP also supports transparency (like PNG) and animation (like GIF). So it's not just a replacement for JPG — it's also a better PNG for images that need transparency, and a much more efficient GIF replacement for animations.

Browser support: Chrome (2011), Firefox (2019), Edge (2018), Safari (2020). iOS supports WebP from iOS 14. That covers basically everyone who uses a device made in the last four years.

The only situations where WebP isn't the right choice are: you need to support very old browser versions, the receiving system doesn't understand WebP (some email clients, legacy apps), or you're working in a print workflow that expects TIFF or JPG.

How WebP compression works

WebP uses two different compression modes. Lossy WebP (for photos) uses a prediction-based compression similar to VP8 video encoding — it predicts pixel values based on surrounding pixels and stores only the difference. This is more efficient than JPEG's DCT-based approach, which is why WebP produces smaller files.

Lossless WebP (for graphics, logos, screenshots) uses a transform-based approach that stores the image without throwing away any data, but compresses the internal representation more efficiently than PNG. Lossless WebP files are typically 26% smaller than equivalent PNG files.

In practice, most conversion tools offer a quality slider (like JPG) where higher quality = larger file. A quality setting of 80-85 in WebP is roughly equivalent to quality 85-90 in JPG, but the WebP file will be smaller.

How to convert to WebP

The quick way (single images): Drop your image into a browser-based converter, select WebP as the output format, download. Done. This works for one-off conversions and for images where you don't want to upload to a server. Our convert tool does this entirely in your browser.

For WordPress: Install a plugin like Imagify, ShortPixel, or WebP Express. These automatically convert new uploads to WebP and serve WebP to browsers that support it, with JPG fallback for those that don't. Set and forget.

For web development (command line): Google's cwebp tool is a command-line converter. A basic conversion: cwebp -q 80 input.jpg -o output.webp. For batch conversion in a shell: for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done.

For build pipelines: If you use webpack, Vite, or another build tool, there are plugins that automatically convert images to WebP during the build process. imagemin-webp is a common option for Node-based build systems.

In Photoshop or Figma: Export/Save as WebP from the format dropdown. Photoshop requires a plugin for older versions (CS6 and earlier). In Figma, go to export, then pick WebP as the format.

What quality setting should you use for WebP?

For photographs: 80-85% is the standard recommendation. It gives you a significant file size reduction compared to 100% while maintaining visual quality that most users won't notice at normal viewing distance.

For images with text overlays or sharp logos: use 90%+ to avoid artefacts around high-contrast edges. The quality slider affects these areas more noticeably than smooth photographic gradients.

For thumbnails and preview images that display at small sizes: 70-75% is fine. The reduced size means any quality loss is less visible.

The practical approach: set quality to 80%, look at the result at actual display size (not zoomed in). If it looks good, ship it. If not, bump to 85% and check again.

Keeping JPG fallbacks for old browsers

If you need to support older browsers (IE11, old Safari on older iOS devices), you need JPG fallbacks. The standard approach in HTML is the <picture> element:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Browsers that support WebP use the <source>. Browsers that don't fall back to the <img> tag. Both images need to exist on the server. This is more complexity, which is why many people just use WebP without fallbacks in 2025 — browser support is broad enough that the edge case is very small.

Common questions about WebP conversion

Will converting my JPG to WebP look worse? At 80%+ quality, the visual difference is negligible when viewed at normal screen zoom. The WebP will be smaller and look essentially the same.

Can I open WebP files on my computer? Yes. Chrome, Edge and Firefox can display WebP files directly. On Windows, Photos app and Paint support WebP. On Mac, Preview supports WebP. For older software that doesn't, you may need a plugin or a different viewer.

Does converting to WebP preserve EXIF data? It depends on the tool. Many converters strip EXIF data during conversion. If you need to preserve metadata (copyright info, geolocation for mapping applications), check whether your tool of choice retains it.

Can I convert WebP back to JPG? Yes. The quality will be slightly reduced since WebP itself used lossy compression. If you need to convert back and maintain quality, convert at a high WebP quality setting (95%+) before converting back to JPG.