图片加载太慢该怎么优化？

这个问题挺常见的，WebP 轉換和 picture 標籤你已經做了，但加載還是慢，通常是幾個原因疊加在一起的。讓我一步步帮你分析。

第一步：確認圖片本身是否夠小

WebP 只是格式对了，但文件大小才是关键。你先检查一下 banner.webp 的实际文件体积多大？建议控制在 150KB 以内，最好 80-120KB。如果还是几百KB，可以再用工具压一遍，比如 TinyPNG 的 WebP 版本或者 Squoosh 里面手动调一下质量参数，一般 75-80% 质量肉眼看起来差别不大，但体积能少一半。

第二步：响应式图片 srcset + sizes

你的图片是 1920x600，但用户可能用手机打开，1920 宽度的图片在手机上会浪费大量流量和解析时间。改成响应式写法，让不同屏幕加载不同尺寸的图片：

<img 

  src="banner-800.webp" 

  srcset="

    banner-400.webp 400w,

    banner-800.webp 800w,

    banner-1200.webp 1200w,

    banner-1920.webp 1920w

  "

  sizes="(max-width: 768px) 100vw, 1920px"

  alt="首页横幅"

  width="1920"

  height="600"

  loading="eager"

>

这里 sizes 的意思是：手机端（宽度小于 768px）图片占满屏幕宽度，其他情况固定用 1920px。loading="eager" 明确告诉浏览器这是首屏关键图片，不要懒加载。

第三步：预加载关键图片

浏览器默认是等 HTML 解析到 img 标签才开始加载图片，你可以用预加载提前告诉浏览器：

<link rel="preload" as="image" href="banner-1920.webp" imagesrcset="banner-400.webp 400w, banner-1920.webp 1920w" imagesizes="1920px">

这样浏览器在解析 HTML 之前就开始下载图片了，首屏显示会快很多。不过注意 as 和 imagesrcset 要匹配正确。

第四步：CDN 是有用的

如果还没用 CDN，强烈建议上一个。CDN 不仅能加速访问，还能做图片格式自动转换（比如自动转 WebP、AVIF）、边缘缓存、压缩。Cloudflare 免费版就够用，国内的话阿里云、腾讯云的 CDN 也不贵。CDN 对首屏加载的提升是明显的，因为用户可以从离他最近的服务器获取图片。

第五步：关于 CSS background 和 img 标签的区别

CSS background-image 适合装饰性图片，对 SEO 没帮助，而且无法用 srcset 响应式。img 标签是语义化的，搜索引擎能识别，对 SEO 好，也能用 srcset。

但 CSS background 有一个好处是可以用 CSS 动画做渐显效果，看起来不那么突兀。如果 banner 不需要 SEO 优化（比如是纯展示性质的），用 background-image 也可以，配合媒体查询做响应式：

.banner {

  background-image: url('banner-400.webp');

  background-size: cover;

  background-position: center;

}



@media (min-width: 768px) {

  .banner {

    background-image: url('banner-800.webp');

  }

}



@media (min-width: 1200px) {

  .banner {

    background-image: url('banner-1920.webp');

  }

}

第六步：检查是否有其他阻塞因素

有时候图片加载慢不是图片本身的问题，而是页面其他资源阻塞了。可以打开 Chrome 开发者工具的 Network 面板，看看 waterfall 里图片请求是否被其他东西挡住了。如果是，可能需要把 CSS 放到 head 里、JS 放到 body 底部，或者用 defer/async 加载 JS。

总结一下执行顺序：

先确保图片文件足够小（压缩），然后加 srcset 做响应式，再上 CDN，最后考虑预加载。这几个组合起来，首屏加载应该能快很多。如果还不行，可以考虑把 banner 拆成多张小图或者用 CSS 渐变代替部分图片内容。

你先按这个顺序试试，有问题再贴具体代码来问。