LV010-常见文件格式

一、有哪些常见图片格式

先来看一张从网上找的图：

这里其实也就是我们常见的一些图片格式，像png，jpeg，gif，bmp等等。但是这张图其实并不全，还有很多其他格式的图片：

JPEG（或JPG） – 最为常见的图像格式 PNG – Web广泛使用的图像格式 GIF – 动画图像格式 WebP – JPEG&PNG最佳替代图像格式 TIFF – 扫描仪最佳拍档图像格式 BMP – 过气的图像格式 HEIF – 手机照片常见图像格式 SVG – 可缩放矢量图形格式 EPS – 插画/排版设计矢量图像格式 PDF – 电子书常用文档格式 PSD – Photoshop文档格式 AI – Adobe Illustrator文档格式 XCF – GIMP图像编辑工具专属格式 INDD – Adobe InDesign文档格式 Raw – 数码相机图像存储文件格式

二、图片格式简介

1. JPEG（或JPG）- 最为常见的图像格式

1.1 简介

JPEG（或JPG），其全称为Joint Photographic Experts Group（联合图像专家组），是一种有损压缩、不带透明通道的0-10级压缩（11级压缩）光栅图像（位图）文件格式，适合作为共享图像。既然JPEG是“有损的”图像，也就是说使用此格式时，若减小文件大小，在一定程度上也会降低图像质量。JPEG是目前互联网上最常用的图像文件类型之一，因为它的可压缩性及浏览器/操作系统广泛支持。

大多数社交媒体平台（例如Facebook和Instagram）会自动将上传的图像文件转换为JPEG，且会根据不同场景使用固定的尺寸大小来控制图片的分辨率。

1.2 优缺点

• **优点：**更小文件的体积，通用浏览器和操作系统广泛支持。

有损压缩：JPG格式具备出色的压缩性能，可以显著地减少图像文件的大小。这使得 它在Web上显示一些质量要求不高的图像非常有用，减少加载时间。

广泛支持：是一种通用格式，在计算机以及手机设备上都广泛支持。

色彩丰富：JPG支持24位颜色深度，因此可以显示百万种颜色。

可调质量：用户可根据使用场景来调图片质量，较高的图片质量，会导致图片尺寸较大。

• **缺点：**有损图像压缩可能导致较差的文本可读性。

不支持透明：不能够创建带有透明背景的图像，PNG或GIF更适合这种情况。

损失性压缩：JPG是有损压缩，而且一旦压缩无法还原，会丢失一些细节。

不适合带有文本或线条的图片：JPG压缩在处理文本和线条方面不如其他格式好，可能会导致图像出现锯齿或模糊情况。

不适合Icon或者Logo：相对于PNG或GIF图，在尺寸上没有优势。

1.3 兼容情况

• 从1.0版开始支持所有主流浏览器（Chrome，Firefox，Safari等）；

• 默认情况下，所有主流操作系统的图像查看器和编辑器均支持该格式。

1.4 应用场景

• 博客和文章图像（如用户头像，产品图片等）的不错选择。

• 不用于信息图表（拥有很多小文本）或教程截图，因为图像里面的文字至关重要。

2. PNG – Web广泛使用的图像格式

2.1 简介

PNG，英文全称为Portable Network Graphics PNG（便携式网络图形），也是一种栅格图形格式，但支持无损压缩，保证颜色之间的细节和对比度。特别是，PNG提供比JPEG更好的文本可读性。PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据，保证颜色之间的细节和对比度。其设计目的是试图替代GIF和TIFF文件格式

这使得PNG成为信息图形，横幅Banner，屏幕截图以及其他同时包含图像和文本的图形的最佳表达方式。常见格式如下：

• **png-8：**png-8相比gif对透明的支持更好，同等质量下，尺寸也更小。 非常适 合作为gif的替代品。但png-8也一个明显的不足就是不支持动画。这也是png-8没办法完全替代gif的重要原因。如果没有动画需求推荐使用png-8 来替代gif。

• **png-24、png-32：**图片质量和bmp差不多，尺寸比bmp更小。尺寸上比 JPG、GIF更大，当然质量更高。

2.2 优缺点

• **优点：**高质量（无损）图像和清晰可见的文本。

