How to Optimize Images with WebP and AVIF

WebP and AVIF are modern image formats that drastically reduce file sizes without sacrificing quality. Here’s why they matter:

• WebP: Reduces image sizes by 25–34% compared to JPEG and 26% compared to PNG. It’s fast to encode/decode and supports transparency, animation, and lossy/lossless compression.
• AVIF: Offers even smaller file sizes (up to 50% smaller than JPEG) and better image quality with HDR support, higher color depth, and fewer artifacts. It’s slower to process but ideal for high-quality visuals.

Why use them?

• Faster load times = lower bounce rates. For example, converting to WebP can cut page size by 77%.
• Better SEO: Google prioritizes sites using these formats.
• Broad browser support: WebP (~97%) and AVIF (~89%) are widely compatible, with fallback options for older browsers.

How to implement:

1. Convert images using tools like cwebp, avifenc, or GUI tools like Squoosh.
2. Use <picture> elements in HTML to serve the best format with fallbacks.
3. Automate with WordPress plugins like CompressX or EWWW Image Optimizer.
4. Leverage CDNs for automatic format delivery and optimization.

Key takeaway: Use AVIF for the smallest size and best quality, WebP for speed and compatibility, and fallback to JPEG/PNG for unsupported browsers. Combine formats for the best results.

WebP and AVIF Format Basics

What Are WebP and AVIF?

WebP, introduced by Google in 2010, is a modern image format designed to combine the best features of traditional formats like JPEG and PNG. It supports lossy and lossless compression, transparency, and animation – all in one package. This makes it a solid choice for optimizing images on the web while maintaining high visual quality and reducing file sizes.

AVIF (AV1 Image File Format), launched in 2019 by the Alliance for Open Media, takes things a step further. It offers exceptional compression efficiency and enhanced image quality. Features like HDR support, a wide color gamut, and higher color depths make AVIF particularly appealing for sites that prioritize image fidelity, such as photography or e-commerce platforms.

Both formats aim to shrink file sizes, leading to faster page loading, better user experiences, and improved SEO. However, they differ in their strengths: WebP is known for its speed in encoding and decoding, making it ideal for scenarios requiring quick image processing, while AVIF focuses on maximum compression and superior image quality, though it can be slower to process.

Both formats significantly reduce file sizes compared to older formats. WebP achieves notable improvements over JPEG and PNG, while AVIF offers even greater compression. For instance, lossy WebP can produce transparent images up to three times smaller than PNG, and animated AVIF files can reduce sizes by around 86% compared to GIFs.

"AVIF is a new type of image file that’s better than JPEG and is approximately 50% smaller than WebP. This makes AVIF images load faster on your live site. AVIF can also handle a wide range of colors, making images look even more realistic."

• Wix

Next, we’ll dive deeper into how these formats compare so you can decide which is the best fit for your website.

WebP vs. AVIF: Comparison Table

Here’s a side-by-side look at the main differences between WebP and AVIF:

Choosing between WebP and AVIF depends on your specific needs. WebP offers a strong balance of compression, quality, and near-universal browser support, making it a reliable choice for most websites. On the other hand, AVIF is the go-to option when you need the smallest possible file sizes and the highest image quality. Many developers use a layered approach: serving AVIF to browsers that support it, falling back to WebP for others, and sticking with JPEG or PNG for older browsers.

The Best Image Format, from AVIF to WebP to JPG with Core Web Vitals and Progressive Enhancement

How to Prepare Images for Conversion

Get your images ready to boost performance while keeping your originals safe.

Choose Which Images to Convert

Not every image on your site needs conversion. Focus on those that have the greatest impact on performance. Desktop and mobile images often account for a huge chunk of total page weight. With nearly every website page containing images, and images being the most resource-heavy element on 80% of desktop sites (and 70% of mobile sites), smart selection matters.

Start with hero images and above-the-fold visuals since these are the first things users see. Their loading speed can make or break bounce rates and user experience. Other high-priority images include product photos for e-commerce, portfolio visuals for creatives, and large background images.

For high-resolution photos, AVIF is a strong choice. This format is great at preserving detail and color depth, handling up to 10–12 bit color. It’s especially effective for images with intricate details or large areas of solid color, offering significant file size reductions without sacrificing quality.

For web graphics, logos, and illustrations, WebP is a better fit. It supports transparency, animations, and works well with simpler visuals. Keep in mind your audience’s browser preferences – WebP has wide compatibility, while AVIF support is growing. Many sites use both formats, serving AVIF where possible and defaulting to WebP for browsers that don’t support it.

