WebP and AVIF Images in WordPress: A Practical Guide

If your WordPress already serves pages fast but Google or PageSpeed still flags images as the problem, the format is almost always the culprit. A JPEG or PNG uploaded straight from the camera or the designer weighs much more than necessary. This guide explains what you gain with WebP and AVIF, how to migrate without breaking anything, and which mistakes to avoid.

WebP and AVIF: what they are and how they differ

Both are modern image compression formats designed for the web. The idea is the same: display a visually equivalent image with fewer bytes.

• WebP: it's the most compatible format today. Practically all current browsers support it and it's the safe default option.
• AVIF: it usually compresses better than WebP, especially in photographs, but encoding it takes more time and not all older environments handle it.

The real savings depend on each image and the quality you choose, so don't trust promises of fixed percentages: measure with your own photos.

Why it matters for performance

On most sites, images are the heaviest resource on the page. A large image in the visible area is usually the element that defines the LCP (Largest Contentful Paint), one of the Core Web Vitals metrics. Reducing the weight of that file directly speeds up that metric, something we already covered in our Core Web Vitals guide.

The right way to serve them: <picture>

You shouldn't replace the JPEG with an AVIF blindly. The robust way is to use the <picture> tag with multiple sources:

• First the AVIF source.
• Then the WebP.
• Finally the original <img> as a fallback.

The browser takes the first one it understands. If it doesn't support any modern one, it uses the original and the visitor never sees a broken image.

Attributes you shouldn't forget

• width and height to avoid layout shifts (CLS).
• loading="lazy" on off-screen images, but not on the main image at the top.
• Descriptive alt: it's also SEO and accessibility.

How to migrate without headaches

• Start with the pages that get the most traffic: homepage, service pages, and flagship products.
• Choose quality with judgment: a very low quality saves bytes but shows in gradients and text inside the image. Try several levels and compare at a glance.
• Keep the originals. If the recommended format ever changes, you want to be able to regenerate from the source.
• Check the result on mobile, where image weight is most noticeable.

Common mistakes

• Uploading 4000 px images to display them at 800 px. No format fixes an absurd size: resize first.
• Converting and forgetting the responsive versions (srcset), which means mobile downloads the desktop version.
• Applying lazy load to the main image and making LCP worse.
• Serving AVIF without a fallback for browsers that don't understand it.

Where cache fits in

Optimizing images and caching pages are complementary improvements: cache prevents the server from having to build the page on every visit, and lightweight images make what's downloaded afterward minimal. At cache.lat, in addition to serving static HTML, image optimization to AVIF/WebP with the format and quality you choose and rewriting to <picture> are part of the plugin; you can see the details in the technical data and understand the full mechanism in how it works.

If you want someone to review your specific case, you can write to us from the TuNegocioEnLinea.net contact page.

Quick checklist

• Resize images to the maximum real size of use.
• Convert to WebP or AVIF with a visually tested quality.
• Serve them with <picture> and a fallback.
• Set width/height and don't lazy load the main image.
• Measure before and after with PageSpeed Insights using the same URL.

With these steps, most WordPress sites cut a significant part of their page weight without changing anything the visitor sees.