Loads oversized images which are scaled in the browser
This means that the URL in question loads oversized images which are then scaled by the browser.
Why is this important?
Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that requires the browser to scale them to the correct size. Scaling images in the browser is bad for performance as it takes extra CPU time and the user ends up downloading data they don't use.
What does the Hint check?
This Hint will trigger for any internal URL which has at least one rendered image that is at least 25KB smaller than the actual image loaded, where such images have a height and width greater than 1px (in order to exclude tracking pixels from triggering the Hint).
Examples that trigger this Hint:
The Hint would trigger for any URL that contains images which are loaded at an original size, and then scaled down by the browser, for example, using HTML:
How do you resolve this issue?
The main strategy for serving appropriately-sized images is called "responsive images". With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.
Another strategy is to use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size.
