上个月去避暑山庄外庙那边帮一个开客栈的朋友看网站。他跟我说客人反映网站打开特别慢有时候等了十几秒还没出来。我拿手机测了一下首页加载时间居然要十二秒——这哪是网站啊简直是PPT。查了一下原因罪魁祸首就是图片:首页轮播图一张五兆多产品展示图每张两三兆加起来首页光图片就快二十兆了。
图片为什么会拖慢网站
很多承德本地的老板做网站的时候有个误区:觉得图片越清晰越好直接把相机拍的原片就传上去了。问题是相机拍出来的照片动辄三四兆甚至更大而网页上显示根本不需要这么高的分辨率。一张在电脑上看很清晰的图放到手机屏幕上一百多KB就够了你传个三兆的上去除了浪费带宽没有任何好处。而且承德这边不少地方游客用的是移动网络信号不好的时候大图就更慢了。
怎么压缩才不影响画质
图片压缩不是简单地降低分辨率而是要在文件大小和视觉质量之间找到平衡点。我一般推荐的做法是:第一步把图片宽度缩到1200像素以内(大部分显示器够用了)。第二步用工具压缩JPEG质量设到80-85%左右肉眼几乎看不出区别但文件能缩小60-70%。第三步如果支持的话用WebP格式替代JPEG能再小30%左右。我给那个客栈老板处理完之后首页总大小从二十兆降到了不到两兆加载时间从十二秒降到了两秒以内。
常用的压缩工具有哪些
如果你不想折腾技术细节有几个现成的工具可以用。TinyPNG(tinypng.com)在线拖进去就能压免费版每天可以压二十张。ImageOptim(Mac专用)拖进去自动压支持批量处理。如果你用的WordPress装个Smush或者ShortPixel插件上传的时候自动压缩。这些工具都是傻瓜式的不需要懂什么参数。我之前给双桥区一家做特产电商的客户处理过八百多张图片总共节省了大概两个G的存储空间网站速度快了不止一倍。
总结
图片压缩是提升网站速度最简单也最有效的方法之一成本基本为零效果却非常明显。建议你先检查一下自己网站的图片大小如果单张超过500KB就该处理了。处理完之后用手机在不同网络下测试一下你会感受到明显差异的。要是实在不想弄也可以找我帮你批量处理这个事情花不了多少时间。