The sizes attribute in HTML is primarily used for responsive images, which helps the browser determine which image source to load from the srcset and specifies the dimensions of the linked icon.
Definition and Usage
➔ The sizes attribute works together with the srcset attribute of the img and source elements.
➔ This gives the browser an hint of the width of the image at different viewport sizes.
➔ This helps the browser select the most appropriate image from the srcset list.
➔ Attributes functions:
- srcset: Lists of image files and their intrinsic widths.
- sizes: Lists of media conditions and the slot size.
- src: acts as a fallback.
Syntax
<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" src="fallback.jpg"
alt="Responsive image width example">
<picture>
<source srcset="small.jpg 300w, medium.jpg 600w" media="(max-width: 500px)" sizes="100vw">
<source srcset="large.jpg 1200w" sizes="50vw">
<img src="fallback.jpg" alt="Responsive image width example">
</picture>