HTML source标签图片格式适配与加载性能提升-html教程-PHP中文网

浏览器不加载 WebP 是因 type 值非法或服务器 Content-Type 不匹配，且需同时满足 media 查询和格式支持；兜底 img 必须用 JPEG 等兼容格式，srcset 应精简并配 sizes。

html source标签图片格式适配与加载性能提升

为什么写了 `type="image/webp"` 却没加载 WebP

浏览器不会“猜”你是不是想用 WebP，它只做两件事：检查 type 值是否合法、再确认服务器返回的 Content-Type 是否严格匹配。常见静默失败点包括：

type 写错：比如 type="webp"（缺 image/）、type="image/webp;"（多分号）、type="image/jpg"（应为 image/jpeg）
服务器没配 MIME 类型：Nginx/Apache 未声明 image/webp 或 image/avif，返回 text/plain 或 application/octet-stream，Safari 就直接跳过该
没配 srcset：只有 type 和 media，但没给路径，等于空配置，浏览器忽略
顺序放错：把 type="image/jpeg" 放最前，浏览器一匹配就停，后面更优格式永远不触发

中 `media` 和 `type` 是 AND 关系

一个要生效，必须同时满足媒体条件和格式支持——不是“满足任一就行”。比如：

<source media="(min-width: 768px)" type="image/webp" srcset="hero-webp.webp"><source media="(min-width: 768px)" type="image/jpeg" srcset="hero-jpeg.jpg"></source></source>

在 800px 宽度的 Chrome 里，第一行会命中；但在 iOS 15 Safari（不支持 AVIF，WebP 支持但部分 CDN 返回头异常），可能两个都跳过，最终走。关键点：

media 必须是完整媒体查询，media="max-width: 768px" ❌（缺括号），media="(max-width: 768px)" ✅
type 不参与媒体判断，只管解码能力；即使 media 匹配，type 不支持或服务器头不匹配，照样跳过
老浏览器（IE、Android 4.4 WebView）完全忽略，只读，所以兜底图不能指向 WebP

如何避免 `srcset` 冗余拖慢解析与预加载

浏览器在 HTML 解析阶段就会扫描所有 srcset 候选项，哪怕某张图永远用不上，也会进预加载队列。常见冗余写法：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

堆砌所有宽度：从 320w 到 3840w 每隔 100px 写一条，实际 CSS 只在 768px、1200px 两级断点切换布局
混用 w 和 x：同一 srcset 里出现 "a.jpg 400w, b@2x.jpg 2x"，Chrome 可能整个值丢弃
没配 sizes：浏览器默认按 100vw 算，导致小屏设备也拉 1200w 图，浪费带宽

实操建议：只保留真实 CSS 布局中图片容器的渲染宽度点，例如 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，对应 srcset 仅写 "small.jpg 400w, medium.jpg 800w, large.jpg 1200w"。