Responsive images are essential for creating websites that look great on all devices, from desktops to smartphones. There are several techniques to achieve responsiveness, with srcset, picture, and CSS media queries being among the most popular. Understanding how each works helps developers choose the best approach for their projects.

1. The srcset Attribute

The srcset attribute is added to the <img> tag. It allows browsers to select the most appropriate image based on the device's resolution and viewport size. This technique is simple to implement and widely supported.

Example:

<img src="small.jpg" srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

Advantages:

  • Easy to implement
  • Supported by most browsers
  • Efficient for simple responsive images

Limitations:

  • Less control over image formats
  • Cannot serve different HTML structures

2. The <picture> Element

The <picture> element provides more flexibility by allowing developers specify different image sources based on media queries or formats. It is ideal for art direction and serving different images for different devices.

Example:

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="Responsive Image">
</picture>

Advantages:

  • Supports multiple formats (e.g., WebP, JPEG)
  • Allows art direction by choosing different images
  • Provides fallback for older browsers

Limitations:

  • More verbose markup
  • Requires careful planning of sources

3. CSS Media Queries

CSS media queries adapt images through styling, often by setting different background images or adjusting image size properties based on viewport dimensions. This method is useful for layout adjustments and when images are used as backgrounds.

Example:

/* CSS */
@media (max-width: 600px) {
  .responsive-img {
    background-image: url('small.jpg');
  }
}
@media (min-width: 601px) {
  .responsive-img {
    background-image: url('large.jpg');
  }
}

Advantages:

  • Flexible for layout control
  • Can be combined with CSS animations
  • Useful for background images

Limitations:

  • Requires CSS knowledge
  • Less efficient for serving different image formats
  • Not suitable for inline images without additional HTML/CSS

Conclusion

Choosing the right responsive image technique depends on your project's needs. Srcset is perfect for simple, efficient image selection. The <picture> element offers maximum flexibility and art direction. CSS media queries are useful for layout adjustments and background images. Combining these methods can also provide optimal results for modern, responsive websites.