支持透明度：PNG支持透明通道，允许创建带有透明背景的图像。

无损压缩：可以保持图片质量不损失细节。

广泛支持：PNG是一种通用格式，计算机或移动设备都支持。

• 缺点：复杂、色彩丰富图片尺寸大，不支持动画

如果文件过多（特别是高分辨率图像），可能会严重影响网站加载速度。

2.3 兼容情况

• 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
• 主流操作系统及其标准图像编辑器都支持。

2.4 应用场景

• 信息图表，横幅，博客图形，屏幕截图，优惠券和其他包含文本的视觉效果的不错选择。
• 不要在网站上使用高分辨率的照片，因为文件体积可能会高达几MB。

3. GIF – 动画图像格式

3.1 简介

GIF，英文全称为Graphics Interchange Format，属于另一种栅格格式图像文件类型。其 带透明通道，体积小、成像相对清晰，特别适合于初期慢速的互联网，而大受欢迎。分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。该格式也使用了无损压缩，且将图像“约束”为8 bits/每个像素，并限制为256色调色板。

GIF格式也是最有名的（和最常用）的动画图像，因为它的8-bit限制保证了动画体积更小，并且对互联网很友好。

3.2 优缺点

**优点：**更小的文件体积和支持动画和透明。

**缺点：**8-bit限制代表图像质量受限，只能存储8位颜色索引，色彩复杂、细节丰富的图片不适合。

3.3 兼容情况

• 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）及其标准图像编辑器都支持。

3.4 应用场景

• 使用GIF不仅可以“增加内容趣味”，还可以在教程和指南中演示相关操作和流程。

• 如果需要比8-bit彩色图像更清晰的图片就不要用（JPEG最多可支持24-bit）。

4. WebP – JPEG&PNG最佳替代图像格式

4.1 简介

WebP：（Web Picture）是一种现代的图像格式，由Google开发，旨在提供高质量的图像压缩和更快的加载速度。是JPEG和PNG最佳替代图像格式。WebP致力于提供相同质量的图片，但文件尺寸较小。通过减少图片文件的大小，而不会“降低图片呈现质量导致糟糕用户体验”，并且有利于网站加载速度提升。

在Google的WebP压缩研究中，Google发现平均一个WebP图片文件

• 比JPEG图片小25-34％。
• 比PNG图片小26％。

说明：当然我也不清楚为什么上边这个图在我转成webp格式后反而还比之前的jpg更大了，不是很理解，可能是在线转的问题？反正知道webp格式的特点就可以啦。

那么Google的WebP格式如何实现文件大小减少？WebP支持有损和无损压缩，因此确切的减少取决于我们使用的是有损还是无损压缩。通过有损的WebP压缩，WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图片中相邻像素的值来预测值，然后仅对差异进行编码。它基于VP8关键帧编码。无损WebP使用WebP团队开发的一套更为复杂的方法。如果想详细了解WebP压缩技术，那么可以阅读谷歌相关文档。

Google关于WebP的一些说明资料：Lossless and Transparency Encoding in WebP，WebP Compression Study。

4.2 优缺点

• **优点：**较小的文件即可获得相同或更好的图像质量。

高压缩率：WebP 图像通常具有更小的文件大小，相对于传统格式如JPEG和PNG，可以减少带宽使用和加速页面加载速度

高质量：即使在较高的压缩率下，WebP 图像通常能够保持较高的图像质量，减少了压缩损失。

透明度：WebP支持透明通道，可以用于创建带有透明背景的图像，类似于PNG格式。

动画：WebP还支持动画图像，允许创建小型、高质量的动画。

广泛支持：大多数浏览器都已经支持，但是目前低版本的Safri以及IE还不支持。

• **缺点：**并非所有浏览器和图像编辑器都支持。

4.3 兼容情况

为了使WebP图片起作用，需要Web浏览器兼容才行。不幸的是，尽管越来越多的浏览器开始兼容WebP，但WebP兼容性仍然不是通用的。大多数计算器系统自带的图像编辑器仍不支持该格式，但Photoshop等专业软件均支持WebP。

当前主流浏览器一般都支持WebP图片（冥顽不灵的IE依然是不支持的，也可能因为它不是开源的），例如：

