<picture> 更适合节日 Banner 切换，因其支持响应式源选择，能按屏幕尺寸、DPR 和格式（如 WebP）精准加载最优资源，避免带宽浪费与模糊，且浏览器仅下载匹配的 <source>；<img> 仅为必设 fallback。

为什么 <picture> 比单纯用 <img> 更适合节日 Banner 切换

因为节日 Banner 通常需要适配不同屏幕尺寸、DPR（如 Retina 屏）和网络条件，<picture> 能按需加载最合适的资源，避免大图在小屏上浪费带宽，或小图在 2x 屏上模糊。它不是“多图轮播”，而是响应式源选择——同一视觉内容，多套资源供给。

关键点：浏览器只下载并渲染匹配的 <source>，其余被忽略；<img> 是 fallback，必须存在且带 src 和 alt。

如何用 media 和 srcset 区分节日与日常 Banner

把节日 Banner 当作“条件性覆盖”：日常版是默认，节日版在特定日期或设备条件下激活。不推荐 JS 动态改 DOM，而应靠 HTML 原生能力 + 极简 CSS 控制。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 用 media 属性判断视口宽度（如 media="(min-width: 768px)"），而非节日类型
• 节日区分靠文件路径命名或构建时注入，例如：日常用 /banner.jpg，春节用 /banner-spring-festival.jpg
• srcset 里放同一节日图的多分辨率版本，用 w 或 x 描述符，如 "banner-spring-festival-1x.jpg 1x, banner-spring-festival-2x.jpg 2x"
• 务必为每个 <source> 显式指定 type（如 type="image/webp"），否则部分浏览器会跳过

<picture>
  <source media="(min-width: 768px)" type="image/webp" srcset="/banner-spring-festival-1x.webp 1x, /banner-spring-festival-2x.webp 2x">
  <source media="(min-width: 768px)" srcset="/banner-spring-festival-1x.jpg 1x, /banner-spring-festival-2x.jpg 2x">
  <source type="image/webp" srcset="/banner-spring-festival-mobile.webp">
  <img src="/banner-default.jpg" alt="节日主题 Banner">
</picture>

构建时替换 vs 运行时 JS 切换：哪个更稳

构建时替换（如用 Webpack DefinePlugin 注入变量、或 CI/CD 根据日期生成不同 HTML）几乎零运行时风险，首屏直出即节日图；JS 切换要等 DOM 加载、判断日期、再替换 src，可能闪动或延迟。

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

• 如果节日周期固定（如春节 1.21–2.20），建议构建时处理：用环境变量控制是否启用节日 <source> 块
• 若需实时生效（如“今天是情人节就显示玫瑰 Banner”），JS 必须在 <head> 内同步执行，且只修改 <img> 的 src，别动 <source> —— 浏览器已解析完 <source> 后不会重新评估
• 注意：Safari 对动态插入 <source> 支持不稳定，不要在 JS 里 append 新 <source>

容易被忽略的兼容性坑

<picture> 在 IE 完全不支持，哪怕加了 polyfill（如 picturefill），也仅模拟行为，不触发原生懒加载或 DPR 检测。如果你的项目还需兼容 IE，别用 <picture> 做节日切换，改用 CSS background-image + 媒体查询更可靠。

• Android 4.4 WebView 不支持 srcset 中的 x 描述符，只认 w，所以节日图的 2x 版本要用 1920w 这类写法，并配 sizes
• <img> 的 src 必须指向可用资源，即使只是占位图；空 src 或 404 会导致 fallback 失败，整个 Banner 不显示
• CDN 缓存常忽略 Accept: image/webp 请求头，导致 type="image/webp" 的 <source> 被返回 404 —— 要确认 CDN 开启了基于请求头的内容协商

节日 Banner 的核心不是“换得多快”，而是“换得准、不崩、不闪”。<picture> 的能力边界很清晰：它只管源选择，不管时间逻辑。日期判断、资源路径生成、缓存策略，都得在它之外想清楚。