浏览器按顺序选取首个匹配media且type支持的source加载，type必须与服务器content-type完全一致，多条件需分条写，兜底图须有效合理。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

标签本身不加载图片，它只是把选择权交给浏览器——你写对条件，浏览器才敢挑最优格式；写错一个括号、一个 MIME 类型，所有都会被跳过，只剩兜底。 核心逻辑就一条：浏览器从上到下扫描，遇到第一个 media 匹配成功 且 type 支持 的，就加载它的 srcset；其余全忽略。

格式回退必须靠 type + 顺序

type 属性决定现代格式能否被采用，但前提是服务器返回的 Content-Type 必须完全一致：

• 写 type="image/avif"，Nginx 或 CDN 就得返回 Content-Type: image/avif（大小写、拼写、前缀都不能错）
• 写 type="image/webp"，不能写成 webp 或 image/jpg，否则 Chrome 显示 blocked:mime-type
• 顺序决定优先级：把 AVIF 放最前，WebP 次之，JPEG/PNG 作为兜底放最后或交给 —— 浏览器只取第一个支持的

多条件组合要拆开写，不能混用

想同时适配“大屏 + AVIF”和“小屏 + WebP”，就得为每种组合单独写一条：

• ✅ 正确：<source media="(min-width: 1200px)" type="image/avif" srcset="hero-large.avif"></source>
• ✅ 正确：<source media="(max-width: 767px)" type="image/webp" srcset="hero-mobile.webp"></source>
• ❌ 错误：<source media="(min-width: 1200px)" srcset="hero.avif, hero.webp"></source> —— type 缺失，浏览器无法按格式选，只能当普通 URL 处理

兜底图必须真实有效，且尺寸合理

src 必须指向一张真实存在的图（如 hero-fallback.jpg），不能是空值或 404 链接

这张图建议是小屏通用尺寸（比如 400w 宽），避免不支持 的设备拉伸失真

alt 属性不可省，这是可访问性的刚性要求

验证是否生效，看 Network 面板

别猜，直接打开开发者工具：

• 检查请求的响应头，确认 Content-Type 和你写的 type 完全一致
• 看加载的是哪条 source —— 如果始终只加载 的 src，大概率是 media 写错括号、断点重叠，或 type 不匹配
• 在不同设备模拟下刷新，观察是否切换了资源路径