上周帮兴宁区一家做家居建材的商户看网站老板抱怨说打开速度太慢了顾客等不及就走了。我用工具测了一下首页加载要十二秒其中光是图片就占了八兆多。今天就来讲讲图片压缩这件事。
为什么图片会让网站变慢
这是最常见也最容易解决的问题。一张手机拍的照片可能有五六兆甚至更大如果你直接放到网站上用户打开的时候就要下载这么大的文件在网速一般的情况下可能要好几秒才能加载完一张图如果一个页面有十几张图那就更慢了。那家家居建材的网站产品图片全是原始的高清照片没有经过任何压缩一个页面加载下来总共要下载二十多兆在南宁的平均网速下至少要十几秒。
压缩到什么程度合适
压缩不是要把图片压得模糊不清而是在视觉质量和文件大小之间找到最佳平衡点。一般来说：JPG 格式的图片压缩到质量等级 70%-80% 肉眼几乎看不出区别但文件大小能减少 60%-80%；PNG 格式可以考虑转成 PNG-8 或者 WebP 格式体积能缩小很多；图标类图片用 SVG 格式不仅体积小而且任意缩放都不失真；照片类图片优先用 JPG 不需要透明背景的话不要用 PNG 因为 PNG 通常比 JPG 大很多。我帮那家商户处理之后原本八兆多的图片资源压缩到了不到一兆页面加载时间从十二秒降到了两秒以内。
实用的压缩工具和方法
推荐几个好用且免费的工具。TinyPNG（tinypng.com）——在线拖拽上传自动压缩支持 JPG 和 PNG 一般能压缩 50%-70% 而且画质损失很小每天免费压缩二十张足够日常使用；ImageOptim（Mac）/ RIOT（Windows）——本地批量压缩工具可以一次性处理整个文件夹的图片；如果你的网站是用 WordPress 建的可以装 Smush 或者 ShortPixel 这类插件自动压缩上传的图片；如果是自己开发的网站可以在部署流程中加入自动压缩脚本比如使用 ImageMagick 或者 sharp 库。另外还有一个进阶技巧——使用 WebP 格式它比 JPG 小 25%-35% 而且画质更好不过要注意老版本浏览器不支持所以要保留 JPG 作为回退方案。
总结
图片压缩这件事是所有网站优化中投入产出比最高的——花几个小时处理一下就能让网站速度快好几倍用户体验提升非常明显。你在南宁如果也觉得网站打开慢可以先让我帮你测速看看瓶颈是不是在图片上如果是的话我可以教你具体的处理方法免费的。