This rule determines if the image is being rendered with a size actually less than the original size. For example, the image’s original size is
1000px height and
500px width, but it’s rendered as
200px height and
150px width. That means that the much larger in size image is downloaded and scaled.
The rule has a threshold to reduce verbosity:
- If the distance between the original and displayed size (separately for width and height) does not exceed 20% then the evaluation of the rule is skipped. The following threshold formula is used (
103pxrendered width): |3000 – 103|/((3000 + 103)/2) = 2897/1551.5 = 1.8672252658717 = 186.72252658717%
- Image with original size
200pxare skipped from the evaluation.
How to fix it
- Scale and reduce the width and height of the image in order to be closer to the displayed width and height.
- Serve responsive images instead of a
Best Practice, Performance, SiteLint 1.0