The attribute "src" is required since it is is the path to the image. Then "srcest" is when you can use more than one string that allows you to add multiple image sources for different user agents to use.
When you use "srcest" you cna inlcude different images with different resolutions, depending on the users resolution display with determine the pixal representation for each size.You can also use the "source" element to specify what width the screen will be displayed and which images will be uploaded with it.
The art direction problem is wwhen you want to change the resolution ofr different image display sizes. You can use the "picture" element which then you can add multiple "source" elements to and that allows you to set different display widths.
Overall there are many ways to iclude different size/resolution pictures to each page depending on the size or display of the users device. There are a few important elements to remember to use when making a responsive image, so "srcest", "picture", and "source" are important.