Should I use AVIF or WebP for WordPress images?

In 2026, AVIF is the better choice where browser support allows it. AVIF achieves 30–50% smaller file sizes than WebP at equivalent quality. WordPress 6.5+ generates AVIF automatically. Since AVIF has ~93% browser support, serving AVIF with WebP fallback via the element is the optimal strategy. WordPress handles this automatically when both formats are enabled.

Does lazy loading affect Core Web Vitals?

Lazy loading should never be applied to the LCP image – the image most likely to be visible in the viewport on initial page load. WordPress applies loading='lazy' automatically since version 5.5, but since version 6.3 it also adds fetchpriority='high' to the first image in content. Make sure your LCP image is not marked as lazy, and that it is preloaded with fetchpriority=high.

How many image sizes does WordPress create by default?

WordPress core creates four sizes by default: thumbnail (150×150), medium (300×300 max), medium_large (768px wide), and large (1024×1024 max). Themes and plugins add more. On a typical WooCommerce installation, 8–12 image size variants per uploaded image are common. Disabling unused sizes with add_filter('intermediate_image_sizes_advanced', ...) reduces storage use and upload processing time.

What is the best WordPress plugin for image optimization?

For most sites, Imagify, ShortPixel, or Smush are reliable choices. All three offer automatic optimization on upload, bulk processing of existing images, and WebP/AVIF conversion. Cloudflare Polish is a good alternative for sites already behind Cloudflare, as it converts and compresses images at the CDN edge without touching your server files.

Know-how

WordPress Image Optimization – AVIF, WebP, Lazy Loading, and Core Web Vitals

Published: May 20, 2026 · Author: Marcin Szewczyk-Wilgan

Images account for 40–60% of a typical web page's total byte weight. On WordPress sites, unoptimized images are the single most common cause of poor Core Web Vitals scores – particularly Largest Contentful Paint. The good news is that image optimization is one of the highest-ROI performance improvements you can make: the techniques are well established, the tooling in 2026 is excellent, and the impact on LCP is immediate and measurable.

Modern Image Formats – AVIF and WebP

Serving images in the right format is the first and most impactful optimization step. The era of JPEG and PNG as defaults is over for web use.

AVIFAVIF (AV1 Image File Format) delivers 30–50% smaller files than WebP at equivalent perceptual quality, and 50–70% smaller than JPEG. WordPress 6.5 (April 2024) added native AVIF upload support. Browser support reached approximately 93% globally by mid-2026. AVIF is the best format for photographs and complex images.

WebPWebP has been supported in WordPress since version 5.8 (2021). It delivers 25–34% smaller files than JPEG with comparable quality. Browser support is essentially universal (96%+). Use WebP as a fallback when AVIF is not supported, and as the primary format if you cannot enable AVIF server-side.

<picture> elementWordPress automatically generates <picture> elements with AVIF as the first source and WebP as a fallback when both formats are enabled. Browsers pick the first format they support. You do not need to manage this manually – it works transparently through wp_get_attachment_image() and the_post_thumbnail().

SVG for graphicsFor logos, icons, and line art, SVG is always the better choice. It is resolution-independent, infinitely scalable, and typically far smaller than any raster equivalent. WordPress does not allow SVG uploads by default for security reasons; plugins like Safe SVG add proper sanitization and upload support.

When to keep JPEG/PNGJPEG remains appropriate for email thumbnails and contexts requiring maximum compatibility. PNG is still the right choice for images requiring lossless quality or transparent backgrounds where AVIF artifacts would be visible. For everything else, switch to AVIF/WebP.

srcset and sizes – Serving the Right Dimensions

Format optimization reduces bytes per pixel. The srcset and sizes attributes ensure you are not sending a 1920px image to a mobile device displaying it at 390px.

srcset

Multiple resolution variants

WordPress automatically generates a srcset attribute listing all available size variants of an image, with their widths in pixels. The browser then picks the most appropriate size based on the display width and device pixel ratio. This works correctly for all images inserted via the block editor or theme functions.

sizes

Telling the browser the display width

The sizes attribute tells the browser how wide the image will be rendered before it downloads it. WordPress generates a reasonable default, but for images in complex layouts (CSS Grid, multi-column) the default may be inaccurate. Incorrect sizes causes browsers to download larger images than needed.

Registered sizes

Controlling what WordPress generates

WordPress core registers four default sizes. Themes and plugins add more. You can register custom sizes with add_image_size() and remove unused ones with the intermediate_image_sizes_advanced filter. Each registered size generates a file on disk for every uploaded image, so fewer active sizes means less storage and faster uploads.

Regeneration

Rebuilding thumbnails after changes

Changing registered image sizes does not automatically resize existing images. Use WP-CLI (wp media regenerate) or the Regenerate Thumbnails plugin to rebuild all thumbnails. On large media libraries, run this from the command line to avoid browser timeouts.

Lazy Loading and fetchpriority

WordPress 5.5 (August 2020) added loading="lazy" to images automatically. WordPress 6.3 (August 2023) added fetchpriority="high" to the first in-content image. These two attributes work together to prioritize what matters and defer what does not.

