Responsive Image Size

Checks if images are sized appropriately for their display size


Rule ID	`images/responsive-size`
Category	Images
Scope	Per-page
Severity	warning
Weight	5/10

Solution

Serve images at appropriate sizes for their display dimensions. Oversized images waste bandwidth and slow page load. Undersized images look blurry on high-DPI displays. Use srcset to serve different sizes for different screens. For responsive images, serve 1x, 2x, and optionally 3x versions. Image CDNs can automatically resize images on-the-fly.

Options

This rule supports the following configuration options:

Option	Type	Default	Description
`max_thumbnail_dimension`	unknown	`undefined`	Max dimension to consider as thumbnail

Configuration Example

squirrel.toml

toml

[rules."images/responsive-size"]
max_thumbnail_dimension = undefined

Enable / Disable

Disable this rule

squirrel.toml

toml

[rules]
disable = ["images/responsive-size"]

Disable all Images rules

squirrel.toml

toml

[rules]
disable = ["images/*"]

Enable only this rule

squirrel.toml

toml

[rules]
enable = ["images/responsive-size"]
disable = ["*"]

Edit this page