sizes
Summary
The sizes attribute is an extension of the image element. It provides additional image related information to the browser to help decide the most appropriate image to load based on the viewport. Most commonly used for delivering the best image for responsive images. It can only be used in conjunction with srcset
Applies to | dom/HTMLImageElement |
---|
sizes="[media query] [length], [media query] [length]"
Lengths can be declared using fixed widths (pixels) or relative units (vw or viewport width). When declaring sizes it is recommended that the final vw unit be declared as 100vw to cover all of the sizes you do not consider.
sizes="(min-width:30em) 300px, (min-width:60em) 500px, 100vw"
Examples
Sizes attribute used in conjunction with SRCSET
<img
srcset="http://placehold.it/1024x500&text=1024+Large.jpg 1024w, http://placehold.it/600x250&text=600+Medium.jpg 600w, http://placehold.it/300x150&text=500+Small.jpg 500w"
sizes="(min-width:1000px) 33.3vw,(min-widthh:500px) 50vw, 100vw" src="http://placehold.it/300x150&text=Small.jpg+No+Picture+Support"
alt="Picture SRCSET" />
Usage
sizes attribute is used along side scrset.
Notes
It is recommended that the final sizes value is
sizes="[first sizes], [second to last sizes], 100vw"
Related specifications
- HTML5 APIs
- W3C Editor’s draft