Responsive Images

Define/Explain src and srcset

The image-set will let you add a series of images that you can set to load depending on the device. You can use different file types for quality and if the browser does not recognize a specific type it will use one you have added as an alternate.

Define/Explain sizes

For responsive images if you want the image to scale down, but not scale scale up to be larger than the original size you would use max-width: 100%. If you want to restrict the responsiveness to a max size you would use the max-width property again, but with a pixel value.

Why art direction

Art direction can improve visual presentations of your images to fit with the different browser sizes. Instead of different sizes of one image, art direction loads completely different images depending on the display. This allows you to make sure the focus you want to represent is displayed.

Summary

With using responsive images and tricks there are many options to reach your desired design to make sure your visuals complement your artistic purposes.