彩色深度
彩色深度标准通常有以下几种：
图的分类光栅图和矢量图
对于图片，一般分光栅图和矢量图。
无压缩, 无损压缩, 有损压缩
另一种分类
前端9种图片格式诞生时间
对于超过30岁的程序员来说，她们都很年轻，真的是遇到好时光！
85年前，人们都在干嘛呢？
GIF – 1987
Base64- 1987
JPEG – 1992
PNG – 1996
SVG – 1999
JPEG2000 – 1997 to 2000
APNG – 2004
WebP – 2010
ico: 1985年??
查阅文档说ico文件格式是伴随着 Windows 1.0 发行诞生的。
GIF
GIF是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成GIF图片。
优点：
缺点：
适用场景
JPG/JPEG
这里提个问题：jpg和jpeg有啥区别
平常我们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。
优点
缺点
JPEG 2000 （了解即可）
JPEG 2000是基于小波变换的图像压缩标准，由Joint Photographic Experts Group组织创建和维护。JPEG 2000通常被认为是未来取代JPEG（基于离散余弦变换）的下一代图像压缩标准。JPEG 2000文件的副档名通常为.jp2，MIME类型是image/jp2。
JPEG2000的压缩比更高，而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩[2]和无损压缩[3]。
目前就safari支持，can is use-png2000[4]支持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
优点
不失真的情况下尽可能压缩图像文件的大小
像素丰富
支持透明（alpha通道）
缺点
文件大
这里额外提一下，gif和jpg有渐进，png有交错，都是在没有完全下载图片的时候，能看到图片全貌。
具体可以看在线示例：png正常，png交错网页图片怎么保存为jpg格式，jpg渐进[5]
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来说
缺点
webP
有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画: 在有损的 WebP 文件中，图像数据由 VP8位流表示，该位流可能包含多个帧。
包括体积小、色彩表现足够、支持动画。简直了就是心中的完美女神！！
从can i use – webp[6]上看，支持率95%。主要是Safari低版本和IE低版本不兼容。
优点
缺点
SVG
SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面元素的流行选择。
优点
缺点
base64
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。
优点
缺点
一些对比PNG, GIF, JPG 比较
大小比较：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
gif网页图片怎么保存为jpg格式， jpg， png， web优缺点和使用场景
格式优点缺点适用场景
gif
文件小，支持动画、透明，无兼容性问题
只支持256种颜色
色彩简单的logo、icon、动图
jpg
色彩丰富，文件小
有损压缩，反复保存图片质量下降明显
色彩丰富的图片/渐变图像
png
无损压缩，支持透明，简单图片尺寸小
不支持动画，色彩丰富的图片尺寸大
logo/icon/透明图
webp
文件小，支持有损和无损压缩，支持动画、透明
浏览器兼容性相对而言不好
支持webp格式的app和webview
其他图片格式AVIF
号称下一代图片格式AVIF。
AVIF是一种基于AV1视频编码的新图像格式，相对于JPEG，WEBP这类图片格式来说，它的压缩率更高，并且画面细节更好。而最关键的是，它是免费且开源的，没有任何授权费用。
其拥有webp的所有优点，而且压缩率更高，更狠的是开源JS可解析，只是目前从caniuse查询到的支持率才 67%左右
TPG
腾讯自研的图片格式，压缩率比webp还优秀。
写在最后
欢迎关注
或者添加我的微信 dirge-cloud，一起学习。
引用
图像文件类型与格式指南[8]
JPEG_2000[9]
APNG – Wikipedia[10]
Can I use – APNG[11]谈谈web上各种图片应用的优缺点[12]
web前端开发常用的几种图片格式及其使用规范[13]
聊一聊几种常用web图片格式：gif、jpg、png、webp[14]
APNG 那些事[15]
GIF vs APNG vs WebP[16]
浅谈base64图片[17]
图片Base64编码的利与弊分析[18]
ICO File Format[19]
参考资料
[1]
真彩色: %E7%9C%9F%E5%BD%A9%E8%89%B2
[2]
有损压缩: %E6%9C%89%E6%8D%9F%E5%8E%8B%E7%BC%A9
[3]
无损压缩: %E6%97%A0%E6%8D%9F%E5%8E%8B%E7%BC%A9
[4]
can is use-png2000: #search=JPEG2000
[5]
: %3A%2F%2Fxiangwenhu.github.io%2FTakeItEasy%2FbgWhithe%2Fprogress.html
[6]
can i use – webp: #search=webp
[7]
:
[8]
图像文件类型与格式指南:
[9]
JPEG_2000:
[10]
APNG – Wikipedia:
[11]
Can I use – APNG: #search=APNG
[12]
谈谈web上各种图片应用的优缺点:
[13]
web前端开发常用的几种图片格式及其使用规范:
[14]
聊一聊几种常用web图片格式：gif、jpg、png、webp:
[15]
APNG 那些事:
[16]
GIF vs APNG vs WebP:
[17]
浅谈base64图片:
[18]
图片Base64编码的利与弊分析:
[19]
ICO File Format:
4.
5.||
6.||
7. 120
回复“加群”与大佬们一起交流学习~
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99
×