we have different screen sizes and resolution and browsers load images before css and js.so if i have a standard-image screen(low resolution) i should not wait for the page to load and waste bandwidth.browsers need somebody to tell them wether this screen is a Retina 4K or standard-resolution.add on that the screen size-smartphone with retina screen or standard low resolution screen.HTML srcset and sizes do the job.
consider this: 
img 
src="mask.jpeg"
srcset="
Optimized-300.jpg 300w,
horizon_zero_dawn_thunderhawk-HD.jpg 1920w"
sizes="
(max-width:400px) 200px,
(min-width:400px) 1300px">
srcset hold a list of different image resolutions files.next to them is resolution value-this is the 200px and 1300px above.this is exactly the part that tells the browser the different resolutions we have in the document (200px standard resolution for standard-image screens,1300px for Retina display screens).

More details:

srcset is telling the browser this is the img url (Optimized-300.jpg ).and this is it's resolution and how fancy it is(200w).incase screen size is not an issue browser will only look for screen resolution.then (x) descriptor is used like 1x,2x,.. to indicate img resolution degree to help the browser selecting one.

sizes is a mix of two parts: first is media queries and second is a number that will help select the resolution and the size the image will be rendered on in the final stage(css also handel this step).one number with two jobs.

More details:

sizes tells the browser if media query is true (max-width:400px) then render the image that has a resolution that fit with this size(200px).now the size will be consistent with the image resolution in the srcset attribute.200px will fit the image resolution 300w.however size 301 for instance will not because we have no image resolution that much.the browser will choose the (1300w) resolution instead.and the image will be rendered with 200px width in the final stage.the last size value has no media query part only size part is a fallback option if no condition matches and works just like the size part only media query is missing-usually 100vw(100% viewport width) is good option-this is the default if no fallback specified.no srcsset no sizes effect.

before i forget:

retina images are 2X or higher than standard images.so a 400px wide element needs a 400px wide standard image and 800px wide retina image. svg are good for fancy display-actually better than png and jpg etc.but not all images are svg. in both cases if the display device is only retina then retina images is used and consider the above.if display devices are standard and retina then html let browsers know wich to render.that is using scrset attr(until now we are not concered about device size).but what about smartphones?they have width of max 400px so a 2000px is too much for small screens.a 800px is fit for them.a rule of thumb is a 400px wide screen takes a 800px wide if it is a retina screen.a 1000px wide would be a bandwidth wASTE. now i need to tell the browser wich image resolution to render at which screen size.

picture and Art-directed

imagine a picture that looks good on desktop but fucks everything on smartphones-content inside the picture get too small.now we need to crop that picture to make it look good.appearently a croped version of the used pictuer need to be made using editors-browsers are not pictuer editors. 
picture
source media="(max-width: 552px)" srcset="hero-small.jpg">
source media="(max-width: 1062px)" srcset="hero-medium.jpg">
img src="hero-big.jpg" width="1500" height="400" alt="Hero">
picture
media query will tell browser wich image source to use depending on the viewport-smartphones or desktops for instance.

Use-cases:

It is important to know that:

using srcset and sizes on img tag is different than using it on picture tag.ok they both can render based on resolution (size is intrinsic with picture and is set using sizes attribute with img tag) but using them with img will let the browser do the math and select the best img for us.described all here.