How to convert images to WebP (and when not to)

WebP is an image format created by Google that, at equivalent visual quality, usually produces files 25 % to 35 % smaller than JPEG, and considerably smaller than PNG when the image has transparency. Converting an image to WebP means re-encoding it with a WebP encoder (in the browser, the terminal or code) and serving it with <picture> or directly with <img>, since every current browser supports it.

This article covers what WebP is, three ways to convert images, how to serve them correctly in HTML and the cases where it is better not to use it.

What WebP is

WebP is an image format with lossy compression (like JPEG) and lossless compression (like PNG), which also supports transparency (alpha channel) and animation (like GIF). Google released it in 2010 and the official documentation still lives at developers.google.com/speed/webp.

What matters for a website is simple: with WebP you can replace JPEG, PNG and GIF with a single, more efficient format without changing how the image looks.

How much you can realistically save

Google states in its documentation that lossy WebP images are 25 % to 34 % smaller than JPEG at an equivalent quality index, and that lossless WebP images are around 26 % smaller than PNG. The actual saving depends on the image: a detailed photograph compresses worse than a screenshot with flat areas.

As a practical reference, while preparing this article the article’s own cover image (a 1200×630 PNG graphic with text and gradients) was converted with sharp. These were the resulting sizes:

Format and setting	Size
Original PNG	35 KB
Lossless WebP	28 KB
Lossy WebP, quality 80	24 KB
JPEG quality 85 (same image)	50 KB
WebP quality 85 (from the JPEG)	30 KB

It is a single example, not a statistic, but it illustrates two things: lossless WebP already trims a PNG, and for a graphic with text JPEG is by far the worst option.

Three ways to convert images to WebP

1. In the browser, with nothing to install

If you only need to convert a few images, the quickest option is an online tool that runs in your browser. On AIMRAN Tools you can convert images to WebP (and to AVIF, PNG or JPG) by dragging the file in; the conversion happens on your device, so the image is never uploaded to a server.

This is the right choice for article images, a logo or a one-off screenshot.

2. In the terminal with cwebp

cwebp is the official encoder. Install it with your system’s package manager (apt install webp on Debian/Ubuntu, brew install webp on macOS) and use it like this:

# Quality 80 (a good balance for photographs)
cwebp -q 80 photo.jpg -o photo.webp

# Lossless (screenshots, graphics, logos with transparency)
cwebp -lossless logo.png -o logo.webp

# Convert every JPG in a folder
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

The -q parameter goes from 0 to 100. Between 75 and 85 is usually the sensible range for photographs; below 60, artefacts start to show in gradients and edges.

3. In Node.js with sharp

If you generate images in a build process (for example, in a static site), sharp is the most widely used library:

import sharp from 'sharp';

await sharp('input.jpg')
  .resize({ width: 1200, withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('output.webp');

The advantage of doing it at build time is that you can resize and convert in the same step, and generate several widths for srcset. Frameworks such as Astro, Next.js or Nuxt already integrate sharp in their image components.

How to serve WebP in HTML

Simple option: a plain <img>

According to Can I use, WebP is supported in Chrome, Edge, Firefox, Safari (since version 14, from 2020) and the main mobile browsers. If you do not need to support browsers older than 2020, you can use <img> directly:

<img src="/img/photo.webp" alt="Description of the photo" width="1200" height="800" loading="lazy" decoding="async" />

Note width and height: declaring them lets the browser reserve the space before the image downloads and avoids layout shifts, one of the problems measured by the Core Web Vitals.

Option with a fallback: <picture>

If you also want to offer AVIF (even more efficient) or keep a JPEG fallback, use <picture>:

<picture>
  <source srcset="/img/photo.avif" type="image/avif" />
  <source srcset="/img/photo.webp" type="image/webp" />
  <img src="/img/photo.jpg" alt="Description of the photo" width="1200" height="800" loading="lazy" decoding="async" />
</picture>

The browser picks the first source whose type it supports. The final <img> is mandatory: it is what gets displayed and where the alt, dimensions and loading go.

When not to convert to WebP

• If you already serve AVIF. AVIF compresses better than WebP for most photographs. WebP remains useful as an intermediate fallback in <picture>.
• Images users will download and edit. If you offer a resource for someone to open in an editor, PNG or JPEG is more compatible with desktop software.
• Tiny images. A 2 KB icon does not justify an extra format; an SVG is often the best option.
• Re-compressing a heavily compressed JPEG. If the original already has artefacts, re-compressing it to lossy WebP stacks them up. Always start from the highest-quality file available.

Common mistakes

1. Converting without resizing. A 4000-pixel-wide WebP is still huge. Reduce to the maximum display width first.
2. Using lossless for photographs. Lossless mode on photos produces files larger than the original JPEG. Keep it for graphics, screenshots and logos.
3. Forgetting the alt. Changing the format does not change the obligation to describe the image for those who cannot see it.
4. Deleting the originals. Keep the source files: if you later move to AVIF or another format, you will need the best possible quality as a starting point.

Conclusion

Converting images to WebP is one of the best effort-to-benefit optimisations for a website: fewer bytes, the same visible quality and universal support in current browsers. For a handful of images, a browser tool such as the one on AIMRAN Tools is enough; for projects with many images, automate the conversion with cwebp or sharp in the build, always declare width, height and alt, and use <picture> if you want to add AVIF in front.