宝鸡做网站的老板们你们有没有遇到过这种情况——自己打开公司网站觉得还行但客户说打不开或者等半天才能显示出来?十有八九是图片的问题。一张没经过压缩的高清照片可能有好几兆用户用手机开个网页下这一张图就要等十几秒——谁有这个耐心等你啊。

图片为什么会让网站变慢

现在手机拍照动辄几兆甚至十几兆。你直接把这些原图传到网站上那加载速度能快才怪。我帮宝鸡一个做餐饮的客户测过他的网站首页——光轮播图就有三张加起来超过十二兆。在4G网络下平均要二十多秒才能完全加载完。据估计大概60%的用户会在前五秒内就关掉页面也就是说他的网站大部分访客还没看到内容就走了。

中国钛谷有家企业更夸张。他们的产品详情页放了一张360度展示的钛杯高清图居然有十八兆。客户点进去之后进度条在那儿转了半分钟最终直接报超时了。这单生意就这么飞了。

怎么压缩图片不影响效果

几个简单方法。第一是用在线压缩工具——比如TinyPNG、智图、压缩狗这些把图片拖进去自动压缩通常能减小50%到70%的体积而肉眼几乎看不出区别。第二是选择正确的格式——照片类用JPG透明背景用PNG图标类可以用SVG或WebP(如果服务器支持的话)。第三是控制尺寸——网页上显示多大就输出多大不要把一张四千像素宽的图缩放到两百像素来用。

高新万达广场有个做家居定制的店之前网站首页加载要十五秒以上。我把他们所有图片过了一遍TinyPNG总大小从十八兆降到了三兆左右。加载时间从十五秒降到了两秒以内。老板说感觉换了一个新网站似的。

除了压缩还能做什么

还有几个进阶技巧。一是使用懒加载——页面上的图片不是一次性全部加载而是滚动到哪加载到哪这对图片多的页面特别有效。二是使用CDN加速——把图片放到CDN上让用户从离他最近的服务器获取速度更快。三是生成不同尺寸的版本——同一张图生成大中小多个版本在不同场景下调用对应的版本。

渭滨区有一家做农特产品的电商网站用了懒加载+CDN的组合方案。以前产品列表页要七八秒才能完全显示现在首屏一秒内就能看到图片。而且因为用了CDN外地客户访问速度也明显提升了。跳出率从65%降到了38%这个数据变化对转化率的影响非常大。

总结

总结:宝鸡商户解决网站图片加载慢的问题,核心就是三点:压缩格式选对、尺寸控制好、能用懒加载就用懒加载。这几件事做了不需要花什么钱但用户体验的提升是立竿见影的。你要也觉得自己的网站慢不妨先去测一下看看到底是不是图片的问题推荐用Google的PageSpeed Insights工具免费测。