一、图片格式选型(优先顺序)
| 格式 |
优点 |
适用场景 |
| WebP |
压缩率比JPG高25%~35%,支持透明,现代浏览器原生支持 |
照片、banner、产品图(首选) |
| AVIF |
压缩率比WebP更高,压缩质量最好 |
追求极致性能,注意浏览器兼容 |
| PNG |
无损,支持透明 |
图标、logo、简单透明素材,不要存大图 |
| JPEG(JPG) |
兼容性最好 |
老设备兼容兜底,照片类 |
| SVG |
矢量、体积极小,无限放大不失真 |
Logo、图标、简单图形,可直接内嵌HTML |
最佳实践:WebP为主,JPG做降级;AVIF可叠加,用<picture>标签自动适配浏览器。
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="产品图" loading="lazy">
</picture>
二、图片尺寸与响应式(最容易踩坑)
禁止直接上传原图,前端用CSS缩小图片:比如原图3000px,页面只展示600px,浏览器依然下载完整大图。
- 多尺寸裁切:按页面断点输出多套图,用
srcset实现响应式
<img srcset="img-600w.webp 600w, img-1200w.webp 1200w" sizes="(max-width:768px)600px,1200px" src="img-600w.webp" alt="">
- 固定容器图片:图片宽度不要超过页面最大展示宽度;产品列表缩略图单独裁切小尺寸图
- 图片宽高属性:
<img width="600" height="400">,预留图片占位空间,减少CLS布局偏移(Core Web Vitals核心指标)
三、图片压缩(无损+有损)
本地压缩工具
- 无损:Squoosh、Photopea、ImageOptim(Mac)
- 批量:XnView MP,批量改尺寸+转WebP
压缩建议:照片类有损压缩质量 70~85,肉眼几乎看不出差别,体积大幅下降;图标类无损压缩。
服务端自动方案(推荐网站使用)
- 图片处理服务:Cloudinary、Imgix、ShortPixel(WordPress常用),通过URL参数动态裁剪、转格式、调质量 示例:
shturl.cc/12l5BXFPFYVDeGEkh6zmRNIWhk5rn149sqXtTTv2
- 自建:Nginx+ngx_pagespeed / 图片中间件,上传原图,实时输出不同规格图片
原则:原图保留在本地,线上只放优化后的图
四、加载策略优化
- 懒加载 loading="lazy" 对非首屏图片(列表下方、底部banner)开启,浏览器视口外图片延迟加载。
首屏大图不要加懒加载,会影响LCP最大内容绘制。
- 首屏大图(LCP图片)重点优化
- 预加载
<link rel="preload" href="hero.webp" as="image" type="image/webp">
- 放在HTML靠前位置,不要嵌套在JS渲染模块里
- 禁用图片延迟加载
- 图片占位方案
- SVG占位、低质量图片占位LQIP:先加载极小模糊缩略图,原图加载完成替换,改善感知速度
五、缓存 & CDN
- 设置静态资源HTTP缓存头
Cache-Control: public, max-age=31536000, immutable
图片文件名增加版本哈希 product-234abc.webp,图片修改时更换文件名,避免浏览器缓存旧图。
- CDN分发 图片全部托管CDN,就近节点返回资源;CDN一般自带WebP自动转换功能(根据
Accept请求头返回WebP)。
六、其他细节优化
- 图片语义:
alt标签必填,SEO友好;纯装饰图片alt=""
- 避免巨大图片背景图:页面背景大图尽量压缩,优先CSS渐变替代装饰图
- 图片雪碧图:小图标(旧方案),现在更推荐SVG图标
- 禁止base64内嵌大图:少量小图标可以base64,大图base64会增大HTML体积,阻塞解析
七、检测工具(验证优化效果)
- Google PageSpeed Insights:查看LCP、图片未优化警告
- Chrome开发者工具Network面板:看图片大小、加载耗时
- WebPageTest:查看全球各节点图片加载性能
八、落地清单(直接照着执行)
首屏图片:单独裁切合适尺寸,WebP格式,预加载,不加lazy 非首屏图片:srcset多尺寸 + loading="lazy" + 宽高属性 所有图片压缩,JPG质量70~85,优先WebP降级JPG 图片加版本号,配置长期缓存 使用CDN托管图片 Logo/图标替换为SVG
如果你需要,我可以给你:
- WordPress图片优化完整配置方案
- 外贸独立站图片优化清单(适配GEO/SEO)
- Nginx配置自动WebP转换的代码片段