图片压缩可以提升网站页面的打开速度,所以我们在一定要控制好上传到网站图片的大小,本文介绍如何进行图片压缩,包括上传到网站之前的图片如何压缩,以及站内图片如何压缩。
1、网站为什么要做图片压缩
我们平时用相机、手机拍摄以及使用图像处理工具生成的图片都是有大小的,根据图像的格式不同,尺寸不同,像素不同,图像的大小也会不同。
一个网站的页面大小是由这个页面承载的内容决定的,这些内容包含HTML、CSS、JS、图片、视频、音频等等。而页面大小影响到用户打开页面的时间(这个时间建议保持在4S以内),如果这时间太长用户没有耐性等待就会跳出网站。搜索引擎也在监控你的网站,如果它发现大量的用户跳出你的网站,将会降低推荐和索引。慢慢的你的用户将很难在看到你的网站,即使你做广告投放,大量的用户跳出也会影响最终的转化效果。
所以当你希望在页面增加更多内容时,就需要考虑这些内容会不会让我的页面变得更大,尤其是图片。大部分情况下,媒体文件(图片、视频等)的加载相对其他的内容(HTML、CSS、JS等)需要消耗更多资源,因为媒体资源要大得多!
通过这张图你就会明白,图片资源在页面总资源中的占比总是很高!
通过瀑布图,我们也可以看出来,加载时间的较长的几乎都是图片。
2、网站图片大小的基本要求
首先,从用户阅读体验的角度来说,并不提倡页面完全不使用图片,有时候为了帮助用户更好的理解内容,我们可以配图来提升阅读体验,只需要我们对图片做好压缩优化,就不会对网站速度产生较大影响。
我们在网站放图片时,建议采用以下基础标准和要求:
2.1 超级大图 <400KB
宽度在1920px以上,通常包括网站banner图,或者某一个模块背景图等。
2.2 大图 <300KB
宽度在1000px以上,通常包括网页中展示图、背景图等。
2.3 中图 <200KB
宽度在600PX以上,通常包括产品的封面和相册图片
2.4 更小的图片或logo <100KB
通常是宽度小于600px的小图标,网站LOGO之类。
3、如何压缩上传之前的图片?
3.1 原始图片大小>3M
如果原始图片大于3M,建议使用专业的图片处理软件进行处理,例如Photoshop。
主要操作就是缩小图片尺寸、压缩图片大小。
如果你没有这个软件或者不会使用,请找专业的人员代为处理。
3.2 原始图片大小<3M
可以使用一些在线的压缩工具进行压缩,如果使用工具进行图片压缩的结果和最佳效果相差较大时,建议使用专业的工具对图像进行优化。下面介绍几款好用的在线压缩工具。
Squoosh网网址:https://squoosh.app/
优势:无需代理、可以手动选择压缩百分比并显示压缩后的大小,同时查看压缩前后对比效果
劣势:同时只能压缩单张图片
shortpixel 网址:https://shortpixel.com/online-image-compression
优势:单词可以同时压缩多张图片,显示压缩后的效果
劣势:需要代理,压缩只有三个等级可以选择,点击图片可以看到压缩前后效果对比
智图 网址:https://zhitu.isux.us/
优势:可以自动转换图片格式,根绝自己的需要下载对应的图片
劣势:每次只能处理单张
4、网站内图片压缩
网站内可以使用插件,对上传的图片再进行一个压缩,reSmush.it Image Optimizer是一款免费的图片压缩,基本可以满足网站图片压缩的需求。
只需要安装并启用,安装之后使用默认配置即可。
上传之后可以检测网站现有图片,进行一次压缩
同时针对上传的文件也会进行自动压缩。
当然除了reSmush.it Image Optimizer插件,你还可以选择其他插件你帮助进行网站图片的压缩工作。