网站优化系列(一)——图片处理
author:一佰互联 2019-04-05   click:177

简介:对于互联网产品来说,图片占据了整站的70%,有的甚至更多,做好图片的优化,页面性能加载速度,会提高60%。但是图片应该如何优化呢?那么先从图片的格式说起。图片格式png分为32色,24色以及8色,32色支持1600万色+2 ...

对于互联网产品来说,图片占据了整站的70%,有的甚至更多,做好图片的优化,页面性能加载速度,会提高60%。但是图片应该如何优化呢?那么先从图片的格式说起。

图片格式

png分为32色,24色以及8色,32色支持1600万色+256透明色阶,24位支持1600万色,8色支持256索引色。png是无损压缩,可以做成透明图,对于整体图片同色较多的,建议存成png格式。jpeg有损压缩图片格式,对于照片,图片颜色变化较多的图片存成此格式,无透明格式。svg基于可扩展语言的一种矢量图形,Internet Explorer9,火狐,谷歌Chrome,Opera和Safari都支持SVG。支持动画 ,支持透明,无损压缩,SVG是XML文件编写而成。gif简单颜色,支持动画,开发完成的gif图片经常会有毛刺,使用效果不佳。icon图片字体通过icon工具把SVG可以处理成网络图片字体,它是纯色的,通过css可以控制大小,颜色,使用方便,控制简单。apngAPNG是一个基于PNG(Portable Network Graphics)的位图动画格式, IE都不支持,ios和firefox支持,android支持较少。webp有损压缩图片格式,最早是由google出的一种图片算法格式,它可以将png,jpg图片压缩70%,且不影响质量。较低版本不支持,现在的普通浏览器都支持此种图片格式,而且各大网站都在采用此种图片格式来加载信息。base64Base64就是一种基于64个可打印字符来表示二进制数据的方法,它的体积比相同的质量的图片大10%,一般网站建议小图片2.5K以下的图片采用base64的方法来减少页面请求量。

图片压缩工具

图片介绍完了,那我们说一下工具吧,工具当然是压缩图片的工具了。以下网站还是做的不错的。
  • https://tinypng.com/ tinypng
  • https://imageoptim.com/api imageoptim
  • https://kraken.io/web-interface kraken
  • 还有通过自动化构建工具grunt/gulp和打包工具webpack来压缩图片

图片优化方法

  1. 图片压缩,这是必做的工作
  2. 选用合适的图片格式,这就要看具体情况了
  3. 图片懒加载,只有当显示的区域在当前屏下才显示图片,不过在开发过程中,一定要考虑使用一下预加载,这样显示效果的用户体验会好很多哦。
  4. 大图片尽量在支持的浏览器上使用webp格式
  5. 网络字段图片写成组件,便于后期维护开发
本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。