了解图像类型：开发人员指南

我们知道，跟上当今使用的所有图像文件类型可能具有挑战性。为了简化情况，我们编写了一份指南，详细介绍了每种流行的图像格式。我们特别关注网络开发人员会使用的图像类型 - 还有更多的文件格式，但这些是网络上最流行的格式。 要深入了解最流行的下一代图像格式 AVIF， 。 请查看这篇文章 读完本文后，您将了解何时以及如何使用我们讨论的所有图像文件格式，并可以自信地选择正确的一种。您将了解如何在保持较小文件大小的同时最大限度地提高图像质量，从而提高网站和应用程序的性能。 要了解如何自动优化图像并即时转换图像格式， 请访问 imgix.com。 以下是我们将在本文中介绍的图像文件类型的列表： 动图 巴布亚新几内亚 TIFF JPG/JPEG JPEG2000 JPEGXR 骨形态发生蛋白 静止无功发生器 HEIC/HEIF WEBP AVIF/AV1 为什么有这么多图像格式？ 对多种多样的图像格式最简单的解释是，每种格式都有不同的用途。不同的图像格式还使用不同的压缩方法，这是一种对文件信息进行编码以减少其总大小并加快网页下载速度的过程。 由于压缩算法的差异，某些图像格式会在相同图像质量的情况下产生较小的文件大小，但会牺牲图像透明度等功能。 某些格式的属性仅适用于特定类型的图像。例如，SVG 格式是一种矢量格式，非常适合图标，但它不适合照片，因为照片是使用称为光栅的不同图像格式存储的。 说到图像格式，我们应该在深入研究图像类型之前澄清这些和其他一些常见术语。让我们简要讨论一下光栅图像格式和矢量图像格式以及无损压缩与有损压缩之间的区别。 光栅与矢量 在底层，矢量格式将图像定义为一系列形状，而不是存储有关字段中每个像素的颜色的信息。 此属性使得 SVG 等矢量图像非常适合图标、徽标、图表和其他数字优先图形，同时每个图像使用的带宽非常少。 相比之下，光栅格式由单个像素组成，由于其高效的压缩算法而在网络上广泛使用。 光栅格式和矢量格式之间的主要区别之一是，光栅格式无法在不看起来像素化或模糊的情况下从其原始分辨率放大。 下图演示了放大图像如何导致像素化。 资料来源： 维基共享资源 无损压缩与有损压缩 图像需要大量数据才能显示。以原始形式传输所有数据，无论是通过互联网还是存储在硬盘上，效率都非常低。为了使图像更高效，我们对其基础数据应用“压缩”。 压缩使用数学和模式匹配方法来减少传输图像所需的数据。 如果您曾经使用过缩写词，例如“LOL”来表示“大声笑”，那么您已经执行了一种非常简单的压缩形式。 为了使压缩发挥作用，发送方和接收方都必须知道是否应用了压缩以及使用了什么压缩算法。 发送方必须知道如何压缩图像数据，接收方必须知道如何反转压缩或“解压缩”以将图像数据恢复为可显示的形式。 有许多不同的数据压缩方法，但它们都属于两类之一：无损或有损。被认为是“无损”的压缩算法将数据准确地保留为压缩前的状态。 虽然无损算法很有效，但如果可以以更容易压缩的方式预先调整图像数据，则可以获得更高的效率。 例如，如果图像中有一堆难以察觉的灰白色像素，将它们更改为纯白色可能会使图像更容易压缩。查看图像的最终用户永远不会注意到其中的差异。 然而，由于数据发生了变化，一些原始细节会“丢失”，以便有利于压缩。这称为“有损”压缩。 简而言之，无损压缩意味着可以减小图像的文件大小而不影响其质量。相反，有损压缩会消除文件中无法恢复的某些信息（通常是冗余的）。 现在我们已经介绍了这些术语（在我们讨论每种图像类型时会出现这些术语），让我们更多地讨论网络上最常见的图像类型。 GIF（图形交换格式） 图形交换格式 (GIF) 是一种创建于 1987 年的光栅图像格式，是当今仍在频繁使用的最古老的文件格式。 GIF 图像使用称为 LZW 编码的压缩算法，以便于存储和更高的压缩图像质量。 描述： 尽管 GIF 在技术上可以支持更多颜色变化，但 GIF 的构建方式几乎总是对图像施加 256 色限制。 如今，GIF 是最著名的动画图像格式。动画图像将多个图像（或帧）组合成一个文件，并且连续播放这些帧。 GIF 在动画中流行的原因之一是它们伪装成图像。 您可以将动画 GIF 上传到页面，而无需视频播放器。虽然 GIF 通常用于动画，但由于分辨率质量较低以及帧的压缩方式（导致文件大小较大），它们并不是理想的选择。 需要简单透明度的简单图像，例如图形或徽标。 最适合： 性能取决于 GIF 中的帧数。如果帧太多，GIF 由于文件较大，在网页上加载速度会很慢。创建 GIF 图像时，您可以调整每帧的分辨率和每秒显示的帧数。 性能： 当然，每秒帧数 (FPS) 值越高，每帧的分辨率越高，GIF 文件就越大。尝试使用不同的 FPS 值和不同的分辨率来找到适合您的用例的最佳组合。 一般来说，GIF 很难压缩，因为每个动画序列都是一组缝合在一起的独立图像。即使 GIF 中各帧之间图像的某些部分是相同的，压缩算法也很难识别这些部分。 此限制是 GIF 图像的文件大小通常大于 MP4 视频中相同帧序列的原因之一。 GIF 使用无损压缩算法，但由于与将全彩 24 位图像转换为调色板 8 位 GIF 相关的预过滤（包括抖动、钳位和颜色量化），图像质量通常会下降。 质量： 所有版本的 Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari。 浏览器兼容性： PNG（便携式网络图形） 便携式网络图形 (PNG) 是一种使用无损压缩的文件格式。具有锐利过渡和大面积纯色的图像（例如，包含文本的图形或图像）可以比 JPG 格式更好地压缩为 PNG 格式。 描述： 因此，您经常会发现 PNG 图像作为屏幕截图和插图。 PNG 图像已成为网络标准，因为它们提供图像透明度：您可以将透明 PNG 图像放置在另一个图像上，并创建深度和多层效果。 PNG 还支持完整的 Alpha，这意味着图像可以是半透明的。例如，半透明效果使得 PNG 图像中具有透明阴影成为可能。 图形、插图、横幅和徽标。 最适合： PNG 文件的文件大小往往比 JPEG 和 SVG 更大，因此如果您需要文件大小较小的高分辨率图像，则它们不太适合 Web。 性能： PNG 图像使用无损压缩，其像素完美的表示非常适合高对比度图形。某些 PNG 文件由于其 24 位颜色深度而可容纳多达 1600 万种颜色。 质量： 所有版本的 Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari。 浏览器兼容性： TIFF（标记图像文件格式） 标记图像文件格式 (TIFF) 是一种最初为存储扫描照片而创建的图像格式。该格式在摄影师、图像编辑和出版商中最受欢迎，主要是由于历史原因。 描述： 文件大小不成问题的高分辨率图形和图形艺术。 最适合： TIFF文件可以压缩或解压缩；该格式支持多种压缩选项。 Web 浏览器通常不支持 TIFF 图像，因此不能使用它们在 Web 上显示图像。 性能： TIFF 文件质量非常高；它们通常要么完全不压缩，要么使用无损压缩，这使得它们非常适合照片和扫描图像。 质量： 目前没有浏览器支持 TIFF；它仅用作下载格式。 浏览器兼容性： JPG/JPEG（联合摄影专家组） 联合图像专家组 (JPEG/JPG) 文件是有损压缩图像最常用的格式。许多人想知道 JPG 和 JPEG 文件之间有什么区别，但实际上没有区别：这两个缩写完全可以互换。 描述： JPG 格式的一个有价值的功能是 。大多数 JPG 图像都是在基线模式下创建的。要了解两种模式之间的区别，请想象一下逐行阅读一页文本。您从顶部开始，逐行向底部进行。 独特的功能： 渐进模式 如果你读完这一页需要一分钟，那么你读完半页就需要 30 秒。 基线模式 对于 下的 JPG 图像，这就是您在 Web 上加载 JPG 文件的方式 - 从上到下一行接一行的像素。如果您的图像由于文件较大或连接速度较慢而加载缓慢，则您的网站访问者将只能看到图像的一部分，直到完全加载为止。 基线模式 渐进模式 然而，在 下，您首先加载图像的低分辨率版本，然后继续加载更高分辨率的版本。 渐进模式 您的网站访问者将立即看到完整的图像，即使其质量较低，并且随着图像加载，其在页面上的质量将会提高。 渐进式 JPG 图像非常适合快速网站，因为它们可以最大限度地减少初始页面绘制时间。 静态图像和照片、屏幕截图。 最适合： 由于文件较小，因此具有较高的性能；易于下载和上传。 性能： JPEG 是一种有损格式，这意味着只要调整图像大小，质量就会丢失。 JPEG 图像往往会损失相当多的清晰度，因此它们在图表和其他需要高清晰度才能正确查看的图形中效果不佳。 质量： 然而，JPEG 在用于全彩色照片和图像时效果非常好。由于与 PNG 相比，JPEG 的文件大小更小，因此也适用于屏幕截图。 所有版本的 Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari。 浏览器兼容性： “JPEGmini 和 MozJPEG 有什么区别？” JPEGmini 和 MozJPEG 的目的都是减小 JPG 图像大小，而不会对最终用户造成可见影响。 JPEGmini 使用手动调整的算法，在人类可能不会注意到的地方降低图像质量。这种独特的算法使程序能够显着减小 JPEG 图像的大小，有时高达 80%。 MozJPEG 是 Mozilla 开发的 JPG 编码器，它使用许多自动调整来实现 JPG 文件大小的大幅减小，同时保持图像质量。 JPEG2000 联合图像专家组 2000 (JPEG2000) 是有时用来代替 JPEG 的标准。 JPEG2000 使用复杂的编码方法。与普通 JPEG 文件相比，它提供了更好的压缩性能，而不会显着损失图像质量。 描述： 静态图像和照片。 最适合： 文件小，性能高；易于下载和上传。 性能： 质量高于常规 JPEG 文件，因为压缩方法更有效。 质量： 该格式不向后兼容，并且缺乏对 Chrome、Firefox、Internet Explorer 和 Microsoft Edge 等主要浏览器的支持。该格式仅在 Safari 浏览器版本 5-13.1 中受支持。 浏览器兼容性： JPEGXR JPEG XR（扩展范围），也称为高清照片，是 Microsoft 开发的一种文件格式。该格式主要用于 Windows 系统，其他平台通常不支持。 描述： 与 JPEG 相比，JPEG XR 增加了无损压缩、完整 Alpha 支持（半透明的选项）和更高的颜色精度等功能。 JPEG XR 的独特功能是支持平铺结构。图像被划分为图块——可以单独解码的独立区域，并且可以显示每个区域而无需解码图像的其余部分。 独特功能： 向 Internet Explorer（版本 9 至 11）和 Microsoft Edge（最高版本 18）用户显示的照片。 最适合： 高性能源于更有效的压缩算法。平铺支持允许在浏览器中更快地渲染。 性能： JPEG XR 可以使用有损和无损压缩，因此图像的质量将根据所选的压缩选项而有所不同。通常，使用有损压缩时，文件大小将小于 JPG 图像，而使用无损压缩时，文件大小将小于 PNG。 质量： 仅支持 IE 9-11 和 Microsoft Edge（最高版本 18）。较新版本的 Edge 已删除对 JPEG XR 图像的支持。 浏览器兼容性： BMP（位图） 位图 (BMP) 文件格式是 Windows 系统上最流行的光栅图像格式。 描述： 如果由于某种原因无法进行压缩，则主要用于 Windows 计算机上的屏幕截图。 最适合： 位图图像占用大量存储空间，特别是当它们包含大量颜色时。因此，在网站上使用它们时加载速度可能会很慢，这也是我们不建议在网络上使用 BMP 文件的原因之一。 性能： 位图图像提供无损、像素完美的质量（就像 PNG 一样）。 质量： 所有版本的 Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari。 浏览器兼容性： SVG（可缩放矢量图形） 可缩放矢量图形 (SVG) 文件是 Web 上常用的基于 XML 的矢量图像格式。 描述： 矢量格式比 GIF、PNG、JPG 和 BMP 等光栅格式更通用且更易于使用；更重要的是，它们可以顺利扩展，而不会降低质量。 缩放时需要一致质量的图形，例如图标、横幅和图表。 最适合： SVG 图像对网页性能有积极影响，因为它们的文件大小往往比 PNG、BMP 和 TIFF 等光栅格式小得多。 性能： SVG 图像无论大小如何变换，都能保持质量。此属性对于图形（例如在网站上用作网站图标和标题图像的公司徽标）至关重要。 质量： 几乎所有浏览器都支持 SVG 格式，除了 IE 6-8（2009 年 3 月之前发布）和 Android 浏览器 2.1-2.3（2010 年 12 月之前发布）之外。 浏览器兼容性： HEIC / HEIF（高效图像文件格式） 高效图像文件格式（HEIC / HEIF）是由运动图像专家组开发的图像格式。它是 Apple 最近推出的一种相当新的图像格式，作为 iPhone 和 iPad 上的照片存储格式。 描述： 苹果为其移动设备选择这种格式的原因之一是能够将图像序列（例如实时照片或连拍照片）存储为单个文件。 在这种情况下，HEIC 文件存储图片之间的差异而不是存储完整图像，从而导致文件大小显着减小。 摄影、动画图像。 最适合： HEIC 文件的文件大小比 JPEG 文件更大，因为 HEIC 格式使用无损压缩。然而，HEIC 图像的文件大小比 PNG 更小，PNG 是一种类似的无损格式。 性能： 非常高 - HEIC 图像可以存储 JPEG 图像两倍以上的细节。 质量： 没有现代浏览器提供对 HEIC 格式的支持。 浏览器兼容性： “HEIC 比 JPEG 更好吗？” HEIC 可以存储 JPEG 图像两倍以上的细节，同时保持较小的文件大小，使其比 JPEG 格式性能更高、质量更高。 HEIC 较小的文件大小对于帮助降低云存储成本特别有用，前提是您在网络上提供服务时可以将 HEIC 文件转换为其他格式。由于缺乏浏览器支持，HEIC 格式目前并未在网络上广泛使用。 但是，某些图像 CDN 解决方案会自动将 HEIC 文件转换为浏览器支持的格式。 “如何将 HEIC 图像转换为 JPEG 格式？”您可以使用在线工具（例如 来完成此操作。 HEIC to JPG） “我需要许可证才能使用 HEIC 吗？”以非商业方式使用 HEIC 格式不需要任何许可。 WEBP（网页图片格式） 网络图片格式（WebP）是由 Google 开发的一种图像格式。它可以采用有损或无损压缩，因此您可以在较小的文件大小和较高的质量之间进行选择。 描述： WebP 旨在创建更小、更好看的图像，通常会增加网页的加载时间。 WebP 还支持动画和循环，类似于 GIF。该格式越来越受欢迎和支持。 照片、横幅和动画图像。 最适合： 使用压缩时良好。 性能： 总体良好，尤其是在使用无损压缩时。 质量： 截至 2018 年，WebP 已获得除 IE 之外的所有主要网络浏览器的广泛支持，Apple 已宣布在即将推出的 Safari 版本中支持 WebP。我们建议在将 WebP 图像添加到您的网站时使用 JPEG 或 PNG 后备。 浏览器兼容性： “如何阻止 Google Chrome 将我的图像另存为 WebP？”默认情况下，Google Chrome 以 WebP 格式保存网页图像。如果您使用的是 Mac，则可以使用系统默认的预览应用程序将 WebP 图像导出为 JPG。 在 Windows 上，您可以下载扩展程序，例如 。另一种选择是使用 imgix，这样当您的客户使用 Chrome 或 Firefox 时，您网站上的图像将以 WebP 格式提供，而对于其他浏览器则以 PJPG（渐进式 JPG）格式提供。 将图像另存为 PNG AVIF（AV1 图像文件格式） AVIF 格式是基于 AV1 视频编码格式的图像格式。 AV1 由 创建和开发，该联盟由 Mozilla、Google、Cisco、Netflix、Amazon 和其他公司组成。 说明： 开放媒体联盟 AVIF 背后的主要思想是利用最初为图像格式的视频开发的压缩算法。 Netflix ，因为这种格式在保持较小图像尺寸的同时提供了卓越的质量。 认为 AVIF 在其应用程序中具有图像潜力 包含需要保留的特定细节的图像，例如电影海报中的渐变、文本和图形。 最适合： 使用压缩时效果很好。 性能： 使用压缩时效果很好。 质量： Google Chrome 从版本 85 开始支持 AVIF 格式。Firefox 从版本 77 开始支持 AVIF，但 AVIF 功能默认处于禁用状态，需要在设置中启用。其他浏览器目前不支持 AVIF 格式。 浏览器兼容性： 我应该选择哪种图像格式？ 在本节中，我们根据您的具体用例提供图像格式的建议。 对于网站上的照片，我们建议使用 JPG，因为它的文件大小较小。虽然其他格式提供透明度等附加功能，但这些对于照片来说并不是必需的。 照片： 更好的选择是使用智能服务，根据用户运行的浏览器将静态图像转换为最佳格式。 例如，imgix 为使用 Chrome 和 Firefox 的用户提供 WebP 格式的图像，为使用 Internet Explorer、Safari 和 Microsoft Edge 的用户提供 PJPG 格式的图像。 对于卡通和艺术品，我们也建议使用 JPG 格式，原因相同：JPG 图像的文件大小较小，而且艺术品通常不需要透明度。 线条艺术和卡通： 我们对图形设计元素的建议有两个方面： 图形设计元素： 尽可能使用 SVG，因为它的文件较小并且易于调整大小而不会损失质量。 否则请使用 PNG，因为其无损压缩非常适合具有锐利过渡和大面积纯色的图像。 我们建议图标使用 SVG 格式。该格式生成小文件，使您能够在不损失质量的情况下缩放图像。 图标： 最好从一开始就以 SVG 格式创建图标，因为事后将 PNG 或 GIF 图像转换为 SVG 等矢量格式可能不可行。 对于网站徽标，SVG 再次获胜。这种格式比其他格式占用更少的带宽，并且可以轻松调整大小。与图标一样，尝试将徽标创建为 SVG。 网站徽标： 我们推荐的动画图像是 MP4 格式。它是一种视频格式而不是图像格式，与 GIF 相比，MP4 动画的大小约为 GIF 的十分之一。 动画图像： 使用 标签，设置自动播放和循环选项，并设置 属性以复制 GIF 与 MP4 文件的行为。当您使用 imgix 时，我们会自动将您的 GIF 文件转换为 MP4（注意：对动画 GIF 的支持是 imgix 的一项高级功能）。 muted imgix 可以提供哪些图像格式？ 文件类型可以作为 或 与 imgix 交互。 输入格式 输出格式 是 imgix 参数接受的文件。您可以使用 imgix 的 API（例如 ）转换 接受的图像。 输入格式 w=600 输入格式 是 imgix 可以将任何输入格式转换成的文件类型。例如，您可以使用 fm=png 将 jpg 转换为 png。 输出格式 任何不支持的输入格式都将 提供。 在不进行任何转换的情况下 文件类型 支持作为输入格式 支持使用 FM 作为输出格式 人工智能 X APNG* X AVIF X 骨形态发生蛋白 X 每股收益* 动图 X X HEIC X* 首次代币发行 X 集成电路神经网络 X JPEG X X JPEG2000 X X JPEGXL JPEGXR X JSON X PCT X PDF X PJPEG X X 巴布亚新几内亚 X X PNG8 X X PNG32 X X PSD X 静止无功发生器 X* TIFF X WEBP X* X AVI X H.264 X HLS X MOV X MPEG-4 X MP4 X X WMV X 网络管理 X X* * 请参阅下面的 文件具体注释 使用 imgix 提供不支持的资产 尽管 imgix 针对提供图像进行了优化，但仍可以从源中传递其他静态资源，例如 JavaScript 和 CSS 文件。这将使您受益于通过我们的全球分布式 CDN 服务其他资产。 但是，我们不保证此类资源的行为——渲染参数（尤其是默认参数）可能会影响输出，并可能意外输出渲染错误。 提供不受支持的文件类型时，请勿在 URL 上应用任何参数，这一点很重要。虽然在不受支持的输入类型上使用参数通常不会出现问题，但在极少数情况下，参数可能会导致某些文件类型出现意外行为。 如果您配置了默认参数的源导致输入资源不受支持出现问题，您可以通过以下任一方法解决此问题： 不使用 imgix 或 使用单独的源来服务这些资产 文件具体注释 澳大利亚巴布亚新几内亚 动画 PNG 将渲染为静态 APNG。对于动画，请使用动画 GIF（高级功能）。 每股收益 仅支持作为传递类型，不支持作为输入类型。 HEIC 仅当 是从 iOS 设备创建时，HEIC 才有效 原始图像 SVG 的 可以通过联系 启用 SVG 作为输入参数。如果您的帐户尚未启用它们，只要它们在文件顶部有正确的 XML 声明，我们就可以传递它们。 support@imgix.com 请注意，SVG 存在一个安全漏洞，允许在通过 Web 浏览器提供服务时执行内联 javascript。 通过启用 SVG 作为输入参数，您可以通过允许 imgix 光栅化并提供文件来阻止执行此代码。您可以通过在源设置中应用任何默认参数来完成此操作，例如 auto=compress。 防止与 SVG 相关的漏洞的另一种方法是阻止用户上传 SVG，从而防止从您的源提供未经授权的 SVG。 不建议在 SVG 文件中使用 Base64 编码。 Base64 块不会被我们的渲染堆栈处理，也不会显示在输出渲染中。 WEBP 尚不支持动画 WebP 作为输入格式。 网络管理 将 GIF 转换为 WEBM 时透明度会丢失。作为替代方案，您可以将 GIF 转换为 APNG 以支持透明度。 常见问题 (FAQ) “网站上的图像合适的图像尺寸和分辨率是多少？”答案取决于您的网站访问者使用的设备以及您如何使用每个图像。 我们建议使用针对每个设备的屏幕尺寸进行优化的图像尺寸，以便图像保持高质量，同时消耗尽可能少的带宽。 例如，iPhone 11 Pro Max 的屏幕分辨率为 1242x2688 像素。当您考虑 时，如果您的图像将在浏览器窗口中占据网站的整个宽度，则应考虑使用这些尺寸的 3 倍的图像。 设备像素比 (DPR) 使图像太大会不必要地消耗额外的带宽，而使用较小的文件大小会使图像像素化并降低页面质量。相同的原理按比例适用于占用小于整个窗口宽度的单个或多个图像。 在浏览器中， 元素的 属性是根据屏幕尺寸显示不同图像尺寸的便捷方法。 响应式图像指南，了解有关它为何有用以及如何工作的更多详细信息。 srcset 查看带有 srcset 概括 在本文中，我们介绍了许多主流图像格式，包括它们的性能和浏览器兼容性。请记住，没有一种格式适合网络上的每张图像。 要选择最佳图像格式，请考虑如何使用每个图像、是否需要以不同格式向用户显示图像以及计划支持哪些浏览器。要自动转换图像格式以获得最佳性能， 。 请立即在 imgix 创建免费帐户