关键图片必须用语义化<img>而非background-image，因其支持alt文本回退、无障碍访问及加载失败占位；需用<picture>实现多格式降级，且最外层<img>为必选兜底；首屏关键图须显式声明loading="eager"并设置width/height防布局偏移。
关键图片必须用 <img>，不能用 background-image
降级失效最常见的原因是把关键内容图片写成 CSS 背景。比如文章主图、产品图、表单图标等——一旦 JS 或 CSS 加载失败、用户禁用样式，background-image 就彻底消失，页面只剩空白或文字孤岛。
真正能降级的只有语义化 <img>：它自带 alt 属性作为文本回退，支持无障碍朗读，且浏览器在图片加载失败时会显示 alt 文本或占位框。
-
alt不是“可选说明”，而是降级路径的核心——必须写实质内容，比如alt="iPhone 16 Pro 钛金属边框特写"，而不是alt="图片" - 如果图片纯装饰性（如分隔线、阴影），才考虑
background-image，并确保它不承载任何关键信息 - 服务端渲染时，避免把
<img>包裹在<div>里再靠 JS 注入 src；应直接输出带src和alt的完整标签
srcset + sizes 不是降级，<picture> 才是真正的多层回退
很多人以为写了 srcset 就算做了兼容，其实它只负责“给不同设备选更合适的图”，并不解决浏览器不支持 WebP、AVIF 或根本没实现 srcset 的问题（如 IE11、旧版 Safari）。
要真正降级，得用 <picture>，并且最外层必须有 <img> 作为兜底：
立即学习“前端免费学习笔记（深入）”；
<picture> <source type="image/avif" srcset="hero.avif"> <source type="image/webp" srcset="hero.webp"> <img src="hero.jpg" alt="首页主视觉：城市夜景延时摄影"> </picture>
- IE11、老 Android 浏览器会忽略所有
<source>，直接加载<img>的src - 如果漏掉最后这行
<img>，那些浏览器就什么也看不到 -
alt必须写在<img>上，<source>不支持alt
懒加载不能加在首屏关键图上，loading="eager" 是必要显式声明
浏览器默认对 <img> 使用 loading="auto"（行为接近 eager），但部分新版本 Chrome/Firefox 在特定网络条件下会悄悄延迟首屏图——尤其当页面 HTML 较大、解析慢时。
对 banner、logo、核心产品图这类绝对不能“等滚动进来才加载”的图片，必须显式写：
<img src="logo.svg" alt="公司名称" loading="eager" width="180" height="40">
- 不写
loading属性 ≠ 一定立即加载；加loading="eager"是唯一能 100% 触发优先加载的手段 - 搭配
width/height属性，防止布局偏移（CLS） - 不要依赖 JS 懒加载库来“补救”——HTML 层面没声明，降级时 JS 失效就全盘崩
object-fit 和 max-width 不影响降级，但会影响 fallback 的可读性
CSS 样式本身不破坏降级逻辑，但会干扰 alt 文本的呈现效果。比如：
- 用
object-fit: cover裁剪图片，但alt描述的是整张图内容，用户只看到局部却听到全部描述，认知错位 - 用
max-width: 100%缩小高清图，若原图尺寸过大（如 5000×3000），降级后仍可能撑爆容器、触发横向滚动条 - 建议关键图统一用
width/height属性设定合理像素值（如 banner 图设为width="1200" height="400"），再用 CSS 控制响应式缩放
降级不是“让图片消失后还能看文字”，而是让用户在任何条件下，都能以最小代价理解这张图想传达什么——这个代价，往往藏在 alt 是否准确、<img> 是否裸露可用、以及 fallback 是否真被浏览器执行这三个地方。
