HTML5 响应式图片应使用 包裹多个 按格式优先级声明（WebP→AVIF→JPEG/PNG），每个 用 srcset 提供多尺寸版本， 上设 sizes 统一控制响应逻辑，并确保服务器正确返回 MIME 类型及启用压缩。

在 HTML5 中，为响应式图片提供多种现代图像格式（如 WebP、AVIF）并兼顾兼容性，核心是用 元素包裹多个 声明，再以 作为最终回退。这种方式让浏览器按顺序尝试加载支持的最优格式，跳过不识别的类型，从而节省带宽、加快解码。

用 + 按格式优先级声明

浏览器从上到下解析 ，一旦遇到支持的 type（如 image/webp），就停止后续检查，直接加载对应 srcset 的资源。推荐把压缩率最高、兼容性较好的格式放在前面：

• WebP 放第一：目前所有主流浏览器均支持，比 JPEG 平均小 30%，解码快
• AVIF 放第二（可选）：更优压缩，但 Safari 16.4+、Chrome 85+ 才稳定支持，适合对性能极致要求的项目
• JPEG 或 PNG 作兜底：确保旧浏览器或特殊环境仍能显示

示例代码：

 
 
 

结合响应式尺寸，避免格式与分辨率脱节

单有格式切换还不够——若所有 都只给一张图，高 DPR 设备仍可能拉取模糊图。应在每个 内部使用 srcset 提供多尺寸版本，并统一用 sizes 定义布局宽度，让格式优势真正落地：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 每个 的 srcset 应包含同名图像的不同宽度（如 photo-480w.webp、photo-800w.webp）
• sizes 属性写在 上（不是 ），它影响所有 的选择逻辑
• 确保各格式的图片尺寸命名一致、比例相同，否则浏览器无法准确匹配

完整示例：

                            type="image/webp">
                            type="image/avif">
        srcset="photo-480w.jpg 480w,
                 photo-800w.jpg 800w,
                 photo-1200w.jpg 1200w"
      sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
      alt="山景照片">

服务端配合：确保 MIME 类型正确且开启压缩

即使前端写对了 type，若服务器未正确返回 Content-Type 头，浏览器会忽略该 ：

• WebP 文件需返回 Content-Type: image/webp
• AVIF 文件需返回 Content-Type: image/avif
• 静态服务器（如 Nginx、Apache）需配置 MIME 类型映射；CDN（如 Cloudflare、Cloudinary）通常默认支持，但建议验证响应头
• 同时启用 Brotli 或 Gzip 压缩，进一步减小传输体积

验证是否生效的简单方法

打开 Chrome DevTools → Network 面板，刷新页面后筛选图片请求：

• 查看实际加载的是 .webp 还是 .avif，确认格式优先级生效
• 对比同张图的 JPEG 版本大小，验证带宽节省效果
• 切换设备模拟器（如 iPhone SE / iPad Pro），观察不同 DPR 下是否自动加载 2x/3x 版本
• 禁用 JavaScript 后重试，确认 的原生行为不受影响