1

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?

NiftyCodeMaster
  • 31
  • 4
  • Not sure, but you could find out by experimenting. Use the Newtork Tab in your browser's developer tools. Load the page, see what is downloaded. Resize the page, see if the additional resources are then loaded. It may or may not vary from browser to browser. If you get a result, feel free to answer your own question. – Jon P Feb 03 '21 at 03:49

1 Answers1

2

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.

NiftyCodeMaster
  • 31
  • 4