The sizes attribute gets read from left to right. If the media condition is omitted it evaluates to true automatically (= fallback). Both of these values are described in CSS pixels so we don't need to care about device pixel ratio for this. This attribute contains a comma separated list of one or more image widths for different viewport sizes.Įach entry is a combination of a media condition and a width. To tell the browser how much space the image really needs on our viewport, we can use the sizes attribute.
#Responsive image resize full#
To calculate this, the browser assumes the image fills up the full viewport width ( 100vw) by default, which means it uses the full width of the browser. The srcset attribute is listing different resolutions of the same image from which the browser chooses the best fitting image source before loading it.Įxample: srcset="ninja-1000w.jpg 1000w, ninja-500w.jpg 500w. But to be on the same page I still would like to start with a short introduction about these two attributes: srcset I think most of you already heard of responsive images and especially the srcset attribute. Since there are lots of things you should know before using srcset I thought it could be useful to summarize the most tricky parts in a blog post. But each time, I made some new findings about how these attributes really work and where I need to take care while implementing them.
Over the last few years I had to optimize images with srcset on different websites, several times.Īfter each optimization I thought that I understood how the srcset and sizes attributes of the tag works.
0 kommentar(er)
