← back to Web Design home

Responsive Images

SRC and SRCSET

MDN reference

The image src is a mandatory attribute for the image element. It specifies the main image source and can be overridden by images set for different pixel densities that are defined by srcset. The srcset attribute can hold several image urls so the developer can specify which will be used based on the viewport (i.e. 200w) or pixel density (i.e. 2x).

Image Sizes

MDN reference

The sizes attribute is a comma separated list of media conditions and source sizes. For example (max-width: 600px) 200px, 400px would display an image with a source of 200px width if the viewport is less than 600px wide. Otherwise, it will show the image whose source is set at 400px wide.

Art Direction

Art direction is the concept of showing different images or image crops based on different display sizes. Understanding and properly using art direction can benefit the user by ensuring the point of interest of the image is always shown in as much detail as possible. See example below.

image showing art direction, cropping in on flower as screen size gets smaller

Summary

Responsive images are important to understand because they can allow you to ensure all images appear high quality without compromising loading times and site performance on mobile devices.