原生 loading="lazy" 无法防止布局偏移（CLS），必须结合 aspect-[w/h] 锁定宽高比、bg-gray-200 占位背景及 IntersectionObserver 控制 opacity 渐进过渡，并由框架（如 next/image）或 CDN 统一处理响应式图片源。
原生 loading="lazy" 不足以防止布局偏移（CLS），必须配合显式宽高比、占位背景和渐进式过渡才能真正优化响应式图片加载体验。
用 aspect-[w/h] + bg-gray-200 锁定容器尺寸
图片加载前留白是 CLS 的主因，仅靠 loading="lazy" 无法解决。关键在于让容器在图片加载前就占据正确空间。
-
aspect-[4/3]比aspect-video更可靠——后者在断点切换时可能被重置，而自定义比例始终生效 - 必须搭配固定背景色（如
bg-gray-200），避免透明或无背景导致的“闪白” - 不要依赖
width和heightHTML 属性：Tailwind 中它们不参与布局计算，aspect-[w/h]才是唯一能触发 CSSaspect-ratio的方式 - 若使用
@apply封装该组合，需确保aspect-[x/y]字符串真实出现在模板或 JS 中，否则 PurgeCSS 会删掉对应 CSS 规则
用 IntersectionObserver 控制 opacity 过渡时机
浏览器原生懒加载只管 src 请求时机，视觉淡入得靠 JS 主动触发，但无需重型库。
- 监听带
loading="lazy"的<img>元素，与原生行为对齐，降级友好 -
rootMargin: '50px'提前触发，避免快速滚动时图片进入视口才开始过渡 - 只加
opacity-100类，不替换src——让浏览器继续用原生机制加载，JS 仅负责视觉层 - 加载后立即调用
observer.unobserve(img)，避免重复执行
响应式图片源应由框架层统一处理，而非手写 srcset
手动维护 srcset 和 sizes 容易出错，且 Tailwind 不介入资源分发逻辑。
立即学习“前端免费学习笔记（深入）”；
- Next.js 项目优先用
next/image：自动提供 WebP/AVIF、尺寸裁剪、width/height校验、CDN 缓存 - 纯静态站点可借助 Cloudflare Images 或 imgix 等 CDN，用 URL 参数动态生成适配尺寸（如
?width=800&format=webp） - 禁止在 HTML 中硬编码大图 URL（如 Unsplash 的
w=1770），移动端会白下 1.7MB - Tailwind 的
sm:w-full md:w-1/2类只控制容器尺寸，不影响实际加载资源——这点常被误认为“已响应式”
最易忽略的是：aspect-[w/h] 必须与图片原始宽高比一致，否则 object-cover 会裁切错误区域；而 IntersectionObserver 的 rootMargin 若设为 0，则用户看到图片边缘时才触发，过渡感会断裂。
