Urgent Performance Issue: Images Served Larger Than Displayed (WoodMart)

Dear WoodMart Support Team,

I am writing to you today regarding a critical image optimization issue on my WooCommerce store, which is built using your excellent WoodMart theme. I am actively working to improve my site’s PageSpeed Insights score, but I’m encountering a persistent problem where images are being served at dimensions significantly larger than their displayed size, leading to unnecessary bandwidth consumption and negatively impacting my Largest Contentful Paint (LCP) and overall performance.

My website URL is: https://madeinatlas.com/

I have run recent speed tests for an example product page:

https://madeinatlas.com/moroccan-babouche-slippers-men-berber-shoes/

PageSpeed Insights: https://pagespeed.web.dev/analysis/https-madeinatlas-com-moroccan-babouche-slippers-men-berber-shoes/htm3bi0keb?form_factor=mobile
WebPageTest: https://www.webpagetest.org/result/250619_YiDc4Y_4HV/
The Core Problem:

As highlighted by PageSpeed Insights under “Improve image delivery,” I am seeing significant savings potential due to images being oversized for their display context. For example:

An image like …08/made-600×359.png is reported as consuming 48.0 KiB but could save 39.3 KiB, because it is displayed at 300×179.
Similarly, various 600×600.jpg images are displayed at 186×186, but the larger 600px version is being served.
This occurs despite my extensive efforts in image optimization.

Steps I Have Already Taken:

Imagify Plugin:

I have Imagify (latest version) installed and active.
All images have been bulk optimized, and AVIF conversion is enabled and working for my images. I have verified this via browser developer tools.
In Imagify’s “Files optimization” settings, I have enabled optimization for the following sizes: medium_large – 768 × 0, woocommerce_thumbnail – 300 × 300, woocommerce_single – 600 × 0, and woocommerce_gallery_thumbnail – 150 × 0.
I have ensured Imagify is set to display next-gen formats (Use rewrite rules).
WooCommerce Image Settings:

In Appearance > Customize > WooCommerce > Product Images, I have Main image width: 600 px and Thumbnail width: 300 px with 1 : 1 cropping.
WoodMart Theme Settings:

I have explored relevant image dimension settings within WoodMart > Theme Settings (e.g., under “Shop” or “Product Page” sections) and attempted to align them with the actual displayed sizes. However, the issue persists.
Caching & Regeneration:

I have repeatedly cleared WP Rocket cache, any server-level caching, and my browser cache after making any changes.
I have regenerated all image thumbnails multiple times via Imagify’s bulk optimizer.

My Analysis & Suspected Causes:

It appears there’s a disconnect in how image dimensions are being managed and served between WordPress, WooCommerce, Imagify, and specifically the WoodMart theme. Despite having smaller, optimized AVIF versions available (e.g., 300px wide or 186px wide), the browser is still being instructed to load a 600px wide image, which is then scaled down by the theme’s CSS on the front-end. This suggests:

WoodMart’s internal image handling might be overriding default srcset/sizes logic.
The sizes attribute generated by the theme might not accurately reflect the true displayed width of images in various layouts (e.g., product grids, related products).
Perhaps a specific image size is not being generated or correctly requested for these smaller display contexts within WoodMart’s templates.
Request for Immediate Assistance:

Could you please provide expert guidance on how to correctly configure WoodMart’s image settings and/or any other relevant areas to ensure that the precisely sized AVIF images are served for every display context on my website? I need to eliminate the “image served larger than displayed” warnings in PageSpeed Insights.

Are there any known specific settings, best practices, or potential conflicts within WoodMart regarding responsive images and image optimization plugins (like Imagify) that I should be aware of? I would greatly appreciate it if you could investigate why the theme’s CSS appears to be downscaling images even when smaller, optimized sizes are clearly available.

To facilitate your investigation, I am prepared to provide the following:

Information to Provide:

PageSpeed Insights Report URL: https://pagespeed.web.dev/analysis/https-madeinatlas-com-moroccan-babouche-slippers-men-berber-shoes/htm3bi0keb?form_factor=mobile
WebPageTest URL: https://www.webpagetest.org/result/250619_YiDc4Y_4HV/
Har file for our inspection.
Temporary WordPress Admin Access: I can create a temporary administrator account for your team if needed.
FTP/Hosting Access: I can provide this if needed to check .htaccess files or server configurations.

