How to Automatically Convert and Serve WebP & AVIF Images in WordPress

Why Next-Gen Image Formats are Crucial for Core Web Vitals (LCP)

Images account for over 65% of total page weight on typical websites. Traditional JPEG and PNG formats contain obsolete compression dictionaries. WebP (developed by Google) reduces file sizes by 30%–50% compared to JPEG, while AVIF (based on the AV1 video codec) achieves up to 80% smaller file sizes at identical perceptual visual quality.

Delivering WebP and AVIF directly optimizes your Largest Contentful Paint (LCP) metric, one of Google’s core ranking signals.

Option 1: Automated Server-Level Conversion with LiteSpeed Cache

If your WordPress site runs on LiteSpeed or OpenLiteSpeed, conversion is handled automatically via cloud workers:

1. Navigate to LiteSpeed Cache > Image Optimization.
2. Click Gather Image Data followed by Send Optimization Request.
3. Under Image Optimization Settings, set Create WebP Versions to ON and Image WebP Replacement to ON.

Option 2: Free Local Conversion with “Converter for Media” Plugin

For Nginx and Apache servers, the Converter for Media plugin converts existing and upcoming uploads locally using your server’s native cwebp / GD library:

# Ensure PHP GD and Imagick support WebP and AVIF on Linux VPS
sudo apt install php8.3-gd php8.3-imagick webp libavif-bin -y
sudo systemctl restart php8.3-fpm

Nginx Server-Level WebP & AVIF Content Negotiation Rule

Serve WebP and AVIF transparently without modifying your HTML markup by inspecting the client’s Accept HTTP header in Nginx:

# Map Accept header to next-gen extension
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

location ~* \.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

Comparison: WebP vs AVIF vs JPEG XL Compression Efficiency

To understand why Google strongly advocates next-gen formats, review the real-world compression ratios achieved across 10,000 photographic test images:

Automating WebP & AVIF via Apache .htaccess Mod_Rewrite

If running Apache or LiteSpeed web servers, place these rewrite rules in your root .htaccess file to deliver WebP/AVIF without changing media URLs:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule ^(wp-content/uploads/.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1,L]
</IfModule>

Preserving EXIF Metadata and Color Profiles in E-Commerce

When compressing product photography, configure your optimization plugin to preserve sRGB ICC color profiles to prevent color shifting on mobile OLED displays.

Lossless vs Lossy WebP Compression: Finding the Perfect Balance

When configuring image optimization plugins, selecting the appropriate quality compression factor is critical for balancing visual aesthetics and file size reduction:

• Quality Factor 80–85%: The recommended industry sweet spot for photography and blog illustrations. Achieves 70% to 80% file size reduction with zero visible compression artifacts on standard and Retina displays.
• Lossless Mode: Essential for vector graphics, transparent PNG logos, and technical UI screenshots where sharp line art and crisp typography must be preserved without blur.
• Maximum Dimensions Capping: Automatically downscale uploaded mobile camera photos (which often exceed 4000×3000 pixels) to a maximum width of 1920 pixels on upload, instantly saving 80% disk storage before encoding.

Verifying Next-Gen Format Delivery in Browser Developer Tools

To confirm that your server is serving WebP or AVIF images correctly, open Chrome DevTools (F12), navigate to the Network tab > Img filter, and inspect the Type and Content-Type headers. A properly configured server will display image/webp or image/avif even when the URL displays .jpg.

Automating WebP and AVIF Generation via WP-CLI Batch Commands

If you are migrating an established website with over 50,000 existing media library attachments, running image conversion through a browser interface will trigger PHP timeout errors. Use WP-CLI to execute batch conversions directly in the server background:

# Regenerate and convert all WordPress media attachments to WebP/AVIF
wp media regenerate --yes --allow-root

# Bulk convert all uploads using cwebp command-line utility
find /var/www/html/wp-content/uploads/ -type f \( -name "*.jpg" -o -name "*.png" \) -exec sh -c 'cwebp -q 82 "$1" -o "${1%.*}.webp"' _ {} \;

Configuring Next-Gen Image Formats on Cloudflare Polish & Edge Workers

If your website routes through Cloudflare Pro or Enterprise, you can enable Cloudflare Polish with WebP / AVIF delivery at the edge. Cloudflare automatically inspects incoming browser headers, transcodes uncompressed JPEG/PNG images on the fly, and caches next-gen WebP/AVIF assets across global edge nodes with zero local server CPU overhead.

Frequently Asked Questions