src 必须指向真实可访问资源，不能为空或占位符；sizes 必须配对 srcset 使用并准确反映渲染宽度；picture 中 source 顺序决定格式优先级，type 值须严格匹配 MIME 类型；onerror 需加 this.onerror=null 防死循环。

srcset + sizes 必须配对写，不能只写一个

浏览器看到 srcset 但没配 sizes，就会按视口宽度硬算渲染尺寸，大概率加载远超需要的大图。比如手机上加载了 1200w 的 JPG，体积翻 3 倍，降级反而更慢。

常见错误写法：<img src="p.jpg" srcset="p-400.jpg 400w, p-800.jpg 800w" alt="HTML怎么在电商商品详情页配置srcset及降级展示" > —— 缺 sizes，浏览器默认用 100vw 算，iPhone SE（375px）也会去拿 800w。

• sizes 必须反映图片**实际渲染宽度**，不是容器宽度；例如轮播图在手机占满屏、桌面占半屏，就写：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 所有项必须统一用 w 描述符（如 p-400.jpg 400w），混用 x（如 1x）会让整个列表被忽略
• 兜底的 src 不能空、不能是 "#" 或 "placeholder.svg"（路径易错），得是 CDN 上真实可访问的 JPG，比如 src="https://cdn.com/p-800.jpg"

里 的 type 和顺序决定是否真生效

电商主图必须支持 WebP/AVIF，但 Safari ≤15.3、IE、旧安卓 WebView 不认这些格式——只靠 <img src="p.webp" alt="HTML怎么在电商商品详情页配置srcset及降级展示" > 就是白屏。唯一可靠方案是 <picture></picture>，但它不自动 fallback：浏览器从上到下匹配，第一个 media 为真且 type 被支持的 <source></source> 就加载，其余全跳过。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• type 值必须严格等于文件真实 MIME 类型：image/avif、image/webp，错一个字母（如 image/avif 写成 image/avif）就失效
• 顺序即策略：把兼容性最差但体积最小的放前面，比如 AVIF（Chrome 119+）→ WebP（Safari 12+）→ JPG（全兼容）
• 底部的 <img alt="HTML怎么在电商商品详情页配置srcset及降级展示" > 不是“备用”，是最终渲染载体；它的 src 必须可访问，否则整个 <picture></picture> 在旧浏览器里退化为空节点
• CDN 自动转码服务（如 Cloudflare Polish）必须返回 Vary: Accept 响应头，否则运营商缓存可能把 WebP 版本塞给 IE 用户，结果还是白屏

loading="lazy" 不能替代 data-src，src 永远不能空

不支持 loading="lazy" 的浏览器（如 Safari ≤15.3、多数安卓 WebView）会直接忽略该属性，只加载 src。如果 src 是空、"#"、或被 display: none 隐藏，图片就彻底不渲染——这不是懒加载失败，是降级链断了。

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

• src 必须始终指向一个真实可用资源：推荐 SSR 渲染出的低质 JPG（如 400px 宽），而不是 1×1 GIF 或 base64 占位符
• data-src（用于 JS 懒加载）必须静态存在于 HTML 源码中，不能由 JS 动态拼接或异步注入；断网时 JS 加载失败，data-src 就根本不存在
• 关键图（如商品主图、参数图、放大镜图）建议跳过懒加载：直接写死 src，不加 loading="lazy"，也不设 data-src
• 避免用 display: none 包裹图片容器——Safari 和多数 Android WebView 会直接跳过该元素，后续显示也无效

onerror 兜底要写对，否则循环触发

<img alt="HTML怎么在电商商品详情页配置srcset及降级展示" > 加载失败（404、跨域、MIME 错）时，onerror 是最后一道防线。但写错就会无限重试，卡死页面。

• 正确写法：onerror="this.src='/images/fallback.jpg'; this.onerror=null;" —— this.onerror=null 必须写，否则替换失败后再次触发 onerror，形成死循环
• fallback 图也要参与响应式：不能只给一张 800px JPG，得有 /images/fallback-400.jpg、/images/fallback-800.jpg，并配 srcset 和 sizes
• 别用 alt 当兜底内容：alt="" 或 alt="图片加载失败" 是错误做法；alt 只用于无障碍描述，比如 alt="iPhone 15 Pro 钛金属边框特写"
• 服务端 MIME 类型配错会导致静默失效：即使 HTML 写对，若 AVIF 文件返回的 Content-Type 是 image/jpeg，Chrome/Firefox 会直接跳过该 <source></source>，连 error 事件都不触发

关键点其实就一个：所有降级动作都得在 JS 执行前、网络中断时、旧浏览器里依然成立。最容易被忽略的是 src 的可用性、data-src 的静态存在、以及 onerror 的自清除逻辑。