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** attribute is an extension of the of the [image element](/html/elements/img) and is used to inform the browser which [srcset](/html/attributes/srcset) image source to render based on the rules set out. **sizes** do not provide an instruction to the browser (*must* use *this* image *here*) but rather“*here is a viewport condition, use the best suited image based on your viewport, device pixel ration along with the width I said the image is going to be*”.
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"
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" />
sizes attribute is used along side scrset.
It is recommended that the final sizes value is
sizes="[first sizes], [second to last sizes], 100vw"
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4