Define the image element attributes src and srcset.
The img element in HTML is the tag used to place an image on a page. The src attribute specifies the path to the image.The attribute srcset allows the developer to supply a list of images for the browser to choose between based upon the values indicated in the sizes attribute. The srcset attribute allows for better loading and image quality based upon screen size.
Explain the attribute sizes.
The sizes attribute is used with the srcset attribute to help with reating responsive image design. The sizes attribute allows the browser to identify which image to use in a srcset based upon the screen size that is set in the sizes attribute.
Explain the concept of art direction.
Art design is an aesthetic quality that ensures that the quality of an image will be maintained reguardless of the type of display. It uses the tag picture and the attribute source to set the images depending on display size. This gives the developer more control of how an image will appear on various displays.
Summary
A responsive image will use srcset and sizes to load different sizes of the same image and allows the browser to choose based on screen size. The art direction allows the designer to fine tune the appearance of an image on various display sizes. While srcset and sizes allows for more responsive design, art direction allows for more aesthetically pleasing design.