• Chrome（PC设备为17+版本，移动设备为25+版本））
• Firefox（PC&移动设备 65+版本）
• Edge（18+）
• Opera（PC&移动设备11.0+版本）

值得注意的是Safari，Safari的桌面版和移动版均不支持WebP图片。Apple在2016年曾尝试Safari兼容WebP的开发，但此后就渺无音讯了。

Internet Explorer也不兼容WebP（Edge支持WebP，因为它基于Chromium）。

总计，大约77％互联网用户使用支持WebP的浏览器。但23％的数字太大了，不容忽视：

兼容性处理：

• 前端做处理：

<picture>  
    <source type="image/webp" srcset="flower.webp">  
    <source type="image/jpeg" srcset="flower.jpg">  
    <img src="./flower.jpg" alt="">
</picture>

• 后端处理：

如果图片资源存储在服务端，可以设计一套通用方案，在服务端根据Accept请求头判断是否支持Webp格式，如果支持返回Webp格式，否则返回PNG格式

4.4 应用场景

JPEG和PNG文件最佳替代格式，可节省带宽并提升网站加载速度。

（1）WebP 格式适用于网页开发，特别是那些需要快速加载的网站和移动应用程序。

（2）适合用于图像库、图标、按钮、背景图像、动画以及需要高质量和小文件大小的图像。

（3）WebP 的无损压缩特性使它适用于医学图像、卫星图像、地图和其他需要高质量和完整性的图像应用。

5. TIFF – 扫描仪最佳拍档图像格式

5.1 简介

TIFF是“Tagged Image File Format”的缩写，是一种光栅图像格式，最常用于存储和编辑图像，以便于将来打印，它是一种可跨软件进行原图层编辑的图片格式。该格式不支持任何压缩，图像质量是该格式的首要保证。它的图标如下：

5.2 优缺点

**优点：**高质量文件适合存储或印刷出版。

**缺点：**不支持压缩导致图像文件体积过大；非常有限的浏览器支持。

5.3 兼容情况

• 主流浏览器在没有附加组件或扩展的情况下不支持TIFF文件。
• 一般为专业图像编辑和发布工具的其中一种导出格式。

5.4 应用场景

• 存储和准备要出版印刷的图像和图形。
• 许多扫描仪以该格式文件保存高质量扫描文档或图片。

6. BMP — 过气的图像格式

6.1 简介

BMP取自位图Bitmap的缩写，也称为DIB（与设备无关的位图），是一种独立于显示器的位图数字图像文件格式。常见于微软视窗和OS/2操作系统，Windows GDI API内部使用的DIB数据结构与 BMP 文件格式几乎相同。

图像通常保存的颜色深度有2（1位）、16（4位）、256（8位）、65536（16位）和约1677万（24位）种颜色（其中位是表示每点所用的数据位）。8位图像可以是索引彩色图像外，也可以是灰阶图像。表示透明（英语：transparency (graphic)）的alpha通道也可以保存在一个类似于灰阶图像的独立文件中。带有集成的alpha通道的32位版本已经随着Windows XP出现，它在Windows系统的登录界面和系统主题中都有使用。

它基本算是一种已经过时的图像文件格式，几乎不压缩情况映射像素。这意味着BMP文件体积经常会比较庞大，不利于存储或处理。

6.2 优缺点

• 优点：尽管文件大小比较大，但是位图文件的简单性、在微软视窗和其他地方的广泛使用以及这种格式的优秀文档标准以及没有专利约束，使得它成为其他操作系统图像处理程序能够读写的一种最为常用的格式。
• 缺点：与WebP，GIF或PNG等格式相比，体积又大又没有质量上的提升。

6.3 兼容情况

• 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支持。
• 大多数系统默认图像编辑器（例如MS Paint）支持。

6.4 应用场景

接触的确实不多，没怎么见过bmp文件了。

7. HEIF – 手机照片常见图像格式

7.1 简介

HEIF，是High Efficiency Image File Format的缩写，是由MPEG视频格式背后的技术团队开发的图像格式，是JPEG的直接竞争对手。HEIF压缩效率理论值几乎是JPEG的两倍，换言之，文件大小相同的情况下，HEIF图像质量可以提高一倍。这是一种基于像素映射的光栅图像格式，无法做到按比例放大图像而不会降低质量。

