搜索

首页  >  问答  >  正文

服务器是否会向 <picture> 标记发送超过 1 个图像并进行回退?

我对像这样实现的图片标签很好奇。

1

2

3

4

<picture>

  <source srcset="path/img.webp" type="image/webp" />

  <img src="path/img.jpg" alt="image" />

</picture>

对于客户端,我理解如果浏览器可以处理webp,它将显示从服务器发送的webp图像;否则,它将显示同样从服务器发送的 jpg 图像。

我想知道服务器是否需要将两张图像都发送给客户端,或者服务器只发送一张客户端可以处理的图像,因为我的目标是服务器带宽优化。

P粉674876385P粉674876385339 天前576

全部回复(1)我来回复

  • P粉556159786

    P粉5561597862024-04-04 00:27:03

    它采用“惰性”方法。在 source 元素“可用”之前,它不会请求 source 元素中指定的文件。

    “可用”可能意味着以下任何一项:

    • 浏览器支持该文件类型
    • 已满足媒体查询

    演示 为例https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools:
    (下面是演示的副本)

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

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

     

     

     

    <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>

    回复
    0
  • 取消回复