打开一个网页，最占带宽的资源十有八九是图片。一张没经过处理的手机照片，动辄三五MB，比整个页面其他资源加起来还大。图片优化做得好不好，直接决定页面的加载速度、用户体验，甚至搜索引擎排名。本文从格式、体积、命名、加载策略几个方面，聊聊网站图片到底该怎么优化。
一、选对图片格式是优化的第一步
很多网站至今还在无脑使用JPG和PNG，其实现在的选择已经丰富很多。不同格式各有适用场景，选错了格式，后面再怎么压缩效果也有限。
JPG（或JPEG）是最老牌的有损压缩格式，适合色彩丰富的照片类图片，比如产品实拍、风景图。它的优点是兼容性极好，缺点是不支持透明，压缩后容易出现噪点。PNG则分PNG-8和PNG-24两种，支持透明背景，适合图标、Logo、需要保留锐利边缘的图形，但文件体积通常偏大，用它放照片基本等于浪费流量。
现在更推荐的是新一代格式。WebP由Google推出，同等画质下体积比JPG小25%到35%，同时支持有损、无损和透明，主流浏览器已经全部支持。AVIF更激进，压缩率比WebP还要再低20%左右，不过编码速度较慢，浏览器支持也稍逊一筹。实际操作中可以用WebP做主力格式，配合picture标签做降级方案，老浏览器自动回退到JPG。另外，纯色图标、简单装饰图形建议直接用SVG矢量格式，体积小到可以忽略，而且怎么放大都不会糊。
| 格式 | 压缩类型 | 是否支持透明 | 适用场景 |
|---|---|---|---|
| JPG | 有损 | 否 | 照片、色彩丰富的图片 |
| PNG | 无损 | 是 | 图标、Logo、透明背景图 |
| WebP | 有损/无损 | 是 | 绝大多数场景的通用选择 |
| AVIF | 有损/无损 | 是 | 追求极致体积的场景 |
| SVG | 矢量 | 是 | 图标、简单图形 |
二、压缩与尺寸控制：别让浏览器替你缩图
选好格式之后，第二步是压缩和控制尺寸。这里有个非常常见的错误做法：把原图直接传上去，再用CSS把宽高改成300像素。浏览器虽然显示的是小图，实际下载的还是那个几MB的大文件，白白浪费流量和时间。
正确的做法是按照实际显示尺寸输出图片。页面上显示多大，就上传多大的图，需要响应式适配的话，准备多个尺寸版本，配合srcset属性让浏览器自己挑选合适的那个。比如一张banner图，桌面端输出1920宽，移动端输出750宽，两套图各取所需。
压缩工具方面，可选的很多。本地处理可以用TinyPNG、ImageOptim、Squoosh（网址：squoosh.app），批量处理则推荐在构建流程里集成压缩插件，比如前端的image-webpack-loader或sharp。压缩强度上，照片类图片质量设到70到80通常肉眼很难分辨差异，体积却能砍掉一半以上。别小看这个数字，一个图片较多的页面，光靠压缩就能把加载体积从10MB降到3MB以内。
三、alt文本与文件命名：给搜索引擎看得懂的信息
图片优化不只是技术层面的事，还涉及SEO。搜索引擎的爬虫看不懂图片内容，它主要依赖两个信息源：alt属性和文件名。alt文本是图片加载失败或被读屏软件朗读时显示的替换文字，也是图片搜索排名的重要依据。
写alt文本有几个原则：准确描述图片内容，自然融入关键词，不要堆砌，不要留空。比如一张蓝色运动鞋的产品图，alt写成“蓝色轻便跑步鞋产品实拍图”就比“图片1”或者“鞋 鞋 鞋 运动鞋 跑步鞋”好得多。文件命名同理，上传前把IMG_2041.jpg改成blue-running-shoes.jpg，比一串随机字符更有价值。中文站可以用拼音或英文关键词命名，避免使用中文文件名，因为部分服务器对中文路径的处理不太稳定。
另外，图片周边的文字内容也会被搜索引擎拿来判断图片相关性，所以让图片出现在语义相关的段落附近，配合合理的alt和文件名，图片搜索带来的流量会有明显提升。
四、懒加载与预加载策略
页面再快，也不该让用户为首屏之外的图片买单。懒加载的思路很简单：图片进入视口之前不加载，用户滚动到哪，加载到哪。原生实现只需要在img标签上加loading="lazy"属性，浏览器会自动处理，不需要引入任何JS库。
需要注意的是，首屏关键图片不要懒加载，比如页头banner、首屏产品主图，这些图应该尽快呈现，懒加载反而会让首屏出现空白闪烁，影响体验评分。更进一步，可以对首屏大图使用preload或fetchpriority="high"提升加载优先级，同时对非关键图片降级处理，一升一降之间，LCP（最大内容绘制）指标能改善不少。
占位符也值得一提。图片加载前预先设置好宽高属性，或者用低分辨率的模糊图占位，可以避免布局偏移（CLS问题），页面不会出现内容跳动，体验会好很多。
五、CDN与缓存配置
图片体积再小，服务器离用户太远也一样慢。把图片放到CDN上，让用户从最近的节点获取资源，是提速的有效手段。CDN厂商一般还自带图片处理能力，通过URL参数实时裁剪、缩放、转格式，省去了本地预处理多个版本的麻烦。
缓存方面，图片文件建议设置较长的缓存时间，比如半年到一年，同时给文件名加上版本号或哈希值，更新图片时换文件名即可让缓存失效。这样老用户二次访问时，图片基本全部命中本地缓存，加载速度接近零成本。
总结一下，图片优化是一条完整的链路：选对格式、压到合理体积、按需输出尺寸、写好alt和文件名、配置懒加载和CDN缓存。每一步单独看都不复杂，但组合起来坚持执行，页面的加载速度和SEO表现都会有肉眼可见的提升。建议先从存量图片的压缩和格式转换入手，成本最低，见效最快。