Performance · Website glossary

Responsive images

Quick answer · What is Responsive images?

Image markup that lets a browser select suitable sources for layout size, resolution, or art direction.

IN PRACTICE

Responsive images: an example

A phone receives a smaller photo candidate while a wide display can select a larger one.

KEEP IN MIND

A smaller CSS display width does not automatically reduce the downloaded image file's size.

Put the idea to work

Frequently asked questions

What is a practical example of Responsive images?

A phone receives a smaller photo candidate while a wide display can select a larger one.

Does a smaller CSS width reduce the downloaded image size?

A smaller CSS display width does not automatically reduce the downloaded image file's size.

Which concepts should I read alongside Responsive images?

Responsive design: An approach that adapts content presentation to available space and device characteristics.
Largest Contentful Paint: LCP reports when the largest eligible visible content element in the initial viewport is rendered.