For flexible-sized images, we need to supply the image in various sizes for different devices like mobiles, tablets and desktop computers. If we supply a single image, the browser on each device has to resize the image which can be a costly operation. The larger the image, the more memory is needed and the more costly the resizing operation will be. Plus, the extra bytes used to download the image will be wasted. This is the resolution switching problem. To address this, we should give the img element a few image sources and the size of the image for various viewports. The browser will take the screen resolution and pixel density into account and download the image that best fits the final size.
Responsive Image Breakpoints Generator
<body>
<!-- different size of image on different devices -->
<img
src="/images/meal.jpg"
alt="A bowl with salmon and curry"
class="meal"
srcset="
images/meal.jpg 400w,
images/[email protected] 800w,
images/[email protected] 1200w "
sizes="
(max-width: 500px) 100vw,
(max-width: 700px) 50vw,
33vw " />
</body>