是html5实现webp兼容适配的核心方案，必须包含、其他可选及作为兜底的（src须为.jpg/.png），三者顺序不可错、type属性不可缺，否则导致兼容失效或图片不显示。

标签是HTML5中实现WebP兼容适配的核心方案，它不靠浏览器“猜格式”，而是明确告诉浏览器：哪些设备能用WebP，哪些必须退到JPEG或PNG。

关键结构不能少

必须包含三类元素，顺序和完整性都影响渲染：

• 带type="image/webp"的声明，放在最前面
• 可选其他提供JPEG、AVIF等备用格式，同样要写type属性
• 作为最后一个子元素，且src必须指向兼容性最强的格式（如.jpg或.png），不可省略

只用WebP做现代格式降级

如果只要解决“新浏览器用WebP、老浏览器用PNG”这个基本需求，结构足够简洁：

<picture><source srcset="icon.webp" type="image/webp">
  @@##@@
</source></picture>

浏览器看到type="image/webp"就判断是否支持该MIME类型——支持就加载WebP；不支持或不认识（如IE），就直接渲染。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

叠加响应式条件更灵活

当还要适配不同屏幕尺寸或像素密度时，可以把media和srcset一起用：

• 用media="(max-width: 768px)"指定小屏用哪组图
• 同一里用srcset="photo@1x.webp, photo@2x.webp 2x"适配Retina屏
• 每个都要带type，否则浏览器无法识别格式意图

例如移动端优先加载WebP，桌面端同时提供@1x/@2x WebP和对应JPG：

<picture><source media="(max-width: 768px)" srcset="mob-webp.webp" type="image/webp"><source media="(max-width: 768px)" srcset="mob-jpg.jpg" type="image/jpeg"><source media="(min-width: 769px)" srcset="desk-1x.webp, desk-2x.webp 2x" type="image/webp"><source media="(min-width: 769px)" srcset="desk-1x.jpg, desk-2x.jpg 2x" type="image/jpeg">
  @@##@@
</source></source></source></source></picture>

常见错误要避开

这些写法看似合理，实际会导致图片不显示或兼容失效：

• 把WebP直接写在里——Safari 13.1之前、旧版Edge、多数安卓WebView会空白
• 漏掉标签，或把它放在前面——所有浏览器都会忽略全部
• 没写type属性——浏览器无法判断是否支持，可能跳过该源
• 用文件后缀判断格式（比如以为“.webp”就能触发兼容）——浏览器只认type值，不看扩展名

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！