Screenshots You Should Prepare:

Imagify Settings:
A screenshot of our main Imagify settings page, clearly showing AVIF/WebP conversion enabled and the compression level.
A screenshot of the “Files optimization” section, showing all the image sizes we have selected for optimization (medium_large, woocommerce_thumbnail, woocommerce_single, woocommerce_gallery_thumbnail, etc.).
A screenshot of Imagify’s “Display options”, showing how it’s configured to serve next-gen formats (“Use rewrite rules).
WooCommerce Product Images Settings:
A screenshot of Appearance > Customize > WooCommerce > Product Images, showing your Main image width and Thumbnail width settings.
WoodMart Theme Settings:
Screenshots of all relevant sections within WoodMart > Theme Settings that pertain to image dimensions, image sizes, or performance/optimization. (e.g., product thumbnails, single product images).
Browser Developer Tools Screenshots :
Screenshot 1 (Elements Tab – Image Tag)
Screenshot 2 (Network Tab – Image Load)
Thank you for your time and prompt attention to this matter. I am eager to resolve this to provide the best possible experience for my customers.

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

Could you please send access to the admin panel? Also, may I check how it works on the default theme?

I await your response.

Kind Regards

Hi There
Thanks for your assistance, here is the access to the admin panel, it’s a staging area you could modify anything you would like, theme or plugins

Hi there
It has been 2 days, could you please respond it’s Urgent!!!

Hello,

Sorry for the delay.

1. As we can see, on the default 2025 theme, the same issue – https://prnt.sc/RjwJKa5Zaef9 the image rendered on mobile with the same width as in our theme. So this is not something caused by our theme.

2. The issue is related to the heavy images in the gallery – https://prnt.sc/q7Trbwu0Nhg6 , make each image in the gallery as 20kb and then recheck the LCP issue.

Let me know the result.

Kind Regards

Hi Luke,

Thanks for circling back. We’ve already verified both points:

Gallery File‐Size Reduction
We manually compressed a handful of gallery images down to ~20 KB each (AVIF/WebP) as a test. While the file sizes shrank, the oversized downloads warning and inflated LCP time remained unchanged, because the browser is still selecting the 600 px (and sometimes 1024 px) candidate based on the sizes=”…600px” directive—not because the image file itself was “heavy.”

Why this isn’t about “heavy images”
PageSpeed Insights is flagging “Serve images larger than displayed,” not “Compress images more.”

Reducing the file payload doesn’t stop the browser from fetching a 600 px image when our layout only needs a 382 px one.

What we need from WoodMart
The root cause lives in how the theme (or WooCommerce hooks in your templates) is outputting the tag—specifically the hard-coded sizes value and the available srcset entries. We need guidance on:

Which hook or template file (e.g. content-single-product.php, wc_get_gallery_image_html, etc.) controls that markup so we can override it.

A recommended snippet or filter you provide—targeted just to WoodMart’s single‐product image output—to emit a correct sizes attribute (e.g. (max-width:600px) 100vw, 382px) or prune the srcset candidates appropriately.

Without that, we’re still in the dark. This is a responsive‐image sizing issue, not a file compression one. If you can point us to the exact theme function or filter responsible, we can apply a precise override and finally eliminate the “served larger than displayed” LCP penalty.

Thanks for your help on this deeper layer!
Khalid

Hello,

Thank you for the detailed explanation. I understand you’re looking to modify the sizes attribute and srcset generation for product gallery images.

However, our theme doesn’t influence or modify WordPress’s native responsive image functionality. We don’t have any custom hooks or filters that alter the srcset or sizes attributes – these are generated automatically by WordPress core itself.

The theme uses standard WordPress and WooCommerce functions for image output without any custom code that would override the default responsive image behavior. Since this is handled at the WordPress core level, you’ll need to look into WordPress’s own documentation for available hooks and filters that can modify responsive image attributes.

Kind Regards

[Author]

Posts