必须用+才能安全启用webp，因浏览器仅依type属性协商格式，不识别后缀；旧版safari/ie等会忽略直取兜底图，若只写则直接渲染空白。
直接用 <picture></picture> 包裹 <source type="image/webp"></source> 并配 <img src="fallback.jpg">，才能让现代浏览器加载 WebP、旧浏览器自动降级——只写 src="xxx.webp" 会导致 Safari 13、IE 等显示空白。
为什么不能只改后缀，必须用 +
浏览器不靠文件后缀判断格式支持，而是查 type 属性。只写 <img src="photo.webp">，不支持 WebP 的浏览器根本不会尝试解码，直接渲染失败（空框或占位符）。<picture></picture> 是唯一标准方式，让浏览器按顺序匹配 <source></source>，遇到第一个 type 受支持且 media 匹配的就停用后续项。
- 旧版 Safari（13 及更早）不支持 WebP，但会忽略
<source type="image/webp"></source>继续往下找；如果 JPEG fallback 写在前面，它就永远卡住，加载不到图 -
<source></source>必须放在<img>前面，且<img>必须有src和alt——它是兜底渲染节点，漏掉整个<picture></picture>就无效 - 同一
<picture></picture>中混用media和type没问题，但<source></source>顺序错位（比如宽泛的(min-width: 0)放最前）会让高 DPR 设备永远匹配不到后面的高清规则
WebP 转换时质量参数怎么设才不糊又够小
WebP 有损压缩下比 JPEG 小 25%–35%，但盲目压到 q=50 会导致边缘发虚、文字锯齿。关键不是“最小体积”，而是人眼无感的质量临界点。
- 用 Squoosh 或 ImageMagick 批量转时，推荐
quality=75–85：75 适合照片类大图，85 更稳妥，适合含文字/图标的内容图 - 无损 WebP（
-define webp:lossless=true）比 PNG 小 26%+，但转换耗时高；对图标、矢量截图优先选无损 - 别用在线工具一键“极致压缩”——它们常默认关闭色度抽样或强制 dithering，导致暗部噪点或渐变 banding
srcset + sizes 必须和 CSS 布局对齐，否则 WebP 白转
即使全用 WebP，如果 sizes 写成 "100vw"，小屏仍会拉取桌面尺寸的 2400w 图——WebP 再小也是 1MB，流量和 LCP 都没省。
- 先写好 CSS：
@media (min-width: 768px) { .hero-img { width: 720px; } }，再推导sizes="(max-width: 767px) 100vw, 720px" - 父容器有
padding: 0 20px？视口宽 390px 时有效宽度 ≈ 350px，sizes得写成"(max-width: 767px) 350px, 720px"，不能直接抄 CSS 宽度 -
srcset必须用w描述符（如photo-800w.webp 800w），不能只写x；sizes缺失或写错，浏览器 fallback 到100vw，所有设备都拉最大图
loading="lazy" 和宽高属性是 WebP 加速的最后两道保险
loading="lazy" 控制加载时机，width/height 防止布局抖动——这两项不加，WebP 再小也救不了 LCP 和 CLS。
-
loading="lazy"只对非首屏图生效（Chrome 76+、Firefox 75+），但必须配合srcset使用；单独加只会延迟加载一张大图，总流量不变 -
width和height必须填原始图固有尺寸（如 1200×800 就写width="1200" height="800"），不是容器尺寸；否则浏览器无法预留空间，图片加载瞬间页面跳动 - 推荐双保险：
<img style="max-width:90%" style="max-width:90%">+ CSSaspect-ratio: 1200 / 800；Safari 旧版可用padding-top: calc(800 / 1200 * 100%)降级
WebP 不是开关一开就提速的魔法格式，它依赖 <picture></picture> 结构、sizes 与真实 CSS 的严格对齐、以及 width/height 这三个硬性条件；漏掉任意一个，要么白转，要么加载错图，甚至比原 JPEG 更慢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
