Sizes

The site sends each image in the size the screen needs. Too small and the image looks blurry; too large and the page loads slower. This page shows how well each image fits.

Each image gets a label:

• Sharp: the image fits the screen exactly.
• Within range: the image is a little larger or smaller than needed. Nobody notices.
• Blurry: the image is too small, so it looks soft. This needs a fix.
• Too large: the image is much larger than needed, so the page loads slower. This needs a fix.
• Larger by design: the image is larger than needed on this screen, but sized for a wider screen of the same kind of device. This is expected.

The label also shows the width the screen needs and the width the site sent, in pixels.

How to use

1. Pick a screen width, an image and a layout.
2. Read the label on each image. The total is shown above the frame.
3. To check any other block, turn on Image sizes on its reference page.