Responsive Images

src and srcset

src contains the default image that will be used. srcset provides a set of images that can be chosen instead of the original src.

sizes

sizes is a list of media queries that decides which image to use at any given screen size.

Art Direction

Art Direction describes the importance of choosing images with optimal dimensions for any given device.

A general rule of thumb is that images on desktops (landscape) should be wider than they are tall, and on mobile screens (portrait), they should be taller than they are wide.

Summary

Images that are forced to change from its intrinsic aspect ratio can become pixelized and distorted. Utilizing srcset and sizes allows you to choose an image that is ideal for that particular device width.