{"id":597,"date":"2025-09-15T22:11:58","date_gmt":"2025-09-15T22:11:58","guid":{"rendered":"https:\/\/www.pofii.com\/blog\/?p=597"},"modified":"2025-09-15T22:18:39","modified_gmt":"2025-09-15T22:18:39","slug":"woocommerce-image-speed-webp-avif-correct-sizes-lazy-load","status":"publish","type":"post","link":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/","title":{"rendered":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Why_images_slow_WooCommerce_and_how_well_fix_it\" >Why images slow WooCommerce (and how we\u2019ll fix it)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_1_%E2%80%94_Set_the_right_WooCommerce_image_sizes\" >Step 1 \u2014 Set the right WooCommerce image sizes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Where_to_change_sizes\" >Where to change sizes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Regenerate_after_changing_sizes\" >Regenerate after changing sizes<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_2_%E2%80%94_Use_next-gen_formats_WebPAVIF_with_fallback\" >Step 2 \u2014 Use next-gen formats (WebP\/AVIF) with fallback<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Three_simple_ways_to_serve_next-gen\" >Three simple ways to serve next-gen<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_3_%E2%80%94_Lazy-load_correctly_and_prioritize_LCP\" >Step 3 \u2014 Lazy-load correctly (and prioritize LCP)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Rules_of_thumb\" >Rules of thumb<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_4_%E2%80%94_Give_the_browser_good_hints_srcset_sizes_preload\" >Step 4 \u2014 Give the browser good hints (srcset, sizes, preload)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_5_%E2%80%94_CDN_rules_that_actually_help_stores\" >Step 5 \u2014 CDN rules that actually help stores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_6_%E2%80%94_Fix_CLS_in_product_galleries\" >Step 6 \u2014 Fix CLS in product galleries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Step_7_%E2%80%94_Validate_the_wins_takes_5_minutes\" >Step 7 \u2014 Validate the wins (takes 5 minutes)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Minimal_checklist\" >Minimal checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#Troubleshooting_fast_fixes\" >Troubleshooting (fast fixes)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#FAQ\" >FAQ<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-why-images-slow-woocommerce-and-how-we-ll-fix-it\"><span class=\"ez-toc-section\" id=\"Why_images_slow_WooCommerce_and_how_well_fix_it\"><\/span>Why images slow WooCommerce (and how we\u2019ll fix it)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Oversized thumbnails<\/strong> \u2192 you ship 2000px where 400\u2013800px would do.<\/li>\n\n\n\n<li><strong>Wrong format<\/strong> \u2192 PNG\/JPEG when <strong>WebP\/AVIF<\/strong> cut bytes by 30\u201360%.<\/li>\n\n\n\n<li><strong>Lazy-load everything<\/strong> \u2192 your <strong>LCP image<\/strong> gets lazy-loaded (don\u2019t).<\/li>\n\n\n\n<li><strong>Missing width\/height<\/strong> \u2192 layout shifts (CLS).<\/li>\n\n\n\n<li><strong>CDN misconfig<\/strong> \u2192 caches ignore device size or the <code>Accept<\/code> header.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Goal:<\/strong> Serve <strong>exact-fit<\/strong> images in <strong>next-gen formats<\/strong>, load <strong>above-the-fold<\/strong> media early, and <strong>defer the rest<\/strong>\u2014with stable layout.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-set-the-right-woocommerce-image-sizes\"><span class=\"ez-toc-section\" id=\"Step_1_%E2%80%94_Set_the_right_WooCommerce_image_sizes\"><\/span>Step 1 \u2014 Set the <strong>right WooCommerce image sizes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You want three buckets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Catalog\/grid:<\/strong> 300\u2013480px on the longest edge (depends on your grid).<\/li>\n\n\n\n<li><strong>Single product (gallery\/hero):<\/strong> 800\u20131200px typical; 1400\u20131600px if your theme is full-width\/retina-heavy.<\/li>\n\n\n\n<li><strong>Thumbnails:<\/strong> 150\u2013300px.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-where-to-change-sizes\"><span class=\"ez-toc-section\" id=\"Where_to_change_sizes\"><\/span>Where to change sizes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block themes \/ Customizer<\/strong> \u2192 <em>Appearance \u2192 Customize \u2192 WooCommerce \u2192 Product Images<\/em> (or your theme\u2019s options).<\/li>\n\n\n\n<li>Many modern themes expose <strong>\u201cMain image width\u201d<\/strong> and <strong>\u201cThumbnail width.\u201d<\/strong> Pick values that match your layout (measure the actual rendered CSS width at desktop and mobile breakpoints).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-regenerate-after-changing-sizes\"><span class=\"ez-toc-section\" id=\"Regenerate_after_changing_sizes\"><\/span>Regenerate after changing sizes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WP-CLI:<\/strong> <code>wp media regenerate --yes<\/code><\/li>\n\n\n\n<li>Or use a lightweight regenerate plugin, run once, then deactivate.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Keep an eye on <strong>srcset<\/strong> that WordPress generates. Make sure the <strong>largest candidate<\/strong> isn\u2019t way beyond your container width.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-use-next-gen-formats-webp-avif-with-fallback\"><span class=\"ez-toc-section\" id=\"Step_2_%E2%80%94_Use_next-gen_formats_WebPAVIF_with_fallback\"><\/span>Step 2 \u2014 Use <strong>next-gen formats<\/strong> (WebP\/AVIF) with fallback<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WebP<\/strong>: Great default\u2014widely supported, small files.<\/li>\n\n\n\n<li><strong>AVIF<\/strong>: Even smaller at the same quality (not always, but often).<\/li>\n\n\n\n<li><strong>Fallback<\/strong>: Keep a JPEG\/PNG fallback for rare edge cases (older Safari versions or specialty devices).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-three-simple-ways-to-serve-next-gen\"><span class=\"ez-toc-section\" id=\"Three_simple_ways_to_serve_next-gen\"><\/span>Three simple ways to serve next-gen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Your CDN transforms on the fly<\/strong> (ideal): honors the <code>Accept<\/code> header and returns WebP\/AVIF.<\/li>\n\n\n\n<li><strong>Server-level conversion<\/strong> (e.g., ImageMagick + rules) with content negotiation.<\/li>\n\n\n\n<li><strong>A lean plugin<\/strong> that generates WebP alongside JPEG and swaps sources on the front-end.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Must-haves:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CDN\/edge should <strong>vary<\/strong> cache by <code>Accept<\/code> (so WebP users get WebP).<\/li>\n\n\n\n<li>Keep <strong>EXIF stripping<\/strong> on for product shots unless your workflow needs metadata.<\/li>\n\n\n\n<li>Don\u2019t \u201cdouble-compress\u201d (avoid stacking two optimizers).<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-lazy-load-correctly-and-prioritize-lcp\"><span class=\"ez-toc-section\" id=\"Step_3_%E2%80%94_Lazy-load_correctly_and_prioritize_LCP\"><\/span>Step 3 \u2014 <strong>Lazy-load<\/strong> correctly (and prioritize LCP)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lazy-load is good\u2014until you lazy-load the <strong>hero<\/strong> product image. That\u2019s your <strong>LCP<\/strong>. Load it <strong>eagerly<\/strong> and tell the browser it\u2019s important.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n  src=\"\/images\/product-hero.webp\"\n  width=\"1200\" height=\"1200\"\n  fetchpriority=\"high\"\n  loading=\"eager\"\n  alt=\"Product name\"\n\/&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-rules-of-thumb\"><span class=\"ez-toc-section\" id=\"Rules_of_thumb\"><\/span>Rules of thumb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Only the first, above-the-fold image<\/strong> gets <code>loading=\"eager\"<\/code> + <code>fetchpriority=\"high\"<\/code>.<\/li>\n\n\n\n<li><strong>Everything else<\/strong> (gallery thumbs, related products, below-fold images) \u2192 <code>loading=\"lazy\"<\/code>.<\/li>\n\n\n\n<li>Provide <strong>width and height<\/strong> (or use CSS <code>aspect-ratio<\/code>) to prevent CLS.<\/li>\n\n\n\n<li>For carousels, lazy-load <strong>off-screen slides<\/strong> only; prefetch the <strong>next<\/strong> slide if it appears quickly.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-4-give-the-browser-good-hints-srcset-sizes-preload\"><span class=\"ez-toc-section\" id=\"Step_4_%E2%80%94_Give_the_browser_good_hints_srcset_sizes_preload\"><\/span>Step 4 \u2014 Give the browser <strong>good hints<\/strong> (<code>srcset<\/code>, <code>sizes<\/code>, preload)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress emits <code>srcset<\/code> automatically; ensure your theme supplies a <strong>realistic <code>sizes<\/code><\/strong> attribute so the browser picks the right candidate:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n  src=\"\/images\/product-hero-1200.webp\"\n  srcset=\"\/images\/product-hero-800.webp 800w,\n          \/images\/product-hero-1200.webp 1200w,\n          \/images\/product-hero-1600.webp 1600w\"\n  sizes=\"(max-width: 768px) 90vw, (max-width: 1200px) 70vw, 1200px\"\n  width=\"1200\" height=\"1200\"\n  fetchpriority=\"high\" loading=\"eager\" alt=\"Product name\"\n\/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Preload<\/strong> the exact hero size if your theme is certain about it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" as=\"image\"\n      href=\"\/images\/product-hero-1200.webp\"\n      imagesrcset=\"\/images\/product-hero-800.webp 800w, \/images\/product-hero-1200.webp 1200w\"\n      imagesizes=\"(max-width: 1200px) 70vw, 1200px\"&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-5-cdn-rules-that-actually-help-stores\"><span class=\"ez-toc-section\" id=\"Step_5_%E2%80%94_CDN_rules_that_actually_help_stores\"><\/span>Step 5 \u2014 <strong>CDN rules<\/strong> that actually help stores<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resize at edge<\/strong>: If your CDN supports on-the-fly resizing, request the <strong>exact<\/strong> dimensions you render.<\/li>\n\n\n\n<li><strong>Vary on <code>Accept<\/code><\/strong>: Ensure cache keys separate WebP\/AVIF and JPEG.<\/li>\n\n\n\n<li><strong>Cache busting<\/strong>: Append a version query (e.g., <code>?v=2025-09<\/code>) on deploys to invalidate old variants.<\/li>\n\n\n\n<li><strong>Immutable static<\/strong>: Serve product gallery assets with long-lived <code>Cache-Control: public, max-age=31536000, immutable<\/code>.<\/li>\n\n\n\n<li><strong>Don\u2019t transform SVG product icons<\/strong> (leave them as is).<\/li>\n\n\n\n<li>No CDN? <a href=\"https:\/\/www.pofii.com\/blog\/what-is-cloudflare-and-how-to-get-maximum-out-of-it\/\">Learn with Pofii Insights how to add your website to Cloudflare CDN.<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-6-fix-cls-in-product-galleries\"><span class=\"ez-toc-section\" id=\"Step_6_%E2%80%94_Fix_CLS_in_product_galleries\"><\/span>Step 6 \u2014 Fix <strong>CLS<\/strong> in product galleries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Always output <strong>width\/height<\/strong> (or use CSS <code>aspect-ratio: 1\/1;<\/code>) on gallery slots.<\/li>\n\n\n\n<li>Avoid late-loading carousels that change layout height.<\/li>\n\n\n\n<li>Reserve space for <strong>badges<\/strong> (sale, discount) so they don\u2019t push text on load.<\/li>\n\n\n\n<li>Replace JS-injected image dimensions with static attributes when possible.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-7-validate-the-wins-takes-5-minutes\"><span class=\"ez-toc-section\" id=\"Step_7_%E2%80%94_Validate_the_wins_takes_5_minutes\"><\/span>Step 7 \u2014 Validate the wins (takes 5 minutes)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lighthouse (Chrome DevTools)<\/strong> \u2192 check <strong>LCP<\/strong> and <strong>CLS<\/strong> on a product page.<\/li>\n\n\n\n<li><strong>WebPageTest<\/strong> (3G\/4G profile) \u2192 confirm hero image is <strong>requested first<\/strong> and in <strong>WebP\/AVIF<\/strong>.<\/li>\n\n\n\n<li><strong>Network panel<\/strong> \u2192 verify byte size dropped and that <code>content-type<\/code> is correct.<\/li>\n\n\n\n<li><strong>Repeat view<\/strong> \u2192 ensure CDN hits and fast TTFB.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-minimal-checklist\"><span class=\"ez-toc-section\" id=\"Minimal_checklist\"><\/span>Minimal checklist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set Woo image sizes (catalog\/single\/thumb) to match layout<\/li>\n\n\n\n<li>Regenerate thumbnails<\/li>\n\n\n\n<li>Serve WebP\/AVIF with fallback; cache varies by <code>Accept<\/code><\/li>\n\n\n\n<li>Mark <strong>only<\/strong> hero\/LCP image as eager + <code>fetchpriority=\"high\"<\/code><\/li>\n\n\n\n<li>Lazy-load everything else<\/li>\n\n\n\n<li>Add <code>width<\/code>\/<code>height<\/code> (or <code>aspect-ratio<\/code>) to stop CLS<\/li>\n\n\n\n<li>Use sensible <code>sizes<\/code> with <code>srcset<\/code><\/li>\n\n\n\n<li><a href=\"https:\/\/www.pofii.com\/blog\/what-is-cloudflare-and-how-to-get-maximum-out-of-it\/\">Enable CDN<\/a> image resizing &amp; long cache headers<\/li>\n\n\n\n<li>Re-test LCP\/CLS after deploy<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-troubleshooting-fast-fixes\"><span class=\"ez-toc-section\" id=\"Troubleshooting_fast_fixes\"><\/span>Troubleshooting (fast fixes)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blurry thumbnails<\/strong> \u2192 Your theme is stretching small thumbs. Increase thumbnail size, regenerate, and ensure <code>srcset<\/code> includes a larger candidate.<\/li>\n\n\n\n<li><strong>AVIF\/WebP not served<\/strong> \u2192 CDN isn\u2019t varying by <code>Accept<\/code>, or a plugin is forcing JPEG. Fix cache key \/ plugin config.<\/li>\n\n\n\n<li><strong>CLS spike on PDP<\/strong> \u2192 Missing width\/height; gallery script changes layout height; badges injected late. Add static dimensions and reserve space.<\/li>\n\n\n\n<li><strong>Hero loads late<\/strong> \u2192 It\u2019s lazy-loaded or not prioritized. Set <code>loading=\"eager\"<\/code> + <code>fetchpriority=\"high\"<\/code> and consider preloading the exact candidate.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-faq\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WebP or AVIF\u2014what should I default to?<\/strong><br>Default to <strong>WebP<\/strong> for broad compatibility; enable <strong>AVIF<\/strong> when your CDN can negotiate by <code>Accept<\/code>. If AVIF fails, it should transparently fall back to WebP\/JPEG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Do I still need an image plugin if my CDN does transforms?<\/strong><br>Not necessarily. If your CDN handles resizing + next-gen <strong>at the edge<\/strong> and your theme emits good <code>srcset\/sizes<\/code>, keep plugins minimal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Will next-gen formats hurt SEO?<\/strong><br>No\u2014search engines crawl images fine. Improvements in <strong>LCP\/CLS<\/strong> often help overall page experience signals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How big should my product hero be?<\/strong><br>Aim for the <strong>rendered<\/strong> width: 800\u20131200px on most themes, 1400\u20131600px for wide, retina-forward designs. Don\u2019t ship 2\u20133\u00d7 more than your container.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your store looks great but LCP is slow and product pages feel heavy, your images are the culprit. This guide shows the fastest, low-risk path to fix WooCommerce images\u2014right sizes, next-gen formats, lazy-load + priority hints\u2014without piling on bloated plugins.<\/p>\n","protected":false},"author":5,"featured_media":664,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[222,220,218],"class_list":["post-597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","category-hosting","tag-image-optimization","tag-lazy-loading","tag-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat) - Pofii Insights<\/title>\n<meta name=\"description\" content=\"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)\" \/>\n<meta property=\"og:description\" content=\"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\" \/>\n<meta property=\"og:site_name\" content=\"Pofii Insights\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PofiiCOM\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-15T22:11:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T22:18:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"John Cavil\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@PofiiGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@PofiiGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Cavil\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\"},\"author\":{\"name\":\"John Cavil\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/82dd56bd4b7d1ae512907145b3a68873\"},\"headline\":\"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)\",\"datePublished\":\"2025-09-15T22:11:58+00:00\",\"dateModified\":\"2025-09-15T22:18:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\"},\"wordCount\":840,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png\",\"keywords\":[\"Image Optimization\",\"Lazy Loading\",\"WooCommerce\"],\"articleSection\":[\"eCommerce\",\"Hosting Tips &amp; Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\",\"url\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\",\"name\":\"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat) - Pofii Insights\",\"isPartOf\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png\",\"datePublished\":\"2025-09-15T22:11:58+00:00\",\"dateModified\":\"2025-09-15T22:18:39+00:00\",\"description\":\"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage\",\"url\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png\",\"contentUrl\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/nl.pofii.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#website\",\"url\":\"https:\/\/www.pofii.com\/blog\/\",\"name\":\"Pofii\",\"description\":\"Success Simplified.\",\"publisher\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pofii.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#organization\",\"name\":\"Pofii\",\"url\":\"https:\/\/www.pofii.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2024\/12\/cropped-cropped-pofiiinsights-2.png\",\"contentUrl\":\"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2024\/12\/cropped-cropped-pofiiinsights-2.png\",\"width\":2079,\"height\":221,\"caption\":\"Pofii\"},\"image\":{\"@id\":\"https:\/\/www.pofii.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/PofiiCOM\",\"https:\/\/x.com\/PofiiGlobal\",\"https:\/\/www.instagram.com\/PofiiGlobal\",\"https:\/\/www.linkedin.com\/company\/Pofii\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/82dd56bd4b7d1ae512907145b3a68873\",\"name\":\"John Cavil\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.pofii.com\/brand\/logo-icon-circle-friendly.png\",\"contentUrl\":\"https:\/\/www.pofii.com\/brand\/logo-icon-circle-friendly.png\",\"caption\":\"John Cavil\"},\"description\":\"WordPress Expert, Head of technical support at Pofii Ltd.\",\"sameAs\":[\"https:\/\/www.pofii.com\/blog\/author\/JohnC\"],\"url\":\"https:\/\/www.pofii.com\/blog\/author\/johnc\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat) - Pofii Insights","description":"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)","og_description":"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.","og_url":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/","og_site_name":"Pofii Insights","article_publisher":"https:\/\/www.facebook.com\/PofiiCOM","article_published_time":"2025-09-15T22:11:58+00:00","article_modified_time":"2025-09-15T22:18:39+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png","type":"image\/png"}],"author":"John Cavil","twitter_card":"summary_large_image","twitter_creator":"@PofiiGlobal","twitter_site":"@PofiiGlobal","twitter_misc":{"Written by":"John Cavil","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#article","isPartOf":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/"},"author":{"name":"John Cavil","@id":"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/82dd56bd4b7d1ae512907145b3a68873"},"headline":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)","datePublished":"2025-09-15T22:11:58+00:00","dateModified":"2025-09-15T22:18:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/"},"wordCount":840,"commentCount":0,"publisher":{"@id":"https:\/\/www.pofii.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png","keywords":["Image Optimization","Lazy Loading","WooCommerce"],"articleSection":["eCommerce","Hosting Tips &amp; Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/","url":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/","name":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat) - Pofii Insights","isPartOf":{"@id":"https:\/\/www.pofii.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage"},"image":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png","datePublished":"2025-09-15T22:11:58+00:00","dateModified":"2025-09-15T22:18:39+00:00","description":"Fix WooCommerce image speed fast: right sizes, WebP\/AVIF, lazy-load done right, stable LCP\/CLS, and edge caching for lighter, faster pages.","breadcrumb":{"@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#primaryimage","url":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png","contentUrl":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2025\/09\/woo-opt-2.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.pofii.com\/blog\/woocommerce-image-speed-webp-avif-correct-sizes-lazy-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nl.pofii.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WooCommerce Image Speed: WebP\/AVIF, Correct Sizes &amp; Lazy-Load (No Bloat)"}]},{"@type":"WebSite","@id":"https:\/\/www.pofii.com\/blog\/#website","url":"https:\/\/www.pofii.com\/blog\/","name":"Pofii","description":"Success Simplified.","publisher":{"@id":"https:\/\/www.pofii.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pofii.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pofii.com\/blog\/#organization","name":"Pofii","url":"https:\/\/www.pofii.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pofii.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2024\/12\/cropped-cropped-pofiiinsights-2.png","contentUrl":"https:\/\/www.pofii.com\/blog\/wp-content\/uploads\/2024\/12\/cropped-cropped-pofiiinsights-2.png","width":2079,"height":221,"caption":"Pofii"},"image":{"@id":"https:\/\/www.pofii.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PofiiCOM","https:\/\/x.com\/PofiiGlobal","https:\/\/www.instagram.com\/PofiiGlobal","https:\/\/www.linkedin.com\/company\/Pofii"]},{"@type":"Person","@id":"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/82dd56bd4b7d1ae512907145b3a68873","name":"John Cavil","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pofii.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.pofii.com\/brand\/logo-icon-circle-friendly.png","contentUrl":"https:\/\/www.pofii.com\/brand\/logo-icon-circle-friendly.png","caption":"John Cavil"},"description":"WordPress Expert, Head of technical support at Pofii Ltd.","sameAs":["https:\/\/www.pofii.com\/blog\/author\/JohnC"],"url":"https:\/\/www.pofii.com\/blog\/author\/johnc\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/posts\/597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":3,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":667,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions\/667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/media\/664"}],"wp:attachment":[{"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pofii.com\/blog\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}