直接写src会导致浏览器立即加载图片，无论是否在视口，造成流量浪费和首屏延迟；srcset+sizes通过声明候选图与渲染尺寸，使浏览器精准选择最匹配资源；loading="lazy"需配合width/height、srcset+sizes及首屏eager加载才有效。
为什么直接写 src 会导致资源浪费
浏览器一解析到 <img src="big.jpg"> 就立刻发起请求，不管图片在不在视口、用户会不会看到。移动端加载一张 2MB 的桌面图，既耗流量又拖慢首屏，还可能触发带宽限速。更隐蔽的问题是：多个同尺寸图片重复请求同一张图（比如 banner 多处复用），但没共用缓存标识，导致多次下载。
srcset + sizes 怎么让浏览器选对图
关键不是“给多张图”，而是告诉浏览器“什么条件下该用哪张”。srcset 列出候选图及其宽度信息，sizes 描述它在页面中实际占多大空间——两者配合，浏览器才能算出该加载哪张最匹配的图。
-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 300px"表示：小屏占满宽度，中屏占一半，大屏固定 300px 宽 -
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"提供三张不同分辨率的图 - 浏览器根据
sizes算出目标宽度，再从srcset中挑出最接近且不小于该宽度的图源
漏掉 sizes 或写成固定值（如 sizes="100vw"）会让浏览器默认按视口宽度选图，失去响应式意义。
懒加载不能只靠 loading="lazy"
原生 loading="lazy" 只对非首屏图片生效，且不支持自定义阈值或 fallback。遇到以下情况会失效：
- 父容器用了
transform或overflow: hidden，导致 Intersection Observer 无法检测进入视口 - 图片在折叠面板、Tab 页签里，初始
display: none，浏览器直接跳过监听 - 需要预加载下一张图（比如轮播），但
loading="lazy"不提供预取能力
稳妥做法是：首屏图用真实 src，非首屏统一用 data-src，再配一个轻量级 IntersectionObserver 实例，手动控制替换时机，并加 height/width 防布局抖动。
WebP/AVIF 图片怎么安全降级
现代格式体积小，但老浏览器打不开。不能只写 <img src="photo.webp"> —— Safari 13 之前、IE 全系直接显示空白。
- 用
<picture></picture>包裹，<source type="image/webp"></source>放前面，<img src="photo.jpg">作兜底 - 不要依赖 JS 检测格式支持再换图：JS 执行前图片请求已发出，白屏风险高
- CDN 自动转码（如 Cloudflare Polish、CloudFront Lambda@Edge）可省去多份图维护，但需确认其生成的
Content-Type正确（image/webp），否则浏览器不识别
真正容易被忽略的是：服务端要同时返回 Vary: Accept 响应头，否则中间代理可能把 WebP 缓存错发给不支持的客户端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
