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.