Oversized Images Reported by PageSpeed Insights or Lighthouse

If PageSpeed Insights or Lighthouse reports that an image is served at dimensions larger than its displayed size, the cause is usually one of two things:

• The image was skipped from lazy loading — common for hero images and Largest Contentful Paint (LCP) candidates — so Optimole could not dynamically resize it.
• The image's HTML markup does not carry width and height attributes that match its rendered size — common for images inserted through a WordPress Custom HTML block.

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, page builder, or block markup. If those dimensions are larger than the actual rendered size — or missing entirely, so the original file's dimensions are used — the image payload will be oversized.

In this article

• How to inspect the image output
• Fixes when the source outputs unsuitable 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 affected image and choose Inspect to open DevTools.
2. Look at the <img> element in the Elements panel to see which situation applies:
   • If the tag has no data-opt-src or data-opt-lazy-loaded attribute, the image bypassed Optimole's lazy loading and was not dynamically resized. Its delivered size comes from the dimensions in the HTML markup, so continue with the source dimension fixes below.
   • If the tag has data-opt-lazy-loaded="true", Optimole handled the image through its lazy loading pipeline. If it is still oversized, go to Optimole > Settings > Advanced > Lazyload and confirm that Enable Lazy Loading & Scaling is on, the Loading Method is set to Smart Loading, and Smart Image Scaling is enabled. For how Smart Image Scaling works, see the Image Scaling article.
   • 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.

In short: Smart Image Scaling is the right fix for images that Optimole handles through Smart Loading, while images that bypass that pipeline depend on accurate width and height attributes in their HTML markup.

Fixes when the source outputs unsuitable dimensions

If the inspected dimensions are larger than the rendered size, or missing, 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. Edit images inside Custom HTML blocks: Open the Custom HTML block and add explicit width and height attributes to the <img> tag, matching the dimensions at which the image is actually displayed. For example, for a profile picture displayed at 77 × 77 pixels:

   <img src="https://example.com/wp-content/uploads/profile.jpg" width="77" height="77" alt="Profile photo">

   Resizing the image file in the Media Library alone does not fix this — the Custom HTML block still outputs the raw tag, so the sizing instructions must be added to the tag itself.

4. 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.

5. 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, page builder, or Custom HTML block 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 affected image has decreased.
4. Confirm the Optimole CDN URL dimensions: Reload the page, re-inspect the image, and verify that the w: parameter in the Optimole CDN URL now matches the intended display width.