src and srcset

The src attribute specifies a path to a single image while srcset specifies a list of image files to use in different situations. When designing for responsive images the srcset attribute is used to list images and their sizes for the browser to choose between.

Sizes

The sizes attribute is used to define a set of media conditions such as screen width to indicate which image size should be used.

Why art direction?

Art direction is used to swap images for different viewpoints using different cropping of the image. This is useful to ensure the main focal point of an image is always shown. This is done by placeing multiple image files in an html document with max-width set.

Summary

In order to ensure your site is maximized for both mobile and desktop views, there and several ways to size and place images in your documents. Using srcset and art direction methods are great ways to ensure your images are optimized for different viewports.