src and srcset
src and srcset work together to make responsive images. src is
used to call the default low
resolution image in case the browser being used doesn't suport srcset. While
srcset offers multiple
images of either increasing density, or size for the browser to choose from.
Sizes
In order to use srcset attribute you first need to create images in multiple sizes. The industry has quasi settled on 4 being the magic number of image sizes to offer however there is no limit to the number of images that can be inclueded. The first image is the lowest resolution option and customarily named image-1x. Image is just an arbitray name and doesn't affect the use of the image. What the browser is going to use to decide which image to use is the 1x. The other images would be sized at 2x the size of the first one, and then 3x, and then 4x. Leaving you with a set of images named image-1x, image-2x, image3x, image-4x etc. Since the browser knows everything it will choose which size is most appropriate for display on the individual client. This should be much more efficient than leaving the decision up to the website code because the code has to make queries and guesses to figure it out, while the browser already has the information it needs to make an informed decision.
Why art direction
Art direction shows entirely different images on different display sizes. Unlike srcset
using art direction is purely aestetic in nature. For example you could have an image cropped in at 1x1
for mobile devices, one at 8x10 for tablets, and one at 16x9 for large screens. Also by offering
different image crops you can change the focal point depending on design preferences on different sizes.
If for example you have a banner image with the focal point off to one side or the other it could look
great on a large widescreen, however as the screen shrinks in from one side or the other the subject
could be lost. With art
direction you would simply create different images with different crops. Thus moving the focal point
around to fit the client. I found a good example of this at DEV.
Summary
Browsers are getting smarter everyday, and there is a plethora of screen sizes, reslolutions, and bandwidths that need to be considered when designing websites. While a large hi-res image will look good regardless of the resolution of the screen your looking at it on, the user experience of having to wait for a large file to load could outweigh the benefits of the quality of the image. If the user leaves out of frustration while waiting for your tulip picture to load, you've probably just lost that user for good. It would be much better to have options for the browser to choose from to make the UX pleasant for everyone.