> For the complete documentation index, see [llms.txt](https://notes.danfitz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.danfitz.com/javascript/mastering-chrome-dev-tools/h-image-performance.md).

# Image Performance

Here are few choices to make your image load faster:

## `srcset`

```html
<img
  srcset="small.jpg 300w,
  medium.jpg 800w,
  large.jpg 1200w"
/>
```

`srcset` is an API available directly in your HTML! Each image loads when the screen size is a certain width *or below*.

**Pro tip**: You want to keep using `src` as a fallback in case `srcset` isn't supported.

**Note**: Interestingly, if you shrink your screen size, the browser won't fetch the lower-quality images. The rationale is that it's wasteful to fetch a lower-quality version if you already have the higher-quality one. (But the browser does fetch higher-quality images as you expand your screen size.)