必须显式使用 loading="eager" 锁定首屏关键图（如lcp元素）加载，避免默认懒加载导致渲染延迟；srcset 与 sizes 必须配套使用，sizes 需准确匹配实际布局断点（如 "(max-width: 768px) 100vw, 50vw"），srcset 至少提供 320w 和 1200w 两档适配，fallback 图须小且压缩，禁用 picture 媒体查询与 type 切换以保障弱网确定性。
用 srcset + sizes 配合 loading="eager" 锁定首屏图片加载行为
弱网下浏览器对 srcset 的解析虽快，但默认懒加载（loading="lazy"）会进一步延迟首屏关键图渲染，导致 LCP 拖延。必须显式声明 loading="eager"，且仅用于 LCP 元素所含的 <img>。
常见错误是只写 srcset 却忽略 sizes，导致浏览器无法预判宽度、误选大图；或把所有图都设为 eager，浪费带宽。
-
sizes必须匹配实际布局断点，例如sizes="(max-width: 768px) 100vw, 50vw"，不能写成固定值如"500px" - 首屏主图的
srcset应包含至少两个尺寸：一个适配 320px 屏（如320w），一个适配桌面（如1200w），避免 fallback 到未压缩的原始图 - 禁用
<picture></picture>中的<source media></source>嵌套复杂查询——弱网下媒体查询计算耗时，且部分旧浏览器不支持
用 <img src="lqip.jpg" ...> 替代 JS 驱动的渐进式加载
靠 JS 动态替换 src 或切换 class 实现“低清→高清”流程，在 JS 失效或执行滞后时，屏幕阅读器读不到 alt、onload 不触发、视觉上长期卡在空白或模糊占位符，可访问性直接断裂。
真正可行的是服务端直出底图，且该图必须是真实 <img> 标签：
- 底图格式优先 WebP（体积小），尺寸控制在 1–2KB，用
blur(2px)+opacity: 0.7视觉降噪，而非纯色背景 - 高清图通过
fetch()+AbortController加载，超时 1500ms 后放弃；成功后用img.src = url替换，并同步调用img.dispatchEvent(new Event('load'))补全事件流 - 若高清图加载失败，保留底图并显示提示文本：
<p role="status">图片加载较慢，已显示简化版本</p>
禁用 @media 和 picture 中的 type 切换逻辑
弱网下 CSS 媒体查询解析和 <source type="image/webp"></source> 的 MIME 类型探测都会引入不可控延迟，部分安卓 WebView 甚至会因类型协商失败而回退到空 <img>。
关键 CSS 内联时，已剥离所有 @media (prefers-reduced-motion) 和高分辨率查询；图片资源层面也应规避条件分支：
- 不要写
<source media="(min-resolution: 2dppx)" srcset="hero@2x.jpg"></source>，统一用srcset的w描述符按宽度选图 - WebP 支持检测必须服务端完成（如通过
Accept请求头），不在 HTML 中做客户端判断 - 所有
<img>必须带alt，且内容与底图语义一致；禁止alt=""或仅用于装饰的图片用role="presentation"显式声明
绕过 decode() 阻塞，用 createImageBitmap() 控制解码时机
大图调用 img.decode() 会在主线程阻塞渲染，弱网下高清图下载完成后再解码，极易引发 layout thrashing。更可控的方式是延迟解码，等用户即将滚动到视口再触发。
实操中需配合 IntersectionObserver：
- 初始
<img>的src指向轻量底图，高清图 URL 存在data-src属性中 - 当
IntersectionObserver触发进入视口（阈值设为0.1），再用createImageBitmap()解码高清图，成功后赋值给img.src - 注意：Safari 目前不支持
createImageBitmap()从 blob 解码，fallback 方案仍需new Image().src = url，但要加onload节流防重复触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
