URL: /rules/images/responsive-size

---
title: "Responsive Image Size"
description: "Checks if images are sized appropriately for their display size"
---

Checks if images are sized appropriately for their display size

| | |
|---|---|
| **Rule ID** | `images/responsive-size` |
| **Category** | [Images](/rules/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

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

## Enable / Disable

### Disable this rule

```toml squirrel.toml
[rules]
disable = ["images/responsive-size"]
```

### Disable all Images rules

```toml squirrel.toml
[rules]
disable = ["images/*"]
```

### Enable only this rule

```toml squirrel.toml
[rules]
enable = ["images/responsive-size"]
disable = ["*"]
```