How to Convert an Image to WebP (and Why You Should)

If you've run a Google PageSpeed Insights test and gotten the warning "Serve images in next-gen formats", Google is asking for exactly this: converting your JPG and PNG images to WebP. It's one of the highest-impact changes for a site's performance — and also one of the simplest to implement.

Why convert to WebP?

WebP is a format developed by Google and launched in 2010, designed specifically for the web. It uses more modern compression algorithms than JPG and PNG and offers, at the same visual quality:

• 25–35% less weight than JPG in lossy mode
• 20–30% less weight than PNG in lossless mode
• Alpha channel (transparency) support — unlike JPG, which doesn't have it
• Animation support — unlike PNG, which doesn't have it natively

In practice, the impact is real. An e-commerce product gallery with 20 photos at 300 KB each in JPG (6 MB total) can drop to 4 MB in WebP at the same visual quality — a 33% reduction in page weight. For Google, that means a faster LCP, a better PageSpeed score, and a potential ranking boost.

When not to use WebP

Despite being the best format for the modern web, there are situations where WebP still isn't the right choice:

• Email marketing: email clients like Outlook and Apple Mail have inconsistent WebP support. For HTML emails, JPG and PNG remain safer.
• Print graphics: print shops and traditional printing software don't work with WebP. For files meant for printing, use high-quality JPG or PNG.
• Platforms with format restrictions: YouTube doesn't accept WebP for thumbnail uploads (it accepts JPG and PNG). Some legacy system forms require JPG. Check the accepted format before converting.
• Files that need to be opened by anyone on a computer: end users who click download links and try to open the file in Windows' default viewer may run into issues with WebP on older versions of the system.

Method 1 — Online conversion (fastest, nothing to install)

To convert one-off images — or when you need a quick result without configuring anything — an online converter is the most direct route. The ImageTools Image Converter converts JPG, PNG and other formats to WebP directly in the browser, with no files uploaded to external servers.

1. Open the Image Converter.
2. Select or drag the images onto the upload area.
3. Choose WebP as the output format.
4. Download the converted images individually, or as a ZIP if there are multiple files.

Method 2 — WordPress (automatic for the whole site)

For WordPress sites, the most efficient approach is using a plugin that converts and serves WebP automatically — with no need to manually reprocess each image.

WordPress 6.1+ (native conversion)

Starting with version 6.1, WordPress converts images to WebP automatically on upload, as long as the server supports the libwebp library (most modern servers with PHP 8+ do). You don't need to do anything — WordPress generates WebP versions of images and serves the right format to each browser automatically.

To check if it's active: go to Settings → Media and look for the WebP conversion option. If it isn't available, the server doesn't support it — consider a plugin.

With plugins (older versions or more control)

The most-used plugins for WebP conversion in WordPress are:

• ShortPixel Image Optimizer — converts new images on upload and has an option to reprocess the entire existing library. Free up to 100 images/month.
• Imagify — simple interface, automatic conversion, and batch optimization option. Free plan available.
• WebP Express — a plugin focused specifically on WebP, converts and configures server rules automatically.

Method 3 — Command line with cwebp (for developers)

Google freely distributes the cwebp tool — the official WebP encoder — for conversion via terminal. It's the fastest method for converting large batches of images on a server or build pipeline.

Installation

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — download the binary at: https://developers.google.com/speed/webp/download

Basic conversion

# Convert a JPG file to WebP at quality 80
cwebp -q 80 photo.jpg -o photo.webp

# Convert PNG to lossless WebP
cwebp -lossless logo.png -o logo.webp

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

The -q parameter controls quality (0–100). For the web, values between 75 and 85 offer the best balance between visual quality and file size. Use -lossless for images that need lossless compression (logos, screenshots with text).

Method 4 — Node.js with sharp (for build pipelines)

For projects using Node.js — like sites built with Next.js, Gatsby, Nuxt, or any automated build — the sharp library is the most efficient option for WebP conversion in a pipeline:

// npm install sharp

const sharp = require('sharp');

// Convert JPG to WebP at quality 80
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// Convert PNG to lossless WebP
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Convert every file in a folder
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp uses the native libvips library and is significantly faster than pure JavaScript solutions — ideal for generating WebP versions during a static site build.

How to implement WebP with fallback for older browsers

Although WebP compatibility in 2026 is above 97%, there can still be contexts where a fallback is needed — corporate systems with IE11, very old devices, or simply for maximum compatibility assurance.

The correct solution is the HTML <picture> tag, which lets you declare alternative image sources in order of preference:

<!-- The browser uses WebP if supported, otherwise falls back to JPG -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo description" width="800" height="600">
</picture>

<!-- With multiple sizes for Retina screens -->
<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    type="image/jpeg">
  <img src="photo-800.jpg" alt="Photo description"
    width="800" height="600" loading="lazy">
</picture>

The browser evaluates the sources in the declared order: if it supports WebP, it uses the <source> with type="image/webp". If not, it falls back to the JPG in <img>. The <img> tag at the end is mandatory — it defines the alt, dimensions, and default behavior.

Configuring the server to serve WebP automatically (Apache)

An alternative to <picture> is configuring the server to detect whether the browser accepts WebP and serve the correct version automatically. In Apache, add this to .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve .webp if it exists and the browser accepts it
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

With this configuration, you just need the .webp files side by side with the originals in the same folder. Apache detects whether the browser accepts WebP via the Accept header and serves the correct version with no changes to the HTML.

Checking the result in PageSpeed

After implementing WebP, run Google PageSpeed Insights (pagespeed.web.dev) on your site's URL. The "Serve images in next-gen formats" warning should disappear or shrink significantly. In the opportunities panel, you'll see the estimated KB savings for each image not yet converted.

Another way to check: open Chrome DevTools (F12), go to the Network tab, filter by "Img", and look at the "Type" column for loaded images. If it shows webp, the conversion is working.

What quality level should you use in the conversion?

WebP quality follows the same logic as JPG: higher values preserve more detail but produce larger files. The difference is that, for the same visual quality, WebP typically uses a quality value 10–15 points lower than the equivalent JPG.

Frequently asked questions