图片类型简介

617 阅读5分钟

一:前言:

前端经常需要负责展示各种图片,想要有一个好的视觉效果,选择一个适合的图片格式非常重要。

二:图片的压缩类型:

无压缩:无压缩的图片格式不对图片数据进行压缩处理,能准确地呈现原图片。比如BMP格式。

无损压缩:利用图片的数据统计冗余来压缩,可以完全恢复原始数据而不引起任何失真,能在保证图片质量的同时降低图片的体积。比如一张图片的背景上有连续的十个#000666元素,那么压缩算法可以写成(#000666,10)来节省空间。从本质上看,无损压缩的方法可以删除一些重复数据,大大减少占用的磁盘空间。但是,无损压缩的方法并不能减少图像的内存占用量,这是因为,当从磁盘上读取图像时,计算机会把(#000666,10)还原成连续的十个#000666。 

有损压缩:生物学中的实验证明,人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。当在屏幕上看一张图时,大脑会利用在某一区域上看到的颜色填补该区域附近所丢失的颜色。有损压缩就是去除了人眼无法识别的图片细节,减少图片在内存和磁盘中占用的空间。图片压缩的目的是为了节省存储空间和提高传输效率。

三:常见图片类型及其特点

GIF— 1987年

GIF是一种位图。位图的大致原理是:图片由许多的像素组成,每一个像素都被指定了一种颜色,这些像素综合起来就构成了图片。GIF能够支持动画,也能支持背景透明。

优点

  • 支持动画和透明背景
  • 兼容性好
  • 灰度图像表现较好
  • 部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用

缺点

  • 最高支持256种颜色,色感过渡差,图片具有颗粒感
  • 支持透明,但不支持半透明

适用场景

  • 比较适用于色彩较少的图片,比如卡通造型、公司标志

JPG/JPEG—1992年

jpg/jpeg图片是平常最常见的图片格式。采用了一些特殊的编码方式,去除了一些冗余的图像和彩色数据,属于有损压缩格式,它能够将图像压缩在很小的储存空间中,因此不适合在追求高品质图像时使用。

优点

  • 压缩率高
  • 兼容性好
  • 色彩丰富

缺点

  • JPEG不适合用来存储企业Logo、线框类的这种高清图
  • 不支持动画、背景透明

\

ICO

ICO (Microsoft Windows 图标)是Windows的图标文件格式,是微软为 Windows 系统的桌面图标设计的,当然也可以作为收藏夹内收藏内容的前段显示小图标。现在png也可以用来做网站图标。

\

PNG—1996年

png是一种采用无损压缩算法的位图格式。PNG格式有8位、24位、32位三种形式,所有这些格式都不支持动画。其中8位PNG支持两种不同的透明形式,24位PNG不支持透明,32位PNG在24位基础上增加了8位透明通道。

优点

  1. 不失真的情况下尽可能压缩图像文件的大小
  2. 兼容绝大部分浏览器版本
  3. 支持透明效果

缺点

  1. 文件大(与JPEG的有损耗压缩相比,PNG提供的压缩量较少)
  2. 缺少动画

\

APNG:Animated PNG—2004年

APNG(Animated Portable Network Graphics)顾名思义是基于 PNG 格式扩展的一种动画格式,增加了对动画图像的支持,其诞生的目的是为了替代老旧的 GIF 格式,但它目前并没有获得 PNG 组织官方的认可。

相对GIF来说

  • 色彩丰富
  • 支持透明
  • 向下兼容 PNG
  • 支持动画

缺点

  • 生成比较繁琐
  • 未标准化

SVG—1999年

SVG 是由W3C联盟进行开发一种基于 xml 的无损的矢量图形格式,用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG文件,也可以随时放入到HTML中通过浏览器来观看。

优点

  • 可伸缩性强,可呈现任何大小而不降低其质量
  • 空间小,SVG 平均比 GIF、 JPEG、 PNG 小得多,甚至在极高的分辨率下也是如此
  • 支持动画,更灵活,质量无与伦比
  • 支持透明度
  • 与DOM无缝衔接,SVG可以直接使用 HTML、 CSS 和 JavaScript (例如动画)来操作

缺点

  • SVG复杂度高会减慢渲染速度
  • 不适合游戏类等高互动动画

\

base64—1987年

图片的 base64 编码就是将一张图片编码成一串字符串,使用该字符串代替图像地址,图片随着 HTML 的下载同时下载到本地,不再单独用一个http来请求图片。

优点

  • 无额外请求
  • 对于极小或者极简单图片
  • 可像单独图片一样使用,比如背景图片重复使用等
  • 没有跨域问题,无需考虑缓存、文件头等

缺点

  • 相比其他格式,体积太大
  • 编码解码有额外消耗

\

webP -2010年

WebP是一种新颖的图片格式,可以为 Web上的图片提供卓越的无损和有损压缩,并且有损压缩的程度是可调的,因此开发者可以在文件大小和图片质量之间进行权衡。

与PNG相比,WebP无损图片的大小要小25%-30%;

在同等 SSIM(SSIM:结构相似性,是一种衡量两个图片相似度的指标)质量指数下,WebP有损图片比JPEG图片小25-34%;

优点

  • 同等质量更小
  • 压缩之后质量无明显变化
  • 支持无损图像
  • 支持动画

缺点

  • 兼容性相对于jpg,png,gif差一些

各浏览器的兼容情况:

image.png