# How to size images for the screen they are shown on

> Sending a 2400 px image to a 390 px phone wastes most of the bytes. Responsive images with srcset let the browser pick the right size.

Speed & Core Web Vitals · HTML version: https://getreport.app/learn/image-sizing

## Image sizing

Passing looks like: Images are sized for how they are displayed.

**Why it matters.** Sending a 2000 px photo to a 400 px slot wastes most of the bytes. Responsive images let the browser pick the right size for each screen.

**How to fix it.**

1. Add srcset and sizes to <img> so phones get small versions; most CMSs generate the sizes for you.
2. Resize the originals to the largest size you actually display.

## Oversized images

Passing looks like: Every sized image is served close to its displayed size.

**Why it matters.** Sending a 1600-pixel photo for a 300-pixel slot downloads about 28 times more pixels than needed. The browser scales it down and the visitor pays for the difference.

**How to fix it.**

1. Resize the listed images to the largest size they are shown at (twice that for high-density screens).
2. Use srcset with several sizes so phones get a smaller file than desktops.

Check your own page: https://getreport.app/