大多数页面和文章都使用屏幕截图和图像来丰富文本内容。实际上，只有大约8％的网站不包含任何视觉内容。
许多站长或者网站运营人员其实对图像类型了解不深，如何根据不同用例选择何种图像文件类型。很多时候，由于选择了不合适的图像类型导致网站加载速度变慢，因为所选择的图像不是可用的最佳格式，也没有适当的优化。
在本文中，我们将介绍所有常见的图像文件格式，优缺点是什么以及适用场景（以保证为访问者提供最佳的用户体验）。
- 有哪些不同的图像文件类型？
- 15种常见的图像文件类型（格式）
- 图像文件类型常见问题解答
有哪些不同的图像文件类型？
图像文件的类型和格式分为两个主要类别：光栅（或者叫作栅格）图像文件和矢量图像文件。
栅格图像文件格式
网络上最常见的光栅图像格式包括JPEG，GIF和PNG三种。
栅格图像文件类型为静态图像，其中每个像素均基于其分辨率（例如1280×720）具有定义的颜色，位置和比例。
由于静态的，无法随心所欲地调整图像的大小，否则原始设计和像素将简单地被拉伸以填充额外的空间。最终会产生模糊，像素化或其他失真的图像。
光栅图像-JPEG示例
一般情况下，我们在互联网上看到的绝大多数照片或图像都使用光栅图像格式。
矢量图像文件格式
SVG，EPS，AI和PDF这几种格式为最为常见的矢量图像文件类型。
与静态栅格图像文件格式（每个设计形状和颜色都与一个像素相关联）不同，矢量图像格式更加灵活。
取而代之的是，矢量图形使用笛卡尔平面上的直线和曲线系统（即通过数学公式计算获得的），该系统相对于总面积（而不是任何单个像素）进行缩放。
这意味着我们可以无限扩大原始图像分辨率，又不会损失质量或失真。
矢量图像格式放大倍数（图片来源：Wikipedia.com）
如您所见，放大7倍时，两种图像类型的在质量之间的差异是完全无法比拟的，矢量图像依然十分清晰，但光栅图像已经模糊不可见了。
由于SVG是根据总面积的百分比而不是像素来计算位置的，因此根本没有像素化。
注：如果您曾经学习过平面设计相关知识，您可能会了解到，矢量图像一般称为图形，即它是一种几何形状，而不是单纯的像素图；光栅图像（位图）则称为图像，在固定的尺寸内包含一定数量的像素。
15种常见的图像文件类型（格式）
下面，我们介绍了15种最为常见的图像文件格式，从Web栅格图像到矢量图形，再到图像编辑软件文件。
深入探讨每一种格式，并讨论了每种格式的优缺点，浏览器和操作系统兼容情况以及最理想的应用场景。
- 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.1.JPEG（或JPG）- 最为常见的图像格式
老虎图像JPEG格式
JPEG（或JPG），其全称为Joint Photographic Experts Group（联合图像专家组），是一种有损压缩的光栅图像文件格式，适合作为共享图像。既然JPEG是“有损的”图像，也就是说使用此格式时，若减小文件大小，在一定程度上也会降低图像质量。
JPEG是目前互联网上最常用的图像文件类型之一，因为它的可压缩性及浏览器/操作系统广泛支持。
大多数社交媒体平台（例如Facebook和Instagram）会自动将上传的图像文件转换为JPEG，且会根据不同场景使用固定的尺寸大小来控制图片的分辨率。
优缺点
- 优点-更小文件的体积，通用浏览器和操作系统广泛支持。
- 缺点-有损图像压缩可能导致较差的文本可读性。
兼容情况
应用场景
- 博客和文章图像（如用户头像，产品图片等）的不错选择。
- 不要将JPEG格式用于信息图表（拥有很多小文本）或教程截图，因为图像里面的文字至关重要。
2. PNG – Web广泛使用的图像格式
闪电博的资源中心.png图像文件
PNG，英文全称为Portable Network Graphics PNG（便携式网络图形），也是一种栅格图形格式，但支持无损压缩，保证颜色之间的细节和对比度。
特别是，PNG提供比JPEG更好的文本可读性。
这使得PNG成为信息图形，横幅Banner，屏幕截图以及其他同时包含图像和文本的图形的最佳表达方式。
优缺点
- 优点-高质量（无损）图像和清晰可见的文本。
- 缺点-如果文件过多（特别是高分辨率图像），可能会严重影响网站加载速度。
兼容情况
- 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 主流操作系统及其标准图像编辑器都支持。
应用场景
- 信息图表，横幅，博客图形，屏幕截图，优惠券和其他包含文本的视觉效果的不错选择。
- 不要在网站上使用高分辨率的照片，因为文件体积可能会高达几MB。
3. GIF – 动画图像格式
gif图像示例
GIF，英文全称为Graphics Interchange Format，属于另一种栅格格式图像文件类型。该格式也使用了无损压缩，且将图像“约束”为8 bits/每个像素，并限制为256色调色板。
GIF格式也是最有名的（和最常用）的动画图像，因为它的8-bit限制保证了动画体积更小和互联网友好。
优缺点
- 优点-更小的文件体积和动画支持。
- 缺点-8-bit限制代表图像质量受限。
兼容情况
- 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 主流操作系统及其标准图像编辑器的支持。
应用场景
- 使用动画GIF不仅可以“增加内容趣味”，还可以在教程和指南中演示相关操作和流程。
- 如果你需要比8-bit彩色图像更清晰的图片不要用这种格式（JPEG最多可支持24-bit）。
4. WebP – JPEG&PNG最佳替代图像格式
WebP图像示例
优缺点
- 优点-较小的文件即可获得相同或更好的图像质量。
- 缺点-并非所有浏览器和图像编辑器都支持。
兼容情况
- Google Chrome浏览器（电脑设备为17+版本，移动设备为25+版本），Firefox (65+)，Edge(18+) 和 Opera(11.0+) 都支持WebP。Safari计划版本14也将支持WebP。
- 大多数计算器系统自带的图像编辑器仍不支持该格式，但Photoshop等专业软件均支持WebP。
使用场景
- JPEG和PNG文件最佳替代格式，可节省带宽并提升网站加载速度。如果网站使用的是WordPress内容管理系统，可参考“如何实现WordPress网站使用WebP格式图片”文章，如何实现根据不同浏览器传输合适的图片格式。
5. TIFF – 扫描仪最佳拍档图像格式
TIFFC图标
TIFF是本图像文件类型指南不应该缺少的一种格式。
TIFF是“Tagged Image File Format”的缩写，是一种光栅图像格式，最常用于存储和编辑图像，以便于将来打印。
该格式不支持任何压缩，图像质量是该格式的首要保证。
优缺点
- 优点-高质量文件适合存储或印刷出版。
- 缺点-不支持压缩导致图像文件体积过大；非常有限的浏览器支持。
兼容情况
- 主流浏览器在没有附加组件或扩展的情况下不支持TIFF文件。
- 一般为专业图像编辑和发布工具的其中一种导出格式。
使用场景
- 存储和准备要出版印刷的图像和图形。
- 许多扫描仪以该格式文件保存高质量扫描文档或图片。
6. BMP — 过气的图像格式
Bitmap vs gif
Bitmap（BMP）是一种已经过时的图像文件格式，几乎不压缩情况映射像素。这意味着BMP文件体积经常会比较庞大，不利于存储或处理。
优缺点
- 优点-“远古”产物，应该被遗弃的图片格式，没有任何优点。
- 缺点-与WebP，GIF或PNG等格式相比，体积又大又没有质量上的提升。
兼容情况
- 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支持。
- 大多数系统默认图像编辑器（例如MS Paint）支持。
使用场景
- 都2020年了，还用什么BMP图像格式。
7. HEIF – 手机照片常见图像格式
JPEG vs HEIF
HEIF是High Efficiency Image File Format的缩写，是由MPEG视频格式背后的技术团队开发的图像格式，是JPEG的直接竞争对手。
HEIF压缩效率理论值几乎是JPEG的两倍，换言之，文件大小相同的情况下，HEIF图像质量可以提高一倍。
这是一种基于像素映射的光栅图像格式，无法做到按比例放大图像而不会降低质量。
优缺点
- 优点-相对于JPG来说，同等质量下，可以做到压缩效率更高。
- 缺点-浏览器不支持和有限的操作系统支持。
兼容情况
- 所有主流浏览器均不支持。
- 在macOS Sierra和iOS 11以上版本系统兼容支持，但Safari浏览器又不支持。
使用场景
- 一些较新的手机和设备使用它来存储照片，以保证照片质量。
8. SVG – 可缩放矢量图形格式
SVG logo
可伸缩矢量图形文件格式（通常称为SVG），由W3C开发的一种标记语言，可以在浏览器中直接渲染为二维图像。
它不像栅格格式那样依赖像素，而是使用XML文本以类似于数学方程式计算勾勒形状和线条获得图形。
也就是说，可以在不损失任何质量的情况下无限放大SVG图像。
优缺点
- 优点-体积小和无损缩放，可用于简单的插图，形状和文本。
- 缺点-对于图像或复杂图形而言，不是理想的格式。
兼容情况
- 主流浏览器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支持。
- 默认图像编辑器通常不支持SVG，但是大多数插画软件都支持SVG导出。
使用场景
- SVG适用于作为Logo，图标，简单插画以及任何响应式设计所需的自由缩放内容的格式。
Tips：如何实现WordPress博客支持SVG格式图像上传？
9. EPS – 插画/排版设计矢量图像格式
EPS格式图标
EPS（全称为Encapsulated PostScript）文件属于矢量图像文件，一般为Adobe Illustrator和其他插插画软件（如CorelDraw）的一种保存格式。
与SVG文件相似，EPS实际上是一个基于文本的文档格式，该文档使用代码表达形状和线条，而不是映射像素和颜色。因此，EPS文件也支持无损缩放。
优缺点
- 优点-无损缩放，打印机支持的文档和设计。
- 缺点-有限的软件支持，一般为IIIustrator、Quard Xpress、PageMaker等软件；Photoshop和Coreldraw可打开但不能编辑。
兼容情况
- EPS不是标准的Web图像文件格式，所有浏览器都不支持EPS。
- 几乎每个绘画程序及大多数页面布局程序都允许保存EPS文档。
使用场景
- 使用Adobe Illustrator或其他页面排版软件时，用于存储，保存和打印。
10. PDF – 电子书常用文档格式
PDF 文件示例
PDF（为Portable Document Format的缩写），如其名，该格式主要用于文本文档的存储，保存和读取。
但是，PDF文件实际上基于为EPS矢量图像文件提供支持的PostScript语言，也可以用于保存图像和插画。
这是用于存储插画，杂志封面等的图像格式，供需要时打印使用，很多时候我们在网上看到的电子书，就是这种格式。
优缺点
- 优点-可索引和可搜索的文本使其非常适合作为图表或报告格式；可以包含链接，CTA按钮和其他交互式元素；无损可伸缩性。
- 缺点-不能包含在Web内容中，必须作为独立文件加载读取。
兼容情况
- 主流浏览器都支持，但必须以独立文件打开，不能作为HTML的页面内容。
- 大多数标准文档编辑器（例如MS Word或Google Docs）和插画软件（AI，Inkscape）均支持该格式，但一般图像编辑软件不支持。
使用场景
- 创建一个交互式的可视报告或信息图表作为内容补充时，PDF是最佳选择。
11. PSD – Photoshop文档格式
PSD文件格式Logo
非常常见，大部分对该格式应该都不会感到陌生。PSD文件格式是一种用于保存图像文档的图像格式，为Adobe Photoshop软件特有的格式。
PSD不是网络安全图像格式，不兼容任何浏览器或标准图像查看器或编辑器。
优缺点
- 优点-所有过滤器，透明度，路径和编辑都是完全可自定义和可逆的；无损图像格式。
- 缺点-部分文件体积太大。
使用场景
- 用于存储Photoshop项目。
12. AI – Adobe Illustrator文档格式
Adobe Illustrator格式图标
AI是Adobe专门开发的另一种图像格式，不仅可以保存图像，还可以保存项目状态。
像PSD一样，它不用于网络，也不兼容任何浏览器或大多数默认图像查看器。
与PSD文件不同是，AI文件可以自由缩放，但质量不会有任何损失。
优缺点
- 优点-所有笔画，线条，形状，过滤器都是可自定义和可逆的；可自由放大或缩小插画大小。
- 缺点-有些PSD文件体积太大了。
使用场景
- 在完成之前和之后保存和存储Adobe Illustrator项目。
13. XCF —GIMP图像编辑工具专属格式
XCF图标
XCF（其全称为eXperimental Computing Facility），是开源图像编辑器GIMP特有的图像文件类型。类同与Photoshop特有的PSD文件格式，支持保存路径，透明度，滤镜等。
同样，这是用于存储项目的计算机文件类型，任何浏览器或默认图像查看器均不支持。
优缺点
- 优点-所有路径，过滤器和形状都是可自定义和可逆的；无损图像质量。
- 缺点-文件体积有时候会很庞大。
使用场景
- 用于存储GIMP项目。
14. INDD – Adobe InDesign文档格式
Adobe InDesign图标
INDD是Adobe InDesign软件特定的文件类型，用于保存该软件的项目文件，包括页面内容，样式，色板等。
尽管有时称为图像文件格式，但它倾向于用于展现文字以外的视觉元素。。
任何浏览器或默认图像查看器均不支持该格式，因为它不是网络安全格式。
优缺点
- 存储具有可自定义元素的大型多页设计项目。
使用场景
- 图形设计师和产品艺术家主要使用它来设计和制作海报，传单，杂志，小册子等。
15. Raw – 数码相机图像存储文件格式
Raw图像格式是数码相机用来存储高质量图像以供后期制作和编辑的文件类型。
相机制造商的主要Raw图像文件类型：
- 柯达：CR，K25，KDC
- 佳能：CRW CR2 CR3
- 爱普生：ERF
- 尼康：NEF NRW
- 奥林巴斯：ORF
- 宾得：PEF
- 松下：RW2
- 索尼：ARW，SRF，SR2
RAW文件在一张图片中包含多达16,384种不同的颜色，而不是JPEG文件仅包含256种颜色。也就是说RAW文件在调整颜色和对比度等后期处理时，有着更大的灵活性。
RAW图像不适合用于网络演示或共享，并且主流浏览器或图像查看器兼容性极差，一般需要使用专业的相机图像处理软件处理。
优缺点
- 优点-更高质量的图片，色彩变化更大。
- 确定-图像大胖子文件（RAW文件体积随便就20-40MB）。
使用场景
- 以最高质量保存照片以进行后期处理和编辑。
图像文件类型常见问题解答
文件的最为常见的3种图像文件类型是什么？
根据与Web使用相关的数据，三种最常见的图像文件类型分别为PNG，JPEG和SVG。
图像文件格式的使用情况统计（图像来源：w3techs.com）
为什么这三种图像文件格式最为受欢迎？
1. PNG：屏幕截图，Banner横幅，信息图表，图片
由于PNG作为一种更适合于附带文本的图像格式，因此它更常用于屏幕截图，横幅（取决于横幅广告尺寸）等。
并且由于采用了无损压缩，设计师和摄影师能够使用此格式图像在作品集网站上展示高质量的图片。
上述两个因素，加上其通用的浏览器和操作系统支持，使其成为网络上最受欢迎的图像文件类型。PNG在网站上的使用率高达77％。
2. JPEG：图片
有损压缩意味着JPEG是更好的选择，可用于在整个内容中展示图片。有限的质量损失对于普通的互联网用户几乎可以忽略不计，又可以节省大量的服务器磁盘空间和带宽。
这就是为什么它是互联网上第二受欢迎的格式，约72％的网站使用了此格式图像。一般情况下，大多数网站会同时使用PNG和JPEG。
温馨提示：JPG与JPEG之间没有区别，属于同一格式，两者的文件扩展名可以相互切换。
3. SVG：Logo，图标和插画
SVG文件是可缩放的矢量文件，非常适合图标，Logo，图形和简单的插画。该图像甚至可以作为CSS代码直接插入到页面中。
这就是SVG排名第三的原因，有27％的网站使用了SVG。
4.特别提名：GIF动画图片
尽管很少使用此格式作为静态图像的选择，但不可否认GIF已成为共享动画的第一选择。
gif动画示例
事实上，约有22％的网站在其页面上使用了GIF，即使这些网站也可能使用PNG和JPEG作为其标准格式。
哪种图像格式质量最高？
Raw图像格式的质量最佳，但文件体积超大，可能一个Raw格式的照片就高达几百MB。
对于Web图像，相同质量的情况下，WebP文件格式的文件大小比JPEG小25-35％，也就是说相同的存储空间可以上传更多更高质量的图像，有可以保证网站拥有很好的访问速度。
HEIF是另一种JPEG替代方案，提供更高的压缩效率，但遗憾的是目前主流浏览器均不兼容。
PNG文件提供无损压缩，但文件体积较大影响加载加载速度。单个PNG文件通常为数百KB甚至1MB +。但如果利用诸如延迟加载（WordPress 5.5+核心支持该功能 ）和CDN之类的一些策略，网站还是可以拥有一个较快的加载体验。
哪些文件格式支持透明背景？
目前网络上最常见的支持透明背景的的图像文件类型有PNG，WebP，GIF和SVG。
大多数计算机项目图像文件类型（如PSD，XCF和AI）也支持透明背景。
另一方面，流行的JPEG图像格式是不支持透明背景的。
PNG和JPEG孰优孰劣?
PNG和JPEG之间的主要区别是，PNG是一种无损图像格式，而JPEG是一种有损图像格式。换句话说，PNG使用压缩技术而不会牺牲图像的原始质量或细节。
对于附带文本的图像，教程屏幕截图，以及标志或其他精细元素需100％可见的照片，PNG才是最佳格式。
PNG vs JPEG漫画（图片来源：lbrandy.com）
从上面这张有趣的图片可以看出，与右侧的JPEG相比，左侧的PNG更清晰地展现文字和简单的形状。
那这就是否意味着JPEG是一种拙劣的图像文件类型？非也！
对于常规博客文章配图等其他无需关注细节的图片，JPEG可以实现足够好的质量，又能够大大减少文件体积。通常可以节省50％或更多的空间，一般人肉眼难以发现质量上的任何差异。
PNG和JPEG孰优孰劣？得视情况而下定论！
小结
可用于项目的图像（15个站长必备的图库网）有很多，但要选择最合适的一种以获得最佳效果，需要您对各种不同格式的图像有足够的了解。
用一句话概述，栅格格式最适合用于图像和图片，矢量格式则更适用于Logo徽标，图标和数字图形。
根据不同任务类型使用合适的图像文件类型不仅可以提高页面加载速度，还可以降低带宽流量和服务器负载，再说更快的速度用户体验也上去了。
原文地址：https://www.wbolt.com/in-depth-discussion-of-image-types.html
