Convert Images to WebP and AVIF: Complete Implementation Guide
Moderate 19 min 2026-03-20

Convert Images to WebP and AVIF: Complete Implementation Guide

Quick Summary

  • What this covers: Reduce image file sizes by 30-60% without quality loss using WebP and AVIF formats. Includes conversion tools, fallback strategies, and CDN setup.
  • Who it's for: site owners and SEO practitioners
  • Key takeaway: Read the first section for the core framework, then use the specific tactics that match your situation.

WebP and AVIF are modern image formats that deliver 30-60% smaller file sizes than JPEG and PNG while maintaining equivalent visual quality. Google prioritizes fast-loading pages in rankings, and image optimization represents the largest opportunity for most sites—images typically consume 60-70% of total page weight. Converting legacy JPEG/PNG images to WebP or AVIF improves Largest Contentful Paint (LCP), reduces bandwidth costs, and accelerates mobile page loads.

Why WebP and AVIF Outperform Legacy Formats

WebP developed by Google achieves 25-35% smaller file sizes than JPEG through advanced compression algorithms. It supports both lossy and lossless compression plus transparency like PNG but with significantly better compression ratios. AVIF developed by the Alliance for Open Media delivers 40-60% smaller files than JPEG and 20-30% smaller than WebP through even more sophisticated compression based on the AV1 video codec.

Browser support determines format adoption. WebP enjoys 97% browser support as of 2026 including all modern versions of Chrome, Firefox, Safari, Edge, and mobile browsers. AVIF support reached 88% in 2025 with adoption in Chrome 85+, Firefox 93+, Safari 16+, and Edge 121+. Sites implementing these formats with proper fallbacks see immediate PageSpeed Insights score improvements and faster Core Web Vitals metrics.

Format Selection Decision Matrix

Choose formats based on image characteristics and browser support requirements.

Use AVIF for: Photographic images, hero images, feature graphics, any image where maximum compression matters. AVIF excels at complex photographic content with gradients and textures, delivering superior compression compared to WebP and JPEG.

Use WebP for: Broad compatibility when AVIF support isn't critical, icons and logos requiring transparency, animated images replacing GIF. WebP provides excellent compression with wider browser support than AVIF.

Keep PNG for: Simple graphics with few colors, images requiring lossless transparency with broad compatibility, screenshots with text requiring perfect fidelity. PNG still serves specific use cases where newer formats don't provide advantages.

Keep JPEG for: Email marketing images, images embedded in PDF documents, contexts where serving WebP/AVIF isn't possible. JPEG remains the universal fallback format.

Conversion Tools and Workflows

Multiple tools convert legacy images to modern formats. Choose based on scale, automation requirements, and quality preferences.

Squoosh for Individual Images

Squoosh (squoosh.app) from Google provides a browser-based conversion interface with side-by-side quality comparison. Upload an image, select WebP or AVIF output, adjust quality sliders while previewing visual differences, then download the converted file.

Squoosh excels for one-off conversions and quality testing. The visual comparison interface helps identify the lowest acceptable quality setting that maintains visual fidelity, maximizing compression without perceptible quality loss.

ImageMagick for Batch Conversion

ImageMagick command-line tool handles bulk conversion with scriptable parameters. Install via package manager (brew install imagemagick on Mac, apt install imagemagick on Ubuntu), then convert entire directories.

Convert all JPEG files to WebP maintaining 82% quality:

find ./images -name "*.jpg" -exec convert {} -quality 82 {}.webp \;

Convert to AVIF with quality 75:

find ./images -name "*.jpg" -exec convert {} -quality 75 {}.avif \;

Batch rename to remove double extensions:

rename 's/\.jpg\.webp$/.webp/' *.jpg.webp

ImageMagick integrates into build processes and deployment pipelines for automated conversion during site builds.

cwebp and avifenc CLI Tools

cwebp and avifenc are dedicated encoding tools with finer control than ImageMagick.

Install cwebp (WebP encoder):

brew install webp

Convert with optimized settings:

cwebp -q 82 -m 6 input.jpg -o output.webp

The -m 6 parameter enables maximum compression effort, producing smaller files at the cost of longer encoding time. Use -m 6 for production images, -m 4 for faster encoding during development.

Install avifenc (AVIF encoder):

brew install libavif

Convert with quality 75 and speed 4:

avifenc -s 4 -q 75 input.jpg output.avif

The -s parameter controls encoding speed from 0 (slowest, best compression) to 10 (fastest, larger files). Use -s 4 for balanced encoding suitable for production.

WordPress Conversion Plugins

WordPress sites use plugins for automated conversion without command-line tools.

WebP Express converts images on upload, generates WebP versions automatically, serves WebP to supporting browsers with htaccess rules. Install via Plugins > Add New, search "WebP Express", activate, configure delivery method as "Varied image responses" for proper Content-Type headers.

