1) 为什么要压缩图像
未压缩的图像会减慢网站速度,消耗带宽,并损害SEO。压缩的图像加载更快,改善用户体验,并提高搜索排名。
2) 压缩前调整大小
在压缩之前,将图像调整为显示尺寸。不要上传4000px宽的图像以显示800px。使用响应式图像(srcset)用于不同的屏幕尺寸。
3) 选择正确的格式
照片:JPEG或WebP。需要透明度:PNG或WebP。徽标:SVG。简单图形:PNG。
4) 压缩工具
在线:Orqui优化器、TinyPNG、Squoosh。桌面:ImageOptim、GIMP。命令行:ImageMagick、cwebp。
5) 质量设置
JPEG:75-90%质量。WebP:75-85%质量。PNG:使用压缩级别6-9。始终比较原始和压缩版本。
6) 高级技术
- 使用渐进式JPEG
- 删除EXIF元数据
- 为现代浏览器使用WebP
- 实现延迟加载
- 使用CDN进行图像交付
7) 自动化压缩
使用构建工具(webpack、gulp)或CMS插件(WordPress的Smush、ShortPixel)自动化图像优化。
8) 测量影响
使用Lighthouse、PageSpeed Insights测试。目标:LCP < 2.5s,文件大小减少50-70%。