HTML - attributes - srcset
revision:
Content
"srcset" attribute : specifies the URL of image used in different situations
top
The srcset attribute specifies the URL of the image to use in different situations. This attribute is required when <source> is used in <picture>.
syntax
top
<source srcset="URL">
URL specifies the URL of the image. Possible values: an absolute URL - points to another web site; a relative URL - points to a file within a web site
Each src in srcset has the following format: URL width.
URL = Url or path to the image file;
width = atual image width in units of w (e.g. 450w).
Multiple src items are comma-separated.
some examples
top
Resize the browser window to load different images.
codes:
<p class="spec">Resize the browser window to load different images.</p>
<picture>
<source media="(min-width:950px)" srcset="../../pics/img_pink_flowers.jpg">
<source media="(min-width:665px)" srcset="../../pics/img_white_flower.jpg">
<img src="../../pics/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
codes:
<picture>
<img srcset="../../pics/vangogh-sm.jpg 120w, ../pics/vangogh.jpg 193w, ../pics/vangogh-lg.jpg 278w"
sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px">
</picture>
