CODEWITHSUNDEEP
htmlimageserverrequestfallback
holydragon
holydragon

Reputation: 6728

Does the server send more than 1 images to <picture> tag with fallback?

I am curious about picture tag that is implemented something like this.

<picture>
  <source srcset="path/img.webp" type="image/webp" />
  <img src="path/img.jpg" alt="image" />
</picture>

For the client, I understand that if the browser can handle webp, it will display webp image that is sent from the server; otherwise, it will display jpg image that is also sent from the server.

I would like to know whether the server needs to send both images to the client, or the server only sends one that the client can process because I am aiming for the server bandwidth optimization.

Upvotes: 1

Views: 82

Answers (1)

Harrison
Harrison

Reputation: 2347

It takes a "lazy" approach. It will not request a file specified in the source element until that source element is "useable".

By "useable", that could mean any of the following:

  • The browser supports that filetype
  • A media query has been met

Take for example the demo from W3Schools:
(A copy of the demo below)

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1>The picture element</h1>
  <p>Resize the browser window to load different images.</p>
  <picture>
    <source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
    <img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
</body>

</html>

Note how the page loads the first "useable" image. Initial Load

As the viewport is decreased in size the next "useable" image is the called upon. Second image

In the example, there then are no "usable" images (once the viewport is too small) So it defaults to the given img tag (but this could equally be a source tag) Smallest image, no media queries are valid

Then, when the viewport is increased in size it goes back to the previous image because the media query permits it: Screen increased

Note: while the network tab shows that the image has been requested again, it is likely (based on common browser settings) that this request will actually be the cached image and the server won't do any work.

Upvotes: 1

Related Questions