URL: /rules/images/srcset

---
title: "Responsive Images"
description: "Checks for responsive images with srcset attribute"
---

Checks for responsive images with srcset attribute

| | |
|---|---|
| **Rule ID** | `images/srcset` |
| **Category** | [Images](/rules/images) |
| **Scope** | Per-page |
| **Severity** | info |
| **Weight** | 3/10 |

## Solution

Use srcset and sizes attributes to serve appropriately sized images for each viewport. This reduces bandwidth on mobile and improves LCP. Example: srcset='img-320.jpg 320w, img-640.jpg 640w, img-1280.jpg 1280w' sizes='(max-width: 640px) 100vw, 50vw'. Use `<picture>` element for art direction.

## Enable / Disable

### Disable this rule

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

### Disable all Images rules

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

### Enable only this rule

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