Avoid converting low-quality images, like subpar JPEGs, to WebP or AVIF. Doing so doubles the loss in quality. Always start with the best quality originals you have.

Once you’ve identified the right images, you’re ready to move on to the actual conversion.

Back Up Original Images

Before you start, make sure to back up your original images.

Set up an organized backup system with clearly labeled folders like "originals", "webp-converted", and "avif-converted." Keep a record of image specs so you can track changes and compare results.

Test your backups by restoring a few images to ensure they’re intact. Use reliable storage solutions like cloud services, external drives, or version control systems to keep your files safe.

It’s also a good idea to keep multiple versions of important images. For example, maintain high-resolution originals for print, web-optimized versions for current formats, and newly converted WebP or AVIF files. This approach gives you flexibility, especially when creating responsive image sets or serving different formats across devices.

Experiment with compression levels for both AVIF and WebP to strike the right balance between file size and quality for your specific needs. Taking these steps ensures your conversion process leads to faster load times and better SEO performance.

With your images chosen and backed up, you’re ready to start converting using tools like command-line utilities, GUI software, or CMS plugins.

Converting Images to WebP and AVIF

Once you’ve selected and backed up your images, it’s time to convert them. You can do this using one of three main methods: command-line tools, GUI-based software, or CMS plugins.

Using Command-Line Tools

Command-line tools are a powerful option, especially if you’re dealing with bulk image conversions. They provide precise control and save time when processing multiple files.

For WebP conversion, the cwebp tool is a reliable choice. It’s compatible with Linux, macOS, and Windows (via Cygwin). If you want to convert a single image with the highest quality, use this command:
cwebp -q 100 image.png -o image.webp.

To handle multiple images in one go, batch processing is your best bet. For example, to convert all PNG files in a folder to WebP format, run:
find . -type f -name "*.png" -exec cwebp -q 100 {} -o {}.webp \;.

For AVIF conversion, there are several tools available on Linux. The libavif-bin package offers a straightforward method with this command:
avifenc image.png image_avifenc.avif.

If you need more flexibility, ffmpeg is a great alternative. Use this command for AVIF conversion:
ffmpeg -i image.png -c:v libaom-av1 -crf 30 -pix_fmt yuv420p image_ffmpeg.avif.

For those using ImageMagick, you can convert images with:
convert image.png image_imagemagick.avif.

If reducing file size is a priority and you’re okay with some quality loss, try:
convert image.png -quality 20 -define avif:speed=10 image_imagemagick2.avif.

Adjusting quality settings (ranging from 0 to 100) allows you to find the right balance between file size and image detail. If this seems too technical, GUI-based tools provide a more user-friendly alternative.

Using GUI-Based Software

For those who prefer a visual approach, GUI tools make image conversion simple and intuitive. These tools are perfect for designers and content creators who enjoy drag-and-drop functionality.

One standout option is Squoosh, a free, browser-based tool that supports AVIF conversions. Just visit the Squoosh website, upload your image, and choose your output format. The tool provides real-time previews and file size comparisons, so you can easily tweak compression settings. Keep in mind, however, that Squoosh has a 4MB file size limit.

Another excellent choice is Cloudinary, which offers a free online converter for AVIF. It supports larger files than Squoosh and includes additional optimization features, all without requiring any coding knowledge.

For those who need editing capabilities alongside format conversion, GIMP with AVIF plugins is a solid option. After installing the required plugins, you can edit your images and export them directly to WebP or AVIF formats. This is especially useful if you need to make adjustments before converting.

The benefits of AVIF compression are impressive: it can reduce file sizes by 50% compared to JPG and 20% compared to WebP, all while maintaining excellent image quality. Just make sure the quality remains acceptable during compression.

For website owners, CMS plugins can automate the conversion process entirely.

Using WordPress and CMS Plugins

If you’re managing a website, plugins are a game-changer. They automate image conversion, optimizing both existing images and new uploads.

CompressX is a popular WordPress plugin that converts JPG and PNG images to WebP and AVIF formats directly on your site. It handles bulk conversions for your media library and processes new uploads automatically, ensuring all your images are optimized.

"CompressX converts JPG/PNG images on your WordPress website to WebP and AVIF formats, and compress WebP and AVIF images locally, for free!"

Another effective plugin is EWWW Image Optimizer, especially when paired with WP Offload Media. In tests, converting images to WebP reduced file sizes from 1.19 MB to 786 KB, saving nearly 33% in bandwidth. Load times also improved significantly, dropping from 1.54 seconds to 1.22 seconds after further compression.

Most high-quality plugins come with smart serving features. These detect the user’s browser and serve WebP or AVIF formats to compatible browsers, while providing fallback images for older ones. This is particularly useful since over 95% of users now have browsers that support WebP, and more than 90% support AVIF.

