简说图片大小优化

2019-11-15 09:56:28  阅读 581 次 评论 0 条

在飞速发展的搜索时代,速度越来越重要,就算搜索速度非常快的百度也打造极速搜索,争求那小数点后两位的用户体验,而在网站优化中,图片很大一定程度上决定着网站速度,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽。今天笔者要说的图片优化就是最简单的图片优化,不是ALT标签、不是图片原创、也不是图片位置等图片排名优化,就是图片大小的优化,这一点也是百度站长平台页面优化建议要求的,那么如何优化图片呢?如何既能保证图片质量不影响页面UI设计,又能使图片大小最小呢??一起看看:

 


简说图片大小优化第1张-深圳随心网络科技

  网站上的图片都是用的位图,位图又叫栅格图、像素图,最小单位由像素构成,缩放、旋转会失真。在图像工具将位图放到最大时能看到每一针的色彩过渡,大多都是在用JPG、GIF、PNG、BMP几种格式。既然是让图片变小,当然是压缩了。压缩之前先来看看有损压缩和无损压缩。

 

  有损压缩、无损压缩

 

  有损压缩:特点是保持颜色的逐渐变化,根据人眼观察现实世界的突然变化, 然后使用附近的颜色通过渐变或其他形式进行填充。因为素点的数据信息,所以存储量会降低,还不会影响图像的还原度质会有所下降。JPG是有损压缩格式,在存储图像时会把图像分解成8*8像素的网格单单独优化。这就是平时保存JPG图片时图像会模糊的原因。

  

  无损压缩:利用数据的统计冗余进行压缩,真实的记录图像上每个像素点的数据信息。他的原理是先判断哪些颜色相同,哪些不同,将相同颜色的数据信息进行压缩记录,把不同的数据另外保存。多次存储后图片的品质不会下降。为什么无损压缩的图也会有失真的?因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩和还原,也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时,才能真实的记录和还原图像,否则就会丢失一些图像信息。例如PNG-8和GIF格式,而PNG24为真彩色所以颜色表为空,不会失真。

  

  PNG 、GIF 、JPG图片对比

  

简说图片大小优化第2张-深圳随心网络科技 

  PNG-8 的高压缩比

 

  切图时,有时选择PNG-8可以获得更高的压缩比。不过有些情况下还是GIF或JPG会小一些,需要根据实际情况调试以选择最佳方案。

 

  PNG-24的优化技巧

 

  PNG-24优化时可以使用ps里的色调分离,减小大小,然后再用工具进行优化一下。

  

简说图片大小优化第3张-深圳随心网络科技

 

  对于图像格式的选择,我们还需要考虑图片的使用场景或功能,概括为两类:图型类、照片类。

 

  图型类:图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性,颜色数量较少。一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32,如果色彩有损失可采用品质64或者128。

 

  照片类:照片通常含有百万数量级的颜色,包括平滑的颜色过度和渐变,如果是图形较为复杂,图中有时会出现真实的照片。照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。PNG的品质一般要到128。JPG的品质一般要在70-80之间,以噪点的程度确定。

 

  图片在线优化webkaka

 

       这一款图片在线优化工具非常简单,可以直接输入想要优化图片的网址,该网址上的所有图片就会被优化出来,不过大多都是需要输入主网址。其他图片可以直接输入图片网址或本地上传进行优化,等优化好了直接下载上传到网站就行了。

 

简说图片大小优化第4张-深圳随心网络科技

        可以直接点击查看检查优化效果。

简说图片大小优化第5张-深圳随心网络科技

  图片在线优化Smush.it工具

 

  个人觉得这一个在优化上更加精准,它可以移除JPG中的meta数据,优化JPG的压缩率,可以转化特定GIF图片到可索引的PNG格式图片,并且可以从可索引的图片中移除没用到颜色信息,特别是Smush.it工具还可以优化GIF动画图片。所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。

 

简说图片大小优化第6张-深圳随心网络科技


  点击:http://www.smushit.com/ysmush.it/进入工具页面: 


  把需要压缩图片的url粘贴到输入框中或者从本地电脑上选取图片,点击Smush就可以进行图片压缩,然后 Smuch.it就会提供一个优化报表,显示图片压缩比率和节省了多少字节,并且提供一个可下载包含压缩后的图片文件的压缩包。

  

简说图片大小优化第7张-深圳随心网络科技


  当然,优化图片大小的工具还有很多,有的直接下载到空间后台安装就可以自动优化了,但是始终要注意,不要因为追求速度的极致影响了图片的质量,我们说的图片大小优化永远是建立在既能保证图片质量不影响页面UI设计,又能使图片大小最小的基础上。速度快了质量差了同样是伤害了用户体验,不要顾此失彼,盲目的压缩大小,同时也不要让图片拖网站速度的后退,在保证UI的同时一定要注重图片大小优化。

本文地址:http://www.szsuixin.com/post/63.html
版权声明:本文为原创文章,版权归 飞哥 所有,欢迎分享本文,转载请保留出处!

评论已关闭!