loading="lazy"Defers downloading images below the fold until the user scrolls toward them. Reduces initial page weight and speeds up above-the-fold rendering. WordPress applies this to all images except the first in-content image since 6.3. Never apply lazy loading to your LCP image – it delays the most important visual element and directly hurts your LCP score.

fetchpriority="high"Added in WordPress 6.3, this attribute tells the browser to fetch the image early, before completing HTML parsing. It is added automatically to the first image in the_content() and to the_post_thumbnail() when it is the first image on the page. For pages where the LCP element is a hero image outside the content area (e.g., in the theme header), you may need to add this attribute manually or via a plugin.

Preload for LCP imagesFor critical above-the-fold images, adding a <link rel="preload"> tag in the <head> alongside fetchpriority="high" provides the most reliable early fetch. This is particularly effective for hero images defined in CSS (background-image) rather than HTML, which the browser's preload scanner cannot otherwise discover early.

Decoding="async"The decoding="async" attribute allows the browser to decode image data off the main thread, reducing the risk of layout jank during image rendering. WordPress adds this automatically. It is most beneficial for large images on content-heavy pages.

Compression and Quality Settings

Format and dimensions determine the theoretical size floor; compression settings determine how close to that floor you actually get.

WordPress default qualityWordPress compresses JPEG images to 82% quality by default (since version 4.5). This is a reasonable default that balances size and quality well for most use cases. You can adjust it with the jpeg_quality filter. Values between 75 and 85 are generally the sweet spot for web images – below 70 introduces visible artifacts, above 85 adds size without noticeable quality gain.

AVIF qualityAVIF quality in WordPress 6.5+ defaults to 82% for uploads processed by the server-side GD library. Unlike JPEG, AVIF at 82% looks significantly better than JPEG at the same setting because of the superior compression algorithm. Quality values of 60–75 are often indistinguishable from originals for web display.

Lossless vs lossyFor photographs, lossy compression is always appropriate. For graphics with flat colors, text, or line art (screenshots, diagrams, illustrations), lossless WebP or PNG preserves clarity. Applying lossy compression to this type of image introduces visible artifacts around text edges and color boundaries.

Third-party optimizationPlugins like Imagify, ShortPixel, and Smush send images to external APIs for compression beyond what server-side GD or Imagick libraries can achieve. ShortPixel's lossy algorithm typically produces files 20–30% smaller than WordPress's built-in compression at comparable quality. Worth the processing overhead for image-heavy sites.

WooCommerce Image Optimization

WooCommerce sites face an amplified version of the image optimization problem. Product catalogs often contain hundreds of images, each processed into multiple sizes. Getting this right matters for both performance and storage.

WooCommerce sizes

Default product image dimensions

WooCommerce registers three image sizes by default: woocommerce_thumbnail (the catalog grid image), woocommerce_single (the product page main image), and woocommerce_gallery_thumbnail (the small thumbnail strip). Dimensions are configurable in WooCommerce → Settings → Products → Images. Set these based on your theme's actual display dimensions to avoid serving oversized images.

Product gallery

Lazy loading gallery images

Product gallery images (all images beyond the first) are excellent candidates for lazy loading. The visitor sees the main product image immediately; additional gallery shots load only when they scroll to or click them. Ensure your theme or WooCommerce gallery JavaScript handles lazy-loaded images correctly after a swap.

Catalog performance

Category pages with many products

Category pages displaying 24, 48, or more products can have enormous total image weight. Combine srcset for responsive sizing with lazy loading for below-the-fold products. The first row of products (visible on initial load) should not be lazy loaded – they contribute directly to LCP measurement.

CDN for product images

Offloading media delivery

For WooCommerce stores with large product catalogs, serving images via a CDN (Cloudflare, BunnyCDN, or Amazon CloudFront) dramatically reduces server load and improves delivery speed for geographically distributed customers. Combine CDN delivery with Cloudflare Polish (automatic WebP/AVIF conversion at the edge) for maximum effect.

Practical Checklist

Work through this checklist to assess and improve image performance on any WordPress site:

FormatEnable AVIF and WebP generation (WordPress 6.5+ with GD/Imagick, or via Imagify/ShortPixel plugin). Verify the page source shows <picture> elements with AVIF/WebP sources.

LCP imageIdentify the LCP element in PageSpeed Insights. Confirm it has fetchpriority="high" and does NOT have loading="lazy". Add a <link rel="preload"> in the head if it is a CSS background image.

DimensionsCheck that no image is served significantly larger than its displayed dimensions. Use browser DevTools (right-click → Inspect → check intrinsic vs rendered size) or PageSpeed Insights' "Properly size images" audit.

Unused sizesAudit registered image sizes with wp media image-size --fields=name,width,height --format=table via WP-CLI. Remove unused sizes to reduce upload processing time and storage.

Bulk optimizationRun your optimization plugin's bulk processing tool on existing media. Large libraries may take hours – run WP-CLI commands with nohup or as a background process to avoid timeouts.

Summary

Image optimization in WordPress is a solved problem in 2026 – the format support, tooling, and WordPress core integrations are all mature. AVIF with WebP fallback, properly configured srcset/sizes, lazy loading for below-the-fold images, and fetchpriority for the LCP element will reliably move you from a failing Core Web Vitals score to a passing one in most cases. The key is applying these techniques systematically and verifying results in PageSpeed Insights field data, not just lab scores.