How to Convert and Serve WebP Images on Your Website

WebP is a modern image format developed by Google that delivers superior compression compared to JPEG and PNG at equivalent perceptual quality. Converting your images to WebP can cut their file size by 25–35%, directly speeding up page load and improving metrics like LCP (Largest Contentful Paint).

This guide covers how to convert images to WebP, how to serve them correctly with fallbacks for older browsers, and how to automate the process in WordPress.

What Is WebP and Why Use It?

WebP combines lossy compression (like JPEG) and lossless compression (like PNG) in a single format. It also supports transparency (alpha channel) and animation, making it versatile for any kind of web image.

Quick format comparison:

WebP is supported in over 97% of browsers in active use, so it's already safe to use as your primary format with a simple fallback for the small remaining percentage.

How to Convert Images to WebP

Option 1: Online Tools (No Installation)

Squoosh (squoosh.app) is the easiest approach: drag in an image, select WebP as the output format, set quality to around 80 (usually the sweet spot), and download. You can compare before and after in real time.

Other popular choices: Convertio and CloudConvert, which are handy for batch conversions without installing software.

Option 2: Command Line with cwebp

cwebp is Google's official conversion tool. On Linux and macOS you can install it via your system package manager. Basic usage:

cwebp -q 80 original-image.jpg -o output-image.webp

To batch-convert all JPEG files in a directory:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Option 3: WordPress Plugin

If your site runs on WordPress, these plugins convert and serve WebP automatically:

• Imagify: converts on upload and bulk-converts your existing media library. Free plan available with monthly limits.
• ShortPixel: cloud-based conversion with excellent quality and free monthly credits.
• WebP Express: converts server-side using PHP's native GD or Imagick library. Completely free.

How to Serve WebP with Fallbacks for Older Browsers

Even with broad support, including a fallback is good practice. The cleanest method is the HTML5 <picture> element:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive image alt text" width="800" height="600">
</picture>

The browser automatically picks WebP if it's supported; otherwise it loads the JPEG. No JavaScript or feature detection needed.

Server-Side Fallback with Apache (.htaccess)

If you'd rather not change your HTML and want WebP served transparently from the server, add this to your .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  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>

This checks whether the browser sends Accept: image/webp and whether the equivalent .webp file exists on disk. If both conditions are met, the WebP version is served transparently without any change to your HTML.

For more professional performance strategies, explore the resources at elenlace.com.

Impact on Core Web Vitals and SEO

Images are often the heaviest resource on a page. Reducing their size with WebP has a direct effect on:

• LCP (Largest Contentful Paint): if your hero image or main product photo is in WebP, the time to paint that element decreases.
• Total Blocking Time: fewer bytes to transfer frees up bandwidth for critical JavaScript.
• PageSpeed Insights score: Google explicitly recommends WebP in the "Serve images in next-gen formats" audit.

For a deeper dive into performance metrics and image strategies, check out our web performance category.

Key Takeaways

• WebP reduces image file size by 25–35% compared to JPEG at equivalent visual quality.
• Browser support exceeds 97%, making it safe to use as your primary format today.
• Use the <picture> element with an <img> fallback for full compatibility without JavaScript.
• In WordPress, plugins like Imagify or ShortPixel automate the entire conversion and delivery process.
• Serving WebP directly improves LCP and PageSpeed Insights scores, which benefits SEO.

Want a specialist team to handle image optimization and site performance for you? The experts at elenlace.com can implement WebP and other technical improvements so your site loads faster and ranks higher.

FAQ

Is WebP supported in all browsers?

Yes, in over 97% of browsers currently in active use, including Chrome, Firefox, Safari (since 2020), Edge, and Opera. The small remaining percentage (some older IE and very old Safari versions) can receive the original JPEG or PNG using the <picture> element as a fallback.

What quality setting should I use when converting to WebP?

For photographs and images with gradients, a quality value between 75 and 85 offers the best balance between file size and visual quality. For images with text or sharp-edged graphics, try quality 90 first; WebP's lossless mode is also a valid option for those cases.

Do I need to keep the original JPEG/PNG files after converting to WebP?

Yes, especially if you use the <picture> fallback method or Apache rewrite rules. The originals act as a fallback for browsers that don't support WebP and as a source of truth for future reconversions if you need to adjust quality settings.

Should I use WebP or AVIF?

AVIF offers even higher compression (40–50% vs JPEG), but browser support (~95%) and conversion tooling are less mature. The most robust approach today is to serve AVIF first, WebP as the second option, and JPEG/PNG as the last resort inside a <picture> element. For most projects, however, WebP as the primary format is more than sufficient.

Further reading

Other providers and guides worth comparing:

• IONOS
• GoDaddy
• HostGator México