EWWW Image Optimizer handles both WebP and AVIF conversion plus lazy loading. Configure to convert images on upload and replace existing images with optimized versions. Free tier limits to 1GB monthly conversions; paid tier removes limits.

ShortPixel offers cloud-based conversion with AVIF support and adaptive serving. Configure to automatically convert on upload and generate multiple formats for browser compatibility. Includes CDN delivery in paid tiers.

Automated Build Pipeline Conversion

For static sites and headless CMS setups, integrate conversion into build processes.

Next.js includes automatic image optimization via next/image component:

import Image from 'next/image'

<Image 
  src="/hero.jpg"
  width={1200}
  height={630}
  alt="Hero image"
  formats={['avif', 'webp']}
/>

Next.js automatically generates AVIF and WebP versions, serves the optimal format based on browser support, and implements lazy loading.

Eleventy with @11ty/eleventy-img plugin:

const Image = require("@11ty/eleventy-img");

async function imageShortcode(src, alt) {
  let metadata = await Image(src, {
    formats: ["avif", "webp", "jpeg"],
    outputDir: "./dist/img/"
  });
  
  return Image.generateHTML(metadata, {alt});
}

This generates multi-format versions and proper picture element markup during build.

Serving Modern Formats with Fallbacks

Browsers that don't support WebP or AVIF need fallback to JPEG or PNG. Implement using HTML picture element or server-side content negotiation.

Picture Element Method

The <picture> element provides declarative format fallbacks with browser selecting the first supported format:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Browsers evaluate sources in order. Chrome 85+ selects AVIF. Safari 14-15 selects WebP. IE11 falls back to JPEG. The <img> tag provides universal fallback and anchor for alt text and lazy loading.

Picture Element with Responsive Images

Combine format selection with responsive sizing:

<picture>
  <source 
    srcset="hero-large.avif 1200w, hero-small.avif 600w" 
    type="image/avif"
    sizes="(max-width: 768px) 600px, 1200px">
  <source 
    srcset="hero-large.webp 1200w, hero-small.webp 600w" 
    type="image/webp"
    sizes="(max-width: 768px) 600px, 1200px">
  <img 
    srcset="hero-large.jpg 1200w, hero-small.jpg 600w"
    sizes="(max-width: 768px) 600px, 1200px"
    src="hero-large.jpg" 
    alt="Hero image">
</picture>

This markup serves AVIF on desktop and mobile where supported, falls back to WebP, then JPEG, with appropriate sizing for viewport width.

Server-Side Content Negotiation

Serve different formats from the same URL based on Accept header. Cloudflare, Nginx, and Apache support this approach.

Cloudflare Polish (requires paid plan) automatically converts and serves WebP/AVIF based on browser support. Enable via Speed > Optimization > Polish > Lossy/Lossless.

Nginx configuration:

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

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

This configuration serves .webp version if it exists and browser accepts WebP format.

Apache htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

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

This approach requires generating WebP versions with matching filenames: image.jpg and image.jpg.webp in the same directory.

Quality Settings and Compression Testing

Finding optimal quality settings balances file size reduction against visual quality preservation.

WebP Quality Guidelines

WebP quality 75-85 provides near-identical visual quality to JPEG quality 90-95 with 25-35% smaller files. Test specific images to find the threshold where compression artifacts become visible.

For photographic images, start at quality 82. For images with text or sharp edges, use quality 85 to preserve clarity. For background images where perfect fidelity isn't critical, try quality 75.

AVIF Quality Guidelines

AVIF quality 60-75 matches or exceeds JPEG quality 90 visual appearance. AVIF's more sophisticated compression allows lower quality settings without visible degradation.

Start testing at quality 65 for most photographic images. Use quality 75 for images with fine details or text. Try quality 55 for background images.

Visual Quality Testing

Use Squoosh side-by-side comparison to identify the minimum acceptable quality setting. Upload original JPEG, convert to WebP at quality 82, toggle between original and converted to spot differences. If no visible differences appear, reduce quality by 5 points and test again until artifacts become visible. Use the last artifact-free setting.

Repeat this process with several representative images from your site since optimal settings vary by image content. Hero images, product photos, and content images may require different quality levels.

File Size Analysis

Track file size reductions across format conversions to measure impact. Export image inventory showing original format, file size, and proposed WebP/AVIF size.

Average size reductions by format transition:

Calculate total page weight reduction by summing image savings. A page with 2MB of JPEG images converting to AVIF at 50% reduction saves 1MB, directly improving LCP and total page size.

CDN Implementation for Modern Formats

Content Delivery Networks provide automatic format conversion and serving without modifying site code.

Cloudflare Image Optimization

Cloudflare Image Resizing and Polish automatically serve optimized formats. Enable Polish under Speed > Optimization. Configure Image Resizing via Workers:

export default {
  async fetch(request) {
    return fetch(request, {
      cf: {
        image: {
          format: 'auto',
          quality: 82
        }
      }
    });
  }
}

