Oversized Hero or LCP Images After Enabling Smart Image Scaling

If a hero image or Largest Contentful Paint (LCP) candidate still appears large in PageSpeed Insights or Lighthouse even after enabling Smart Image Scaling, the most common reason is that the image was skipped from lazy loading.

Optimole may skip an image from lazy loading when:

• It is the first image on the page or is otherwise flagged as above the fold.
• The theme, slider, or page builder marks it as eager-loaded for LCP performance.
• The image has a loading="eager" attribute or is otherwise excluded by Optimole's lazy-load rules.

When an image is skipped from lazy loading, Optimole cannot dynamically resize it based on the visitor's viewport. Instead, it serves the image at the dimensions it finds in the HTML width and height attributes or srcset values provided by your theme or page builder. If those dimensions are larger than the actual rendered size, the image payload will be oversized.

In this article

• How to inspect the image output
• Fixes when the theme outputs large dimensions
• A note on f:best and image format
• Verify the Fix

How to inspect the image output

Use your browser's DevTools (F12 or Inspect) to check the image element:

1. Right-click the hero image and choose Inspect to open DevTools.
2. Look at the <img> element in the Elements panel:
   • If you see data-opt-lazy-loaded="false", Optimole has confirmed the image was not lazy-loaded and was therefore not dynamically resized.
   • Check the width and height HTML attributes (or srcset entries) and compare them to the actual rendered size shown in the Computed tab or the Styles panel under the image's CSS dimensions.
3. Right-click the image in the browser and Open image in new tab to inspect the Optimole CDN URL. Look for the w: and h: parameters in the URL — these indicate the dimensions Optimole used when serving the image.
   • If the w: value matches a large HTML attribute rather than the visible element width, the source HTML dimensions are the root cause.

Fixes when the theme outputs large dimensions

If the inspected dimensions are larger than the rendered size, the fix is in the source HTML output, not in Optimole's settings:

1. Choose the correct WordPress image size: In the block editor or classic editor, select the image block and choose a size (for example, Large or Medium Large) that matches or is close to the rendered width. Avoid using Full Size for images that are displayed smaller than their original resolution.
2. Adjust theme or page builder image settings: In your theme customizer, page builder, or slider plugin, look for an Image Size or Featured Image Size option and select a size appropriate for the hero display area.
3. Regenerate thumbnails: If you recently changed your theme or added custom image sizes, regenerate thumbnails using a plugin such as Regenerate Thumbnails so WordPress creates the correctly-sized versions.
4. Set accurate width and height attributes: If your theme does not offer a size selector, you can add a small customization (for example, a filter in a child theme's functions.php) that sets the width and height attributes on the hero image to match its rendered size.

After making changes, follow the verification steps below.

⚠️ Important: Changing image sizes in Optimole's settings (for example, enabling or disabling Smart Image Scaling) does not override dimensions that are hard-coded in your theme or page builder's HTML output. The dimensions must be corrected at the source.

A note on f:best and image format

If you inspect the Optimole CDN URL and notice it contains f:best but the image is still served as a PNG instead of WebP or AVIF, this is expected behavior. The f:best parameter tells Optimole to analyze the image and pick the smallest format supported by the visitor's browser — and for some images (for example, those with transparency), PNG may genuinely be the optimal result.

For a full explanation of how Optimole selects the best format, see the Automatic Best Image Format Selection article.

Verify the Fix

After correcting the image dimensions at the source, complete these steps to confirm the change took effect:

1. Clear Optimole's cached images: In your WordPress dashboard, go to Optimole > Settings and use the Clear cached images option to remove previously cached versions.
2. Clear page, server, and CDN caches: Clear any caching plugins (such as WP Rocket or W3 Total Cache), your hosting provider's server cache, and any CDN cache layers sitting in front of your site.
3. Retest in PageSpeed Insights or Lighthouse: Run a fresh audit at PageSpeed Insights or in Chrome DevTools Lighthouse and confirm that the image payload for the LCP candidate has decreased.
4. Confirm the Optimole CDN URL dimensions: Reload the page, re-inspect the hero image, and verify that the w: parameter in the Optimole CDN URL now matches the intended display width.