Key features of these plugins include bulk optimization for existing images, automatic conversion for new uploads, CDN integration for faster delivery, and the ability to exclude specific folders from conversion. Some even remove converted images if they end up larger than the originals, preventing unnecessary storage use.

To get the most out of these plugins, configure them to handle both WebP and AVIF formats. Set quality levels that balance file size and visual appeal, and enable automatic conversion for new uploads. These steps will help improve your site’s speed and enhance the user experience by reducing file sizes and load times.

sbb-itb-880d5b6

Adding WebP and AVIF to Your Website

Once your images are converted, the next step is integrating them into your site to ensure they work seamlessly across different browsers while boosting performance.

Using the <picture> Element and srcset Attribute

The <picture> element is a handy tool for serving next-generation image formats with fallback options. It allows browsers to pick the best format they support and fall back to a standard format if necessary.

Here’s an example of how you can implement WebP and AVIF images with fallbacks:

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

Here’s how it works: the browser evaluates each <source> element in order. If it supports AVIF, it will load that format. If not, it checks for WebP support. If neither is supported, the browser defaults to the JPEG image.

The type attribute is critical here – it specifies the MIME type (like image/avif or image/webp), enabling browsers to skip unsupported formats without downloading them first.

"The <img> element serves two purposes: 1. It describes the size and other attributes of the image and its presentation. 2. It provides a fallback in case none of the offered <source> elements are able to provide a usable image."
– MDN Web Docs

For responsive images, you can take this a step further by combining next-generation formats with different image sizes using the srcset and sizes attributes:

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

Here, the srcset attribute offers multiple image options based on size or pixel density, while the sizes attribute tells the browser how the image should be displayed. If you’re using width descriptors (like 480w), the sizes attribute is essential for proper functionality.

"Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match."
– W3Schools

The <img> element isn’t just a fallback – it also defines critical attributes like width, height, and alt text, ensuring accessibility and proper display.

Beyond implementing these formats in HTML, you can take things further by leveraging CDN solutions to enhance image delivery.

Using Hosting and CDN Solutions

Modern CDN solutions simplify the delivery of next-generation image formats while optimizing performance. These services can automatically detect browser capabilities and serve the best image format without requiring manual changes to your HTML.

CDNs use edge servers close to users, reducing load times through real-time optimizations. Some popular US-based CDN providers like Cloudflare Images, Cloudinary, and Fastly Image Optimizer offer automatic format detection. For example, if a user’s browser supports AVIF or WebP, the CDN delivers those formats. Otherwise, it falls back to JPEG or PNG.

Why is this important? Images typically account for about 38% of a webpage’s total weight. AVIF can reduce file sizes by up to 50% compared to JPEG while maintaining similar quality, and WebP images are generally 25–34% smaller than their JPEG equivalents.

Look for these features when choosing an Image CDN:

• Automatic detection and delivery of next-generation formats
• Responsive image generation and dynamic transformations like resizing or cropping
• Smart compression, quality optimization, and edge caching
• Security features like signed URLs, Content Security Policy (CSP) headers, and DDoS protection

To get the most out of your CDN, keep an eye on your cache hit ratio. If it drops below 90%, it may signal configuration issues. Adjust URL structures, cache headers, or asset versioning as needed. Using a stale-while-revalidate caching strategy can help by serving images immediately while updating them in the background. Be sure to set appropriate Time-To-Live (TTL) values to ensure users always see up-to-date content.

Testing and Validating Image Optimization

After integrating optimized images, it’s crucial to test and confirm the improvements using performance tools and direct evaluations. Ensure your WebP and AVIF implementations function properly to enhance browser compatibility and performance. Browser developer tools can help verify that optimized images are being delivered as intended.

Testing with Browser Developer Tools

Browser developer tools are a handy way to confirm the effectiveness of your image optimization. These tools let you inspect which image formats are being served and assess bandwidth usage.

To get started, press F12 to open the developer tools, then head to the Network tab and refresh your page. Filter by "Img" to check the image formats (like AVIF, WebP, or fallback formats) and their file sizes. Look for content type headers that confirm proper MIME types, such as image/avif or image/webp. You can also use the responsive view mode to simulate older browsers that may not support modern formats.

For example, Safari‘s Web Inspector is especially helpful for verifying WebP fallbacks since older Safari versions have limited AVIF support. Similarly, Microsoft Edge’s Issues tab offers additional insights, flagging potential problems with <picture> elements or fallback implementations.

