服务器是否会向 <picture> 标记发送超过 1 个图像并进行回退?
P粉674876385
P粉674876385 2024-04-03 09:05:59
[HTML讨论组]

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

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

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

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

P粉674876385
P粉674876385

全部回复(1)
P粉556159786

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

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

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

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




  

The picture element

Resize the browser window to load different images.

Flowers
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号