Responsive Images

Src and Srcset

The srcset is an attribute that allows the browsers to use a set of sources depending on the size of each source. The srcset will have a list of different image widths and the browser then applies the source with the best image width depending on the users device. Src is an attribute is somewhat of a back up if the user is running on a older browser because older browsers are not aware of srcset and sizes attributes so they become ignored. So a src will allow your site to present an image and prevent an image display error.

Sizes

The sizes attribute is a signal that tells the browsers about how the image will be rendered when CSS is applied. The Sizes attribute will contain the width of the window and image that matches, working its way down to the smallest size.

Art Direction

For Art Direction, it is to consider different image portraits for multiple different screen sizes and tablets. Having a media query of each screen size with different height and width. Using an image where the subject is in the center, so when your images are displayed on your site through different devices, it will not be positioned properly with the subject appearing off the edge of the screen.

Overall, these are all important factors to consider when working with responsive images on a site to ensure high quality and professionalism. Avoiding any broken images when a user enters a site on phone or desktop.