Keep an eye on the waterfall chart in the developer tools. Optimized images should display smaller file sizes and faster download times. If you spot unusually long load times or larger files, it might indicate that fallback images are being loaded instead of the optimized ones.

Measuring Site Speed Improvements

Google PageSpeed Insights is a great tool for evaluating the impact of your image optimization efforts. If the test results no longer show the "Serve images in next-gen formats" recommendation, you’re on the right track. PageSpeed Insights also measures metrics like Largest Contentful Paint (LCP), which should ideally occur within 2.5 seconds for a smooth user experience.

WebP images are generally 25–35% smaller than JPEGs of similar quality, and lossless WebP images are about 26% smaller than PNGs. Tools like GTmetrix provide waterfall charts that highlight key metrics, such as Time to First Byte (TTFB) and fully loaded time. Google Search Console’s Core Web Vitals report offers real-world performance data segmented by device type, while WebPageTest allows testing under different network conditions from multiple US locations.

Currently, WebP is supported by approximately 96% of browsers, while AVIF has around 90–93% support. To ensure compatibility, pairing AVIF with WebP fallback is a smart approach, as it guarantees optimized images for older browsers.

To measure the success of your optimization, start by recording baseline metrics like PageSpeed Insights scores, average page load times, and image file sizes. After implementing WebP and AVIF images, compare these metrics to assess the performance gains.

Summary and Next Steps

WebP and AVIF are game-changers when it comes to improving website performance. These next-gen image formats can significantly shrink file sizes compared to older formats, leading to faster page loads, lower bandwidth costs, and a better overall user experience. The numbers back this up: websites using these formats can achieve up to a 40% reduction in load times, and retailers leveraging image CDNs have reported an average 15% boost in conversion rates.

To fully take advantage of these benefits, consider adopting a hybrid delivery approach. This means serving AVIF to browsers that support it and falling back to WebP for broader compatibility. The <picture> element with multiple <source> entries is your go-to solution here, ensuring every visitor gets the most optimized image format their browser can handle.

Start by focusing on high-impact visuals like hero images, product photos, and above-the-fold content. These are the visuals that most directly affect user experience and Core Web Vitals metrics, especially Largest Contentful Paint (LCP). Once those are optimized, you can gradually work through the rest of your image library. Automating this process is key – content delivery networks (CDNs) can detect browser capabilities and serve the best format automatically, making it easier to scale as your image inventory grows.

Use tools like PageSpeed Insights to track your performance. Pay close attention to metrics like LCP, file size, and load times, and tweak your settings as needed. A/B testing can help you strike the right balance between compression and image quality. Don’t forget to implement long-term browser caching, lazy loading for non-essential images, and preloading for critical visuals using the rel="preload" attribute.

FAQs

When should I use WebP or AVIF for my website’s images?

AVIF works wonders for images where compression efficiency and image quality are top priorities. It’s especially effective for photos with rich colors or detailed textures, delivering smaller file sizes that help boost page loading speeds and reduce bandwidth usage.

Meanwhile, WebP has broader browser support and quicker decoding, making it a reliable option for reaching a wide audience. To strike the right balance, you can use AVIF as your primary format and set WebP as a fallback for browsers that don’t support AVIF yet.

How can I ensure my images are compatible with all browsers when using WebP and AVIF formats?

To make sure your images work seamlessly across all browsers when using WebP and AVIF formats, it’s essential to include fallback options like JPEG or PNG for browsers that don’t support these newer formats. The HTML <picture> element is incredibly useful for this. It lets you define multiple image sources so browsers can automatically pick the format they support best.

While WebP is supported by most major browsers, including Chrome, Firefox, Safari, Edge, and Opera, AVIF is still gaining traction and isn’t universally supported yet. By implementing a fallback strategy, you ensure your images display properly for all users, regardless of their browser. This not only keeps your site visually consistent but also helps boost performance and load times.

Is there a way to automate converting and using WebP and AVIF images on my website?

Yes, it’s possible to automate the process of converting and using WebP and AVIF images, making your website optimization much easier. You can use tools like WordPress plugins or cloud-based services to handle the conversion automatically when you upload images or to serve optimized versions dynamically.

For those using WordPress, plugins are a convenient option. They can convert images either during the upload process or on-the-fly as needed. Alternatively, cloud-based services and software tools offer batch processing and can integrate seamlessly into your workflow. These approaches not only save you time but also enhance your site’s speed and improve the overall user experience – all without the need for constant manual intervention.

Related posts

• Core Web Vitals: Image Delivery Best Practices
• Ultimate Guide to Automating Image Optimization
• Ultimate Guide to Shopify Image Optimization 2025
• 2025 Guide to Image Resizing for SEO