Images account for 50-70% of total page weight on most WooCommerce product pages. WooCommerce image optimisation can reduce that by 60-80% with WebP conversion, and further reduce perceived load time by correctly setting loading=lazy on below-fold images and fetchpriority=high on the LCP image. These are not optional nice-to-haves — since Google made Core Web Vitals a ranking signal, WooCommerce image optimisation directly affects organic search visibility. See our WooCommerce Core Web Vitals fix guide for the full CWV context.

WooCommerce image optimisation — WebP conversion, responsive srcset, LCP priority, lazy loading and CDN delivery by CodeAtoZ

WebP is the highest-impact single change in any WooCommerce image optimisation project. WebP images are 60-80% smaller than equivalent JPEGs at the same visual quality. Every major browser has supported WebP since 2022, so there is no compatibility concern. The easiest approach is to use a WordPress plugin that auto-converts uploads: Imagify, ShortPixel, or Smush Pro all convert on upload and serve WebP via <picture> tags with JPEG fallback. Alternatively, enable automatic WebP conversion at CDN level — Cloudflare’s Polish feature does this for free on all plans.

// Auto-convert uploaded images to WebP (requires Imagick with WebP support)
add_filter('wp_handle_upload', function($upload) {
    if (in_array($upload['type'], ['image/jpeg', 'image/png'])) {
        $image = new Imagick($upload['file']);
        $image->setImageFormat('webp');
        $image->setImageCompressionQuality(82);
        $webp_path = preg_replace('/.(jpe?g|png)$/i', '.webp', $upload['file']);
        $image->writeImage($webp_path);
    }
    return $upload;
});

The LCP (Largest Contentful Paint) image on a WooCommerce product page is almost always the main product image — and it must never be lazy-loaded. Setting loading=lazy on the LCP image is the number one WooCommerce image optimisation mistake. Lazy loading delays the browser from fetching the LCP image until it enters the viewport, which directly increases LCP time. Set the main product image to loading=eager and add fetchpriority=high to tell the browser to download it immediately during the preload scan. For all below-fold images — additional product gallery thumbnails, related products, review images — use loading=lazy.

WordPress automatically generates srcset for registered image sizes and WooCommerce registers its own sizes: woocommerce_thumbnail, woocommerce_single, and woocommerce_gallery_thumbnail. For WooCommerce image optimisation, audit which image sizes are actually used by your theme and remove unused ones with remove_image_size(). Every registered size generates an additional file on upload — unnecessary sizes waste disk space and media upload time. Use Google PageSpeed Insights or WebPageTest to confirm your images are using the correctly-sized srcset variant for each device. Our WooCommerce performance team includes image optimisation in all site speed audits. See our full WooCommerce caching guide for the complementary caching layer.

// In functions.php or a plugin — remove sizes not used by your theme
add_action('init', function() {
    remove_image_size('1536x1536'); // WordPress default — rarely needed
    remove_image_size('2048x2048'); // WordPress default — rarely needed
    // Keep WooCommerce sizes unless you override them:
    // woocommerce_thumbnail, woocommerce_single, woocommerce_gallery_thumbnail
});

// Regenerate thumbnails after changing registered sizes:
// wp media regenerate --only-missing