HTML - <picture> and responsive images

What it actually means

Responsive images allow the browser to load the most appropriate image based on screen size, resolution, and device capabilities. This is not the same as resizing images with CSS.

How to use it correctly

Use when:

  • Different crops are needed for different screens

  • You want art direction control

Example:

Use srcset with when:

  • Same image, different resolutions

Why this matters

  • Reduces page load time

  • Saves mobile data

  • Improves Core Web Vitals

  • Directly affects SEO rankings

Loading large desktop images on mobile is a performance mistake.

How browsers benefit

  • Browser chooses the best image automatically

  • No JavaScript required

  • Better rendering performance

Practical rule

If image size differs only by resolution, use srcset.
If image content or crop differs, use .