HEIF规范也定义了高效率视频编码（HEVC）编码的内嵌图像和HEVC编码的图像序列的存储方式，其中以受约束的方式应用帧间预测（英语：Inter frame）。

HEIF文件与ISO基本媒体文件格式（英语：ISO base media file format）（ISOBMFF，ISO/IEC 14496-12）兼容，并且还可以包括其他媒体流，例如定时的文本和音频。

7.2 优缺点

• 优点：相对于JPG来说，同等质量下，可以做到压缩效率更高。
• 缺点浏览器不支持和有限的操作系统支持。

7.3 兼容情况

• 所有主流浏览器均不支持。
• 在macOS Sierra和iOS 11以上版本系统兼容支持，但Safari浏览器又不支持。

7.4 应用场景

• 一些相机中会有支持HEIF格式，例如索尼，我自己的A7C2就有。
• 后来新出的苹果手机一般都支持，有一些安卓手机也可能会使用。

8. SVG – 可缩放矢量图形格式

8.1 简介

可伸缩矢量图形文件格式（通常称为SVG），由W3C开发的一种标记语言，可以在浏览器中直接渲染为二维图像。它不像栅格格式那样依赖像素，而是使用XML文本以类似于数学方程式计算勾勒形状和线条获得图形，svg格式的文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。。也就是说，可以在不损失任何质量的情况下无限放大SVG图像。

8.2 优缺点

• **优点：**体积小和无损缩放，可用于简单的插图，形状和文本。

• **缺点：**对于图像或复杂图形而言，不是理想的格式。

8.3 兼容情况

• 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支持。
• 默认图像编辑器通常不支持SVG，但是大多数插画软件都支持SVG导出。

8.4 应用场景

• 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支持。

• 默认图像编辑器通常不支持SVG，但是大多数插画软件都支持SVG导出。

9. EPS – 插画/排版设计矢量图像格式

9.1 简介

EPS（全称为Encapsulated PostScript）文件属于矢量图像文件，一般为Adobe Illustrator和其他插插画软件（如CorelDraw）的一种保存格式。

与SVG文件相似，EPS实际上是一个基于文本的文档格式，该文档使用代码表达形状和线条，而不是映射像素和颜色。因此，EPS文件也支持无损缩放。

9.2 优缺点

• 优点：无损缩放，打印机支持的文档和设计。
• 缺点：有限的软件支持，一般为IIIustrator、Quard Xpress、PageMaker等软件；Photoshop和Coreldraw可打开但不能编辑。

9.3 兼容情况

• EPS不是标准的Web图像文件格式，所有浏览器都不支持EPS。
• 几乎每个绘画程序及大多数页面布局程序都允许保存EPS文档。

9.4 应用场景

• 使用Adobe Illustrator或其他页面排版软件时，用于存储，保存和打印。

10. Raw – 数码相机图像存储文件格式

10.1 简介

Raw图像格式是数码相机用来存储高质量图像以供后期制作和编辑的文件类型。相机制造商的主要Raw图像文件类型：

• 柯达：CR，K25，KDC
• 佳能：CRW CR2 CR3
• 爱普生：ERF
• 尼康：NEF NRW
• 奥林巴斯：ORF
• 宾得：PEF
• 松下：RW2
• 索尼：ARW，SRF，SR2

RAW文件在一张图片中包含多达16,384种不同的颜色，而不是JPEG文件仅包含256种颜色。也就是说RAW文件在调整颜色和对比度等后期处理时，有着更大的灵活性。RAW图像不适合用于网络演示或共享，并且主流浏览器或图像查看器兼容性极差，一般需要使用专业的相机图像处理软件处理。

10.2 优缺点

• 优点：更高质量的图片，色彩变化更大。
• 确定：图像文件超级大（RAW文件体积随便就20-40MB）。

10.3 兼容情况

这个要看软件的支持情况了。

10.4 应用场景

• 以最高质量保存照片以进行后期处理和编辑。一般在摄影上用的多，他可以保留大量的细节和色彩信息，为后期提供了巨大的可操作空间。