Responsive Images Explained: Better Photos on Small Screens

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Offer more than one size

   0:18

   Provide suitable versions of the same picture.

   On-screen labels: Small version; Medium version; Large version.

2. 2

   Step 2: Let the browser choose

   0:30

   Screen size and pixel density affect the best source.

   On-screen labels: Available space; Screen density; Browser choice.

3. 3

   Step 3: Describe the layout accurately

   0:42

   Your developer can set srcset and sizes in the markup.

   On-screen labels: Image candidates; Display width; Accurate settings.

4. 4

   Step 4: Check the mobile crop

   0:54

   A different crop can keep the important subject visible.

   On-screen labels: Visible subject; Useful framing; Mobile preview.

5. 5

   Step 5: Keep space for the image

   1:06

   Set dimensions so the layout can reserve its place.

   On-screen labels: Image width; Image height; Stable layout.

6. 6

   Step 6: Test several screen widths

   1:18

   Look for blurred images, tiny details and wasted downloads.

   On-screen labels: Phone view; Tablet view; Desktop view.

Common questions

Go further