真正实现“双重优化”的关键是结构中type值、srcset描述符、sizes属性的严密配合：type="image/webp"必须与服务端Content-Type: image/webp完全一致；需分层设计，WebP格式优先且置于JPEG前，为强制兜底；srcset内仅用w或x单位不可混用；sizes须写真实视口单位，缺省将导致加载过大图片。

标签本身不优化，它只负责把选择权交给浏览器；真正实现“双重优化”（格式压缩 + 响应式带宽控制）的关键，在于你写的 顺序、type 值、srcset 描述符和 sizes 配合是否严密。写错一处，浏览器就跳过所有 ，只加载 的 fallback。

type="image/webp" 必须和服务端 Content-Type 完全一致

这是 WebP 回退失效的第一大原因。浏览器不认 "webp"、"image.webp" 或 "image/WebP"——只接受标准小写、带斜杠、无空格的 image/webp。

• 服务器返回 Content-Type: text/plain 或 image/jpeg？Chrome Network 面板会标为 blocked:mime-type，直接跳过该
• Nginx 需显式配置：types { image/webp webp; }；CDN 要确保透传 Accept: image/webp 请求头
• 用 curl -I https://yoursite.com/photo.webp 检查响应头，确认 Content-Type: image/webp 真实存在

WebP 优先 + 多尺寸 srcset 要分层写，不能混用 w 和 x

想同时做格式降级（WebP → JPEG）和分辨率适配（400w/800w/1200w），必须用两层结构：外层靠 切格式和断点，内层靠 srcset 提供同一格式下的多宽度版本。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 每个 的 srcset 只能用 w 或只用 x：写成 "a-400w.webp 400w, a-800w.webp 800w" ✅；混写 "a-400w.webp 400w, a@2x.webp 2x" ❌（Safari 可能整条忽略）
• WebP 必须放在 JPEG 之前；但 JPEG 不能写成 ，必须塞进 里——否则 IE、旧 WebView 直接空白
• sizes 必须写，且单位要真实：比如移动端占满屏就写 sizes="(max-width: 767px) 100vw, (min-width: 768px) 50vw"，不写或写成 "100%" 会导致浏览器误估宽度，拉下远超需要的大图

不是可选配件，而是强制兜底入口

不发请求， 才触发加载。没有它，整个结构静默失败——页面留白，控制台也不报错。

• <img src alt="如何在HTML中用picture标签结合WebP格式实现双重优化" > 必须指向一个真实可访问的 JPEG/PNG 地址，不能是 404、不能带动态参数如 ?format=webp，也不能是 base64（部分老浏览器 decode 失败）
• 首屏关键图要在 上加 fetchpriority="high"，加在 上无效
• 所有格式图片（WebP/JPEG/AVIF）必须构图一致、尺寸比例相同，否则切换时会出现拉伸或跳变
• 别在 CSS 里用 background-image: url(x.webp) 试图降级——CSS 不识别 type，也不协商格式，纯前端无解

最常被忽略的一点：WebP 图片本身必须经过合理压缩。用 quality=80 以上导出，避免色块；对全屏背景图，先裁剪核心区域（如 16:9），再转 WebP，比直接压原图效果好得多。工具推荐 Sharp（Node.js）、Squoosh（网页版），命令行可用 convert input.jpg -define webp:lossless=true output.webp。