开发者社区> 淡色的云> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端9种图片格式基础知识, 你应该知道的

简介: GIF是一种索引色模式图片,所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画,也能支持背景透明,这点连古老的IE6都支持,所以在以前想要在项目中使用背景透明图片,其中一种方案就是生成GIF图片。
+关注继续查看

1.JPG


彩色深度



彩色深度标准通常有以下几种:


  • 8位色,每个像素所能显示的彩色数为2的8次方,即256种颜色。
  • 16位增强色,16位彩色,每个像素所能显示的彩色数为2的16次方,即65536种颜色。
  • 24位真彩色,每个像素所能显示的彩色数为24位,即2的24次方,约1680万种颜色。
  • 32位真彩色,即在24位真彩色图像的基础上再增加一个表示图像透明度信息的Alpha通道。


32位真彩色并非是2的32次方的色数,它其实也是1677万多色,不过它增加了256阶颜色的灰度,为了方便称呼,就规定它为32位色


图的分类



光栅图和矢量图


对于图片,一般分光栅图和矢量图。


  • 光栅图:是基于 pixel像素构成的图像。JPEG、PNG,webp等都属于此类
  • 矢量图:使用点,线和多边形等几何形状来构图,具有高分辨率和缩放功能. SVG就是一种矢量图。


无压缩, 无损压缩, 有损压缩


另一种分类


  • 无压缩。无压缩的图片格式不对图片数据进行压缩处理,能准确地呈现原图片。BMP格式就是其中之一。


  • 无损压缩。压缩算法对图片的所有的数据进行编码压缩,能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。


  • 有损压缩。压缩算法不会对图片所有的数据进行编码压缩,而是在压缩的时候,去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。


前端9种图片格式



诞生时间


对于超过30岁的程序员来说,她们都很年轻,真的是遇到好时光!


85年前,人们都在干嘛呢?


  1. GIF - 1987
  2. Base64- 1987
  3. JPEG - 1992
  4. PNG - 1996
  5. SVG - 1999
  6. JPEG2000 - 1997 to 2000
  7. APNG - 2004
  8. WebP - 2010

ico: 1985年??


查阅文档说ico文件格式是伴随着 Windows 1.0 发行诞生的。


GIF


GIF是一种索引色模式图片,所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画,也能支持背景透明,这点连古老的IE6都支持,所以在以前想要在项目中使用背景透明图片,其中一种方案就是生成GIF图片。


优点


  • 支持动画和透明背景
  • 兼容性好
  • 灰度图像表现佳
  • 支持交错


部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用。


缺点

  • 最多支持 8 位 256 色,色阶过渡糟糕,图片具有颗粒感
  • 支持透明,但不支持半透明,边缘有杂边


适用场景

  • 色彩简单的logo、icon、线框图适合采用gif格
  • 动画


JPG/JPEG


这里提个问题: jpg和jpeg有啥区别


平常我们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各种色彩,主要在压缩的时候会有所失真,也正因为如此,造就了这种图片格式体积的轻量。


优点


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


缺点


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


JPEG 2000 (了解即可)


JPEG 2000是基于小波变换的图像压缩标准,由Joint Photographic Experts Group组织创建和维护。JPEG 2000通常被认为是未来取代JPEG(基于离散余弦变换)的下一代图像压缩标准。JPEG 2000文件的副档名通常为.jp2,MIME类型是image/jp2。


JPEG2000的压缩比更高,而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩无损压缩


目前就safari支持,can is use-png2000支持18%。


优点

  • 支持有损和无损压缩


缺点

  • 支持率太低了


ICO


ICO (Microsoft Windows 图标)文件格式是微软为 Windows 系统的桌面图标设计的。网站可以在网站的根目录中提供一个名为 favicon.ICO, 在收藏夹菜单中显示的图标,以及其他一些有用的标志性网站表示形式。


一个 ICO 文件可以包含多个图标,并以列出每个图标详细信息的目录开始。

其主要用来做网站图标,现在png也是可以用来做网站图标的。


PNG


PNG格式是有三种版本的,分别为PNG-8,PNG-24,PNG-32,所有这些版本都不支持动画的。PNG-8跟GIF类似的属性是相似的,都是索引色模式,而且都支持背景透明。相对比GIF格式好的特点在与背景透明时,图像边缘没有什么噪点,颜色表现更优秀。

PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上,增加了透明度的支持。


如果没有动画需求推荐使用png-8来替代gif


