图片格式与优化

Posted eric178

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片格式与优化相关的知识,希望对你有一定的参考价值。

图片介绍

图片作为网页必不可少的一部分,在网页中占据着非常重要地位。一般来说,有以下两种方式来使用图片:

  • 通过 img 元素直接使用
  • 通过 background-image(背景图片)的形式使用

这两种形式的区别在于,前者一般具有实际含义(如产品图片,相册图片等),而后者一般用于装饰效果。

图片初步了解

目前网页中常用的图片大概有如下几种格式,它们有着各自的显著特点,被应用在各种不同的场景:

  • jpg/jpeg:由于其色彩还原度比较好,所以一般色彩丰富的图片均采用该格式,如宣传图、产品图、相册图等等。(其实我们相机拍出来的照片就是该格式的)
  • png:由于其对透明度的良好支持,所以一般用于透明图片,如 logo 图、图标图等
  • gif:由于其对动画的支持,所以一般用来实现动效图片,如 loading 加载动画、一些搞笑图片等

除了这三种图片格式外,还有 ico 格式和 webp 格式:

  • ico 格式属于图标文件,主要用于网址前面的标识图标,如腾讯课堂及 IMWeb 前端学院的图标技术分享图片
  • webp 格式是由 google 研发的图片格式,它既具备高压缩率,又具备透明度以及动画的特性。目前各个大互联网公司都有在使用该格式,其带来的效果也非常显著。但是该格式有个明显的缺陷:目前浏览器端只有 google 浏览器支持。

参考资料

图片优化

通过HTTP Archieve统计显示,图片内容已经占到了互联网内容总量的65%左右。如下图(时间为 2017-03-15):

技术分享图片

如此多的图片,当然占用了很多流量及时间,所以从性能优化的角度看,图片绝对是优化的热点和重点之一。由于图片优化篇幅太长,这里就不再展开介绍了,下面推荐一些图片优化的极佳资料以供参考:

以上是关于图片格式与优化的主要内容,如果未能解决你的问题,请参考以下文章

Cocos2d-x优化中关于背景图片优化

html5如何根据ps图片排版

关于在ios中使用png与jpg图片的区别

Android Gradle 插件自定义 Gradle 插件优化图片 ① ( Android 中的 WebP 图片格式使用 | WebP 格式转换 | WebP 参考文档 )

300.Unity内存优化ID-315-001:图片压缩格式详解及优化原理篇之不同平台的压缩格式

图片优化之下一代图片格式WebP和AVIF