This are the main code examples from the "Practical Responsive Images" pocket book (initially published by Five Simple Steps).

They use a live coding environment called CodePen which means if you click on on the 'html' or 'css' tabs towards the top of each example, then you can see, and even experiment with the underlying code.

Adding the srcset attribute to an image. Browsers which support srcset will display a lime, those that don't will display the src (a lemon).

srcset with x descriptor image candidates, giving 1x and 2x image variants for high and low pixel density devices.
Now we can have crisp images on high density displays, without penalising those on lower density devices.

srcset with w descriptor image candidates, providing a list of different dimension image variants, from which the User Agents (browser) can select the most 'appropriate'.
Now we can stop serving big images to small screens.

Using 'sizes' to indicate what percentage of the viewport width the image will occupy, to enable the User Agent to again select the most 'appropriate' of the image candidates.

Using the picture element with 'source' elements to describe the logic for serving different images at defined breakpoints a.k.a 'art direction'.

Using the picture element along with the source elements 'type' attribute to provide the same image in different image formats (such as WebP, JPG XR). These image formats can provide great efficiency improvements, but have limited support, so it is important to provide fallbacks in a common image format such as jpg or png.