Responsive Image Handling

srcset defines the set of images we will allow the browser to choose between, and what size each image is. Before each comma, we write:

An image filename (puppy-480w.jpg.)

A space.
The image’s inherent width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer (for example on a Mac you can select the image in Finder, and press Cmd + I to bring up the info screen.)
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:

a media condition ((max-width:480px)) - In this case, we are saying “when the viewport width is 480 pixels or less”.
A space.
The width of the slot the image will fill when the media condition is true (440px.)

https://codepen.io/martinwolf/pen/hFxyj/