{"id":1417,"date":"2026-09-03T12:09:35","date_gmt":"2026-09-03T06:39:35","guid":{"rendered":"https:\/\/cpanelfree.com\/blog\/how-to-convert-serve-webp-avif-images-wordpress\/"},"modified":"2026-09-03T12:32:03","modified_gmt":"2026-09-03T07:02:03","slug":"how-to-convert-serve-webp-avif-images-wordpress","status":"publish","type":"post","link":"https:\/\/cpanelfree.com\/blog\/how-to-convert-serve-webp-avif-images-wordpress\/","title":{"rendered":"How to Automatically Convert and Serve WebP & AVIF Images in WordPress"},"content":{"rendered":"
\n

\n Quick Answer:<\/strong> To automatically convert and serve next-gen WebP and AVIF images in WordPress without manual coding, install LiteSpeed Cache<\/strong> (with QUIC.cloud integration) or the free Converter for Media<\/strong> plugin. Enable automatic conversion on upload and configure Nginx \/ .htaccess<\/code> rewriting to serve WebP\/AVIF dynamically to modern browsers.\n <\/p>\n<\/div>\n

Why Next-Gen Image Formats are Crucial for Core Web Vitals (LCP)<\/h2>\n

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

Delivering WebP and AVIF directly optimizes your Largest Contentful Paint (LCP)<\/strong> metric, one of Google’s core ranking signals.<\/p>\n

Option 1: Automated Server-Level Conversion with LiteSpeed Cache<\/h2>\n

If your WordPress site runs on LiteSpeed or OpenLiteSpeed, conversion is handled automatically via cloud workers:<\/p>\n

    \n
  1. Navigate to LiteSpeed Cache > Image Optimization<\/strong>.<\/li>\n
  2. Click Gather Image Data<\/strong> followed by Send Optimization Request<\/strong>.<\/li>\n
  3. Under Image Optimization Settings<\/strong>, set Create WebP Versions<\/strong> to ON<\/code> and Image WebP Replacement<\/strong> to ON<\/code>.<\/li>\n<\/ol>\n

    Option 2: Free Local Conversion with “Converter for Media” Plugin<\/h2>\n

    For Nginx and Apache servers, the Converter for Media<\/strong> plugin converts existing and upcoming uploads locally using your server’s native cwebp<\/code> \/ GD library:<\/p>\n

    # Ensure PHP GD and Imagick support WebP and AVIF on Linux VPS\nsudo apt install php8.3-gd php8.3-imagick webp libavif-bin -y\nsudo systemctl restart php8.3-fpm<\/pre>\n
    Nginx Server-Level WebP & AVIF Content Negotiation Rule<\/h2>\n
    Serve WebP and AVIF transparently without modifying your HTML markup by inspecting the client’s Accept<\/code> HTTP header in Nginx:<\/p>\n
    # Map Accept header to next-gen extension\nmap $http_accept $webp_suffix {\n    default \"\";\n    \"~*webp\" \".webp\";\n}\n\nlocation ~* \\.(png|jpe?g)$ {\n    add_header Vary Accept;\n    try_files $uri$webp_suffix $uri =404;\n}<\/pre>\n
    Comparison: WebP vs AVIF vs JPEG XL Compression Efficiency<\/h2>\n
    To understand why Google strongly advocates next-gen formats, review the real-world compression ratios achieved across 10,000 photographic test images:<\/p>\n\n\n\n\n\n\n\n
    Format<\/th>\nCompression Ratio vs JPEG<\/th>\nBrowser Support<\/th>\nEncoding CPU Cost<\/th>\n<\/tr>\n<\/thead>\n
    AVIF (.avif)<\/td>\n65% – 85% Smaller<\/td>\n93.5% (Chrome, Safari, Firefox)<\/td>\nHigh (Best for Cloud Workers)<\/td>\n<\/tr>\n
    WebP (.webp)<\/td>\n35% – 50% Smaller<\/td>\n97.2% Universal Support<\/td>\nLow \/ Instantaneous<\/td>\n<\/tr>\n
    Standard JPEG (.jpg)<\/td>\nBaseline (100%)<\/td>\n100% Universal<\/td>\nBaseline<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Automating WebP & AVIF via Apache .htaccess Mod_Rewrite<\/h2>\n
    If running Apache or LiteSpeed web servers, place these rewrite rules in your root .htaccess<\/code> file to deliver WebP\/AVIF without changing media URLs:<\/p>\n
    <IfModule mod_rewrite.c>\n  RewriteEngine On\n  RewriteCond %{HTTP_ACCEPT} image\/webp\n  RewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\n  RewriteRule ^(wp-content\/uploads\/.*)\\.(jpe?g|png)$ $1.webp [T=image\/webp,E=accept:1,L]\n<\/IfModule><\/pre>\n
    Preserving EXIF Metadata and Color Profiles in E-Commerce<\/h2>\n
    When compressing product photography, configure your optimization plugin to preserve sRGB ICC color profiles to prevent color shifting on mobile OLED displays.<\/p>\n
    Lossless vs Lossy WebP Compression: Finding the Perfect Balance<\/h2>\n
    When configuring image optimization plugins, selecting the appropriate quality compression factor is critical for balancing visual aesthetics and file size reduction:<\/p>\n