图片加载速度取决于浏览器请求时机、资源选择与格式，优化需从资源声明、加载时机、格式选择三方面入手：用预加载首屏关键图；配齐sizes与srcset确保正确分辨率；慎用loading="lazy"，首屏图应禁用；webp预加载需fallback且避免过度preload。
图片加载快不快，不取决于你写了多少 HTML，而取决于浏览器什么时候发起请求、加载哪张图、用什么格式、是否阻塞渲染。真要提速，得从资源声明、加载时机、格式选择三处下手。
用 <link rel="preload"> 提前拉取首屏关键图
这是最轻量、最可控的“真正预加载”方式，适用于 banner、logo、首屏商品主图这类用户一打开就该看到的图。
-
as="image"必须写，否则浏览器不会按图片类型设置请求头和缓存策略 -
href路径必须基于当前 HTML 文档位置解析，比如 HTML 在/blog/post.html，那href="img/hero.webp"实际请求的是/blog/img/hero.webp -
fetchpriority="high"可选，Chrome 109+ 支持，能抢在其他资源前发起请求 - 不支持 JS 拼接路径，
href="/assets/hero-<span class="math-inline">VERSION</span>.webp"这种写法会失效
示例：
<link rel="preload" as="image" href="/assets/hero.webp" fetchpriority="high">
给 <img> 配好 sizes + srcset 避免错载大图
很多“加载慢”其实是浏览器瞎猜尺寸，结果在手机上拉了一张 2000px 宽的桌面图。只要配对 sizes 和 srcset，浏览器就能选对分辨率版本。
-
sizes值必须反映图片在页面中的真实占位宽度，比如侧边栏里固定 300px 宽的图，就写sizes="300px" - 响应式场景推荐：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset中的w描述符（如800w）必须和原图真实像素宽度一致，否则格式切换会出错 - 别只写
srcset不配sizes，那是把选择权交给浏览器瞎猜
错误写法：<img src="small.jpg" srcset="big.jpg 2x"> → 浏览器不知道这张图多宽，无法判断要不要用 2x
正确写法：<img src="small.jpg" srcset="small.jpg 400w, big.jpg 800w" sizes="400px">
慎用 loading="lazy"，它不是万能开关
这个属性只对初始 HTML 中存在、且不在首屏视口内的 <img> 生效。写错了位置，等于没写。
- Vue 的
v-for、React 的map()渲染出来的图，DOM 是 JS 后续挂载的，loading="lazy"直接静默失效 - 父容器加了
overflow: hidden、transform或contain: layout，会干扰浏览器可视性判断 -
<picture></picture>里给<source></source>加loading="lazy"没用，该属性只对<img>有效 - 首屏关键图如果误加了
loading="lazy"，可能被延迟甚至跳过，导致白屏
真正想懒加载，优先用 IntersectionObserver 自己控制逻辑；想快，就删掉 loading="lazy"，改用 <link rel="preload">。
WebP 预加载必须带 fallback，且不能只靠 <picture></picture>
预加载 WebP 图时，如果浏览器不支持 WebP（比如旧版 Safari），<link rel="preload"> 会失败，且没有降级机制。仅靠 <picture></picture> 的 <source type="image/webp"></source> 也不行——预加载是独立于 DOM 渲染的提前行为。
- 必须同时预加载 WebP 和 fallback 格式（如 JPEG），并用 JS 判断支持后才赋值给
<img src> - 或者放弃预加载 WebP，直接用
<img src="fallback.jpg" srcset="webp.jpg 1x" sizes="...">，让浏览器自己选 - 不要在
<link rel="preload">里写type="image/webp"，它不认这个属性
容易被忽略的一点：预加载资源有优先级竞争。如果 preload 太多，反而会挤占关键 JS/CSS 的带宽，首屏仍卡顿。建议只对最多 3 张首屏核心图做 preload。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
