Src and Srcset are html attributes typically to be used with the img tag to call out images on web pages. The src attribute specifies the source URL of the image that you want to display. The srcset attribute gives a set of images with different sizes and resolutions. It allows the browser to choose which one to use depending on the devices screen size and resolution. One benefit srcset has is that it loads smaller images first, reducing loading times and data usage.
The sizes attribute tells the browser how big an image should be depending on the size of the viewport. In the html code, it uses media queries to tell the browser these conditions. For example: sizes="(max-width: 600px) 480px". This means, if the viewport is 600px or smaller, the image should be 480px. There can be multiple conditions written for each query.
Art Direction is the ability put different versions of an image or an entirely different image on a web page depending on the device used to view the web page. Some times an image my not look as good from a large screen to a small screen or vice versa so a developer may choose to change the image or media all together.
Responsive images are an important part of web design. These 4 attributes all have important roles for developers to create exciting and entertaining web pages. Src displays images on a webpage. Srcset allows the browser to choose the best from multiple options. Sizes helps the browser choose the right image for the device and art direction is the developer creativity in picking the right images for specific screen sizes.