It appears that some images on your site are bigger in file size than necessary for the display size that's being used.
Why is this important?
Images can become a concern for a site's performance when they're not optimized for different screen sizes. Large images will require resizing by the browser to fit the viewport, which can burden the network and use up more data than required, negatively impacting loading speeds.
What does the Optimization check?
Loud Interactive's review system will flag any internal image if it is larger than the size it will be displayed on the site. Images are assessed in comparison to their on-screen render size including the device pixel ratio. An image will be deemed too large if its actual size surpasses its rendered size by 4KiB or more.
How do you resolve this issue?
Your aim should be to avoid serving images that exceed the display size on a user's device. Overly large images contribute to unnecessary data expenditure and can slow down your website's loading time.
Conducting a Lighthouse audit on pages in question can show these deficiencies and list images that need resizing. Not only does resizing reduce data usage, but it also enhances loading times.
To manage image sizes effectively, consider implementing 'responsive images' which involves creating several versions of an image to fit various screen dimensions, employing media queries to select the right one.
Alternatives include using image CDNs for optimization tasks, or switching to scalable vector graphics, like SVGs.
Coordinate with your web development team to choose a suitable approach based on your website's specific structure and available resources.
Further Reading
Properly size images (Lighthouse documentation)
Comments