优点

  1. 不失真的情况下尽可能压缩图像文件的大小
  2. 像素丰富
  3. 支持透明(alpha通道)


缺点

  1. 文件大


这里额外提一下,gif和jpg有渐进,png有交错,都是在没有完全下载图片的时候,能看到图片全貌。

具体可以看在线示例: png正常,png交错,jpg渐进


APNG:Animated PNG


APNG(Animated Portable Network Graphics)顾名思义是基于 PNG 格式扩展的一种动画格式,增加了对动画图像的支持,同时加入了 24 位图像和 8 位 Alpha 透明度的支持,这意味着动画将拥有更好的质量,其诞生的目的是为了替代老旧的 GIF 格式,但它目前并没有获得 PNG 组织官方的认可。


从Can I Use上查看,除了IE系列, chrome, firefox, safari均已支持。2021-08月的时候支持达到94%。


相对GIF来说


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


缺点

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


webP


有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画: 在有损的 WebP 文件中,图像数据由 VP8位流表示,该位流可能包含多个帧。


包括体积小、色彩表现足够、支持动画。 简直了就是心中的完美女神!!

can i use - webp上看,支持率95%。 主要是Safari低版本和IE低版本不兼容。


优点

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


缺点

  • 兼容性吧,相对jpg,png,gif来说


SVG

SVG 是一种基于 xml 的矢量图形格式,它将图像的内容指定为一组绘图命令,这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表,图标和其他图像,可以准确地绘制在任何大小。因此,SVG 是现代 Web 设计中用户界面元素的流行选择。


优点

  • 可伸缩性
    你可以随心所欲地把它们做大或者做小,而不用牺牲质量

  • Svg 平均比 GIF、 JPEG、 PNG 小得多,甚至在极高的分辨率下也是如此
  • 支持动画
    更灵活,质量无与伦比
  • 与DOM无缝衔接
    Svg 可以直接使用 HTML、 CSS 和 JavaScript (例如动画)来操作


缺点

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


base64


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


优点

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


缺点

  • 相比其他格式,体积会至少大1/3
  • 编码解码有额外消耗


一些对比



PNG, GIF, JPG 比较


大小比较:通常地,PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF
复制代码
透明性:PNG > GIF > JPG
复制代码
色彩丰富程度:JPG > PNG >GIF
复制代码
兼容程度:GIF ≈ JPG > PNG
复制代码


gif, jpg, png, web优缺点和使用场景


格式优点缺点适用场景
gif文件小,支持动画、透明,无兼容性问题只支持256种颜色色彩简单的logo、icon、动图
jpg色彩丰富,文件小有损压缩,反复保存图片质量下降明显色彩丰富的图片/渐变图像
png无损压缩,支持透明,简单图片尺寸小不支持动画,色彩丰富的图片尺寸大logo/icon/透明图
webp文件小,支持有损和无损压缩,支持动画、透明浏览器兼容性相对而言不好支持webp格式的app和webview



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【gis】gdal 切分遥感 tif 格式图片
【gis】gdal 切分遥感 tif 格式图片
24 0
掘金Markdown编辑器中的图片怎么居中?
掘金Markdown编辑器中的图片怎么居中?
68 0
IM开发基础知识补课(二):如何设计大量图片文件的服务端存储架构?
友情提示:正文内容整理自架构师丁浪的技术分享,部分观点可作抛砖引玉之用,可能并非最佳实践,欢迎留言指正。 1、前言 一个完善的IM系统中通常充斥着大量的图片内容,包括:用户头像、图片消息、相册、图片表情等等,那么在做服务端架构设计时该如何存储这些图片呢? 本文分享的是典型Web应用中大量图片的服务端存储加构的演进过程,但基本的技术原理和架构思路对于IM系统而言同样适用,所以在阅读时可以根据自已IM的实际架构情况,酌情吸取适合您的内容即可。
2367 0
canvas画好几张图片时,叠层关系的问题
我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。 为什么呢? 这样想,我们画图片时是不是有这段代码 img.onload=function(){ ctx.drawImage(img,x,y); } 其实就是这段代码的问题,我们先分析一下这段代码,其意思是图片加载完成之后再
1265 0
关于webp图片格式初探
<h4 style="font-family:'microsoft yahei',arial,sans-serif; margin:10px 0px 20px; color:rgb(227,108,9); line-height:1.333em; font-size:1.5em; padding:25px 0px 0px"> <strong>前言</strong> </h4> <p s
2830 0
+关注
淡色的云
不争不弃,喜欢淡色的云。
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载