Avoid displaying oversized images

Description

This rule determines if the image is being rendered with a size that is 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 image is downloaded and scaled.

The rule has a threshold to reduce verbosity:

1. 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 (3000px original width, 103px rendered width): |3000 – 103|/((3000 + 103)/2) = 2897/1551.5 = 1.8672252658717 = 186.72252658717%
2. Image with original size 200px height and 200px are skipped from the evaluation.
3. Images type .svg are skipped while evaluating this rule.

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 one-size-fits-all approach.

Standard

Rule ID: oversized-images

Best Practice, Performance, SiteLint 1.0