CODEWITHSUNDEEP
htmlpicturefill
NiftyCodeMaster
NiftyCodeMaster

Reputation: 31

Do <picture> HTML sources make several server requests or just one?

When using the <picture> HTML and you specify more than one source and each source has a media attribute, does the browser automatically render both sources at the same time or is only one source loaded in unless the screen size is adjusted?

For instance:

<picture>
   <source srcset="/someimage.webp" type="image/webp" media="(min-width:1000px)" >
   <source srcset="/somesmallerimage.webp" type="image/webp" media="(max-width: 999px)" >
   <img src="/someimage.jpg">
</picture>

Will the browser make 2 server requests, one for /someimage.webp AND another for /somesmallerimage.webp? Or will it only make 1 server request depending on the size of the screen? If it is the latter, will the server make another request when the screen is resized? If it is the former, is there any way to lazyload a <picture> element into the DOM to avoid multiple server requests?

Upvotes: 1

Views: 72

Answers (1)

NiftyCodeMaster
NiftyCodeMaster

Reputation: 31

I used Chrome's dev tools as one of the comments suggested and looked to see what was being loaded in the network tab. It looks like the <picture> element only loads in 1 source at a time based on the media conditions, but when the screen is resized, it loads in the other source. The sources are independently loaded from one another.

Upvotes: 2

Related Questions