The format: 'auto' parameter serves AVIF to supporting browsers, WebP as fallback, and JPEG for legacy browsers.

Cloudinary Dynamic Conversion

Cloudinary converts images on-the-fly via URL parameters:

<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg">

The f_auto parameter automatically selects AVIF, WebP, or JPEG based on browser support. The q_auto parameter optimizes quality settings per image content analysis.

ImageKit Automatic Format Selection

ImageKit serves optimized formats from existing URLs with transformation parameters:

<img src="https://ik.imagekit.io/demo/sample.jpg?tr=f-auto,q-80">

ImageKit CDN serves AVIF to supporting browsers, with automatic fallback chains to WebP then JPEG.

WordPress Implementation Details

WordPress sites require plugin configuration or theme modification to serve modern formats.

WebP Express Configuration

After installing WebP Express, configure delivery method. "Varied image responses" serves WebP from original URLs using htaccess rewrite rules. "Alter HTML" replaces image tags with picture elements. "Only for webp-enabled browsers" serves WebP only to supporting browsers.

Enable "Convert on upload" to automatically generate WebP versions when uploading new images. Use "Bulk convert" to process existing media library images. Configure quality at 82 for photographs, 85 for screenshots or images with text.

ShortPixel AVIF Configuration

ShortPixel supports AVIF generation. After installation, navigate to Settings > ShortPixel. Enable "Create also WebP" and "Create also AVIF". Configure "Deliver the next generation versions using picture tags" to implement proper fallbacks.

Set compression to Lossy for maximum savings or Glossy for balanced quality-size tradeoff. Process existing images via Media Library bulk actions > Optimize with ShortPixel.

Monitoring and Validation

After implementing modern formats, verify proper serving and measure performance impact.

Browser DevTools Network Tab

Open Chrome DevTools Network tab and reload pages. Filter to Images. Verify that images show Content-Type: image/avif or image/webp in response headers. Check file sizes comparing original JPEG sizes to served format sizes.

If images still serve as JPEG despite implementation, check Accept request header includes image/avif or image/webp. Verify server configuration properly detects and responds to Accept header.

PageSpeed Insights Validation

Run PageSpeed Insights before and after implementing modern formats. "Serve images in next-gen formats" warning should disappear post-implementation. LCP metric should improve as hero image file size decreases. Overall performance score typically increases 5-15 points from format conversion alone.

Core Web Vitals Impact

Monitor Largest Contentful Paint in Google Search Console under Core Web Vitals report. Images converted to AVIF/WebP load faster, directly improving LCP measurements. Pages previously in "Needs improvement" or "Poor" categories often move to "Good" after image optimization.

Track mobile vs desktop improvements separately since mobile connections benefit more from reduced image sizes. Mobile LCP improvements often exceed desktop improvements by 20-30%.

Frequently Asked Questions

Should I delete original JPEG images after converting to WebP/AVIF?

Keep original JPEG/PNG files as fallback sources. Serving architecture requires fallback images for browsers without WebP/AVIF support and for contexts like email clients where modern formats don't work. Storage cost is minimal compared to bandwidth savings from serving optimized formats to 95% of users.

What quality setting should I use for WebP conversion?

Start with quality 82 for photographic images and 85 for images containing text or sharp edges. Test visually using Squoosh side-by-side comparison to verify quality is acceptable before deploying. Different image types and use cases may require adjusting quality settings between 75-90 based on tolerance for compression artifacts versus file size priorities.

Does Google rank AVIF/WebP images higher in image search?

Google doesn't directly favor AVIF or WebP in image search rankings. However, faster page load times from smaller image sizes improve overall page rankings, which indirectly benefits image findability. Image search prioritizes image quality, relevance, context, and hosting page authority over format. Focus format optimization on page speed rather than image search ranking.

Can I use AVIF for all images or only some?

Implement AVIF site-wide with proper fallbacks for maximum benefit. The picture element or content negotiation approach serves AVIF to supporting browsers while automatically falling back to WebP or JPEG for other browsers. There's no downside to universal AVIF implementation when fallbacks are configured correctly.

How do I convert animated GIFs to WebP?

Use Ezgif online converter (ezgif.com/gif-to-webp) for individual animated GIFs or ffmpeg command-line tool for batch conversion. WebP supports animation with much better compression than GIF. However, AVIF doesn't support animation as of 2026, so animated content must use WebP or fallback to GIF.

For related optimization techniques, see fix-largest-contentful-paint-lcp.html to improve LCP through image and resource optimization. Implement defer-javascript-without-breaking-site.html to further improve loading performance. For CDN configuration, reference cdn-setup-guide-speed-optimization.html. Monitor improvements using core-web-vitals-audit-checklist.html.

When This Fix Isn't Your Priority

Skip this for now if:

This is one piece of the system.

Built by Victor Romo (@b2bvic) — I build AI memory systems for businesses.

See The Full System View Repo
← All Fixes