Web development and performance
What is Responsive images?
Responsive images serve different image files to different screen sizes using the srcset and sizes attributes, so a phone downloads a phone-sized file. It is usually the single largest performance saving available on an image-heavy page.
Also called: srcset · sizes attribute
How the attributes work together
- srcset lists candidate files with their intrinsic widths — image-400.jpg 400w, image-800.jpg 800w
- sizes tells the browser how wide the image will be displayed at each breakpoint
- The browser combines both with the device pixel ratio and picks one before layout
- Getting sizes wrong is the usual reason srcset appears not to work
Combining with format switching
A picture element holds several source elements, each with its own type and srcset, and a final img as the fallback. That gives format negotiation and size negotiation in one block, which is the complete solution.
The measurement that justifies it
Load your page on a phone and check the transferred size of the largest image. If it exceeds the display width times the pixel ratio, you are shipping bytes that are discarded before anything is drawn.
Where this is covered in depth
A definition can only go so far. Image SEO: findable images that do not wreck your page speed covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.