src | srcset Explained
The src attribute identifies a relative or absolute URL of an image or media type, such as audio and video.
The srcset attribute identifies which image size will be displayed out of a set of images, dependent on the users screen size. These sets contain small, medium, and large files of the same image that are handy for a better UE when viewing on mobile, tablet, and desktop.
sizes Explained
The sizes attribute is used within the image element and in cooperation with the srcset attribute. It specifies the size of the image and in which situation it will be displayed. Using a combination of a media query and the width of the image, achieving this goal is possible. Displayed on the mobile screen will be the smalllest image until the screen size reaches a predetermined(breakpoint) width, then opts for the next largest image upon passing that media breakpoint.
Art Direction
Web designers use various sizes of the same image for use on different size screens. Users who are viewing on a mobile device, are seeing a proportionally smaller version of the same image than that of the image used for the larger screen size. With this in mind, the user experience is greatly improved using art direction for mobile design. This also prevents images and important information that may be embedded in your images from being cut off and displaying only a portion.
SUMMARY
Responsive images are necessary for modern websites to function properly and create a pleasant user experience when surfing a website. Your sites will rank higher on the various search engines, and be running efficiently with lesser load times. SEO is a key part to a website, and the designer will use what helps to get more views than another their competition.