9种格式基础知识
作者：优漫动游设计部
2023-08-24 17:59
查看: 273
彩色深度
彩色深度标准通常有以下几种：
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年前，人们都在干嘛呢？
GIF-1987
Base64-1987
JPEG-1992
PNG-1996
SVG-1999
JPEG2000-1997to2000
APNG-2004
WebP-2010
ico:1985年??
查阅文档说ico文件格式是伴随着Windows1.0发行诞生的。
GIF
GIF是一种索引色模式，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明，其中一种方案就是生成GIF。
优点：
支持动画和透明背景
兼容性好
灰度图像表现佳
支持交错
部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用。
缺点：
最多支持8位256色，色阶过渡糟糕，具有颗粒感
支持透明，但不支持半透明，边缘有杂边
适用场景
色彩简单的logo、icon、线框图适合采用gif格
动画
JPG/JPEG
这里提个问题：jpg和jpeg有啥区别
平常我们大部分见到的静态图基本都是这种格式。这种格式的能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种格式体积的轻量。
优点
压缩率高
兼容性好
色彩丰富
缺点
JPEG不适合用来存储企业Logo、线框类的这种高清图
不支持动画、背景透明
JPEG2000（了解即可）
JPEG2000是基于小波变换的图像压缩标准，由JointPhotographicExpertsGroup组织创建和维护。JPEG2000通常被认为是未来取代JPEG（基于离散余弦变换）的下一代图像压缩标准。JPEG2000文件的副档名通常为.jp2，MIME类型是image/jp2。
JPEG2000的压缩比更高，而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩和无损压缩。
目前就safari支持，canisuse-png2000支持18%。
优点
支持有损和无损压缩
缺点
支持率太低了
ICO
ICO(MicrosoftWindows图标)文件格式是微软为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
优点
不失真的情况下尽可能压缩图像文件的大小
像素丰富
支持透明（alpha通道）
缺点
文件大
这里额外提一下，gif和jpg有渐进，png有交错，都是在没有完全下载的时候，能看到全貌。
APNG：AnimatedPNG
APNG（AnimatedPortableNetworkGraphics）顾名思义是基于PNG格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了24位图像和8位Alpha透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的GIF格式，但它目前并没有获得PNG组织官方的认可。
从CanIUse上查看，除了IE系列，chrome,firefox,safari均已支持。2021-08月的时候支持达到94%。
相对GIF来说
色彩丰富
支持透明
向下兼容PNG
支持动画
缺点
生成比较繁琐
未标准化
webP
有损WebP图像平均比视觉上类似压缩级别的JPEG图像小25-35%。无损耗的WebP图像通常比PNG格式的相同图像小26%。WebP还支持动画:在有损的WebP文件中，图像数据由VP8位流表示，该位流可能包含多个帧。
包括体积小、色彩表现足够、支持动画。简直了就是心中的完美女神！！
从caniuse-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
编码解码有额外消耗
对于有着强烈的就业意愿的同学们来说广州UI设计培训长期班提供的周到的就业服务更是不容错过哦~广州UI设计培训会为同学们提供校园招聘会、就业推荐、面试辅导等渠道，帮助同学们增加就业选择，从而提升就业几率。与其担心培训机构效果好不好、能不能就业，不妨现在就行动起来投入学习，坚持不懈的努力会为你证明的哦~ 了解详情请登陆广州UI设计培训官网
彩色深度标准通常有以下几种：
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年前，人们都在干嘛呢？
GIF-1987
Base64-1987
JPEG-1992
PNG-1996
SVG-1999
JPEG2000-1997to2000
APNG-2004
WebP-2010
ico:1985年??
查阅文档说ico文件格式是伴随着Windows1.0发行诞生的。
GIF
GIF是一种索引色模式，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明，其中一种方案就是生成GIF。
优点：
支持动画和透明背景
兼容性好
灰度图像表现佳
支持交错
部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用。
缺点：
最多支持8位256色，色阶过渡糟糕，具有颗粒感
支持透明，但不支持半透明，边缘有杂边
适用场景
色彩简单的logo、icon、线框图适合采用gif格
动画
JPG/JPEG
这里提个问题：jpg和jpeg有啥区别
平常我们大部分见到的静态图基本都是这种格式。这种格式的能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种格式体积的轻量。
优点
压缩率高
兼容性好
色彩丰富
缺点
JPEG不适合用来存储企业Logo、线框类的这种高清图
不支持动画、背景透明
JPEG2000（了解即可）
JPEG2000是基于小波变换的图像压缩标准，由JointPhotographicExpertsGroup组织创建和维护。JPEG2000通常被认为是未来取代JPEG（基于离散余弦变换）的下一代图像压缩标准。JPEG2000文件的副档名通常为.jp2，MIME类型是image/jp2。
JPEG2000的压缩比更高，而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩和无损压缩。
目前就safari支持，canisuse-png2000支持18%。
优点
支持有损和无损压缩
缺点
支持率太低了
ICO
ICO(MicrosoftWindows图标)文件格式是微软为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
优点
不失真的情况下尽可能压缩图像文件的大小
像素丰富
支持透明（alpha通道）
缺点
文件大
这里额外提一下，gif和jpg有渐进，png有交错，都是在没有完全下载的时候，能看到全貌。
APNG：AnimatedPNG
APNG（AnimatedPortableNetworkGraphics）顾名思义是基于PNG格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了24位图像和8位Alpha透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的GIF格式，但它目前并没有获得PNG组织官方的认可。
从CanIUse上查看，除了IE系列，chrome,firefox,safari均已支持。2021-08月的时候支持达到94%。
相对GIF来说
色彩丰富
支持透明
向下兼容PNG
支持动画
缺点
生成比较繁琐
未标准化
webP
有损WebP图像平均比视觉上类似压缩级别的JPEG图像小25-35%。无损耗的WebP图像通常比PNG格式的相同图像小26%。WebP还支持动画:在有损的WebP文件中，图像数据由VP8位流表示，该位流可能包含多个帧。
包括体积小、色彩表现足够、支持动画。简直了就是心中的完美女神！！
从caniuse-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
编码解码有额外消耗
对于有着强烈的就业意愿的同学们来说广州UI设计培训长期班提供的周到的就业服务更是不容错过哦~广州UI设计培训会为同学们提供校园招聘会、就业推荐、面试辅导等渠道，帮助同学们增加就业选择，从而提升就业几率。与其担心培训机构效果好不好、能不能就业，不妨现在就行动起来投入学习，坚持不懈的努力会为你证明的哦~ 了解详情请登陆广州UI设计培训官网
预约申请试听课
填写下面表单即可预约申请试听！怕钱不够？可就业挣钱后再付学费！ 怕学不会？助教全程陪读，随时解惑！
担心就业？一地学习，可全国推荐就业！
-
上一篇：
-
下一篇：
IT培训问答
开班时间
