很多人优化网站速度，第一反应是换服务器、加 CDN，却忽略了最直接的一块：图片。一个普通企业站首页，图片往往占了整页体积的六成以上。把图片处理好，常常不用多花一分钱，打开速度就能明显变快。
一、先确认问题：图片到底拖了多少后腿
动手之前，先用浏览器自带的工具看一眼，别凭感觉猜。
- 用无痕窗口打开你的网站首页，按 F12 打开开发者工具。
- 切换到网络（Network）面板，然后刷新页面。
- 看面板底部的总传输量，以及按体积从大到小排序后的前几项。
- 如果排在最前面的清一色是 jpg、png 图片，基本可以确定问题就出在图片上。
判断标准可以这样定：首页首屏需要加载的图片总体积，控制在 500KB 以内比较理想；单张图片超过 300KB，就值得处理一下。
二、尺寸：显示多大就出多大
最常见的问题，是把相机或手机拍的原图直接上传。一张 4000 像素宽的照片，在网页上只显示 800 像素宽，多出来的像素全是白白下载的流量。
处理原则是：图片的实际像素宽度，不要超过它在页面上显示的最大宽度。比如正文配图在电脑上最多显示 800 像素宽，就把它压到 800 像素宽。要兼顾高清屏，最多放大到两倍，再大就没有意义了。
还有一种情况要避免：用网页代码把大图强行缩小显示。那只是看起来变小，文件本身一点没瘦。
三、格式：不同场景选不同格式
- JPG：适合照片和有渐变的产品图，压缩率高，代价是轻微失真。
- PNG：适合需要透明背景的 logo、图标；用在照片上体积会大得离谱。
- WebP：目前主流浏览器都支持，同样画质下通常比 JPG 小两三成，适合绝大多数网页图片。
- SVG：适合图标和简单线条图形，放大不失真，体积极小。
实操建议：照片统一转成 WebP；图标优先用 SVG；确实需要透明背景、又只有 PNG 时，先压缩一遍再用。用哪个压缩工具并不重要，能导出 WebP 并能看到体积变化就够了。
四、加载方式：别让图片堵在首屏
首屏之外的图片，比如要滚动才看到的商品图、文章配图，可以设置成“懒加载”，也就是浏览器滚动到它附近时才去下载。
- 给图片所在的 img 标签加上 loading 等于 lazy 的属性，这是浏览器原生支持的方式，不需要额外插件。
- 首屏第一张大图不要加懒加载，否则反而会延迟显示。
- 给图片写上明确的宽度和高度属性，这样图片没加载出来时位置不会跳动，页面也就不用“抖”一下。
五、改完再测一次，看数字说话
调整完成后，回到开发者工具的网络面板，用同样的方式再测一遍，对比总传输量和首屏图片体积。如果首页从两三兆降到几百 KB，说明方向是对的；如果仍然慢，再按服务器、CDN 的顺序往下查。
一句话总结：先量、再压、换格式、按需加载。大多数网站的提速，其实不需要换服务器。