图像格式比较

已发表: 2024-01-16

了解各种可用的图像格式就像在雷区中导航一样，并且很难了解在不同情况下使用哪种格式。 使用正确的图像格式不仅对于提高质量很重要，而且如果您在线使用图像，您还希望确保它们快速加载，同时保持高质量。 例如，在向网站添加图像时，优化图像以减小文件大小非常重要，以确保保留网站加载时间并改善用户体验。

以下是每种格式的详细说明，以及何时最好使用它们。

光栅图像文件

光栅图像由具有基于其分辨率的定义比例的像素组成，每个像素具有定义的颜色、位置和比例。 这意味着当图像变大时，像素会拉伸以适应空间，导致它们变得扭曲、模糊和不清晰。 这意味着您无法在不影响分辨率的情况下调整它们的大小，因为原始设计会被拉伸以填充额外的区域。

光栅图像格式包括 JPG/JPEG、PNG 和 GIF。

矢量图像文件

矢量图像由比例公式而不是像素组成，使用与总面积相比按比例缩放的直线和曲线系统。 这意味着此类图像可以调整大小而不会变形，因此可以保持其原始分辨率。

徽标和品牌图形通常创建为矢量，文件类型包括 SVG、EPS、AI 和 PDF。

高分辨率和低分辨率

更高分辨率的图像具有更高浓度的像素和点，意味着更好质量的图像。 相比之下，较低分辨率的图像具有较低的像素密度和较低的质量，这意味着它们不适合大尺寸图像。

分辨率以 DPI 表示。 打印图像应为 300DPI，而网站显示通常为 72DPI。

有损与无损

图像格式有时被称为有损或无损，这可能会影响图像大小的调整方式。 有损涉及从图像中删除数据，这意味着质量或像素化的降低。 无损压缩不会降低图像的质量，而是会删除不必要的元数据 - 尽管这有利于图像质量，但这意味着您不会看到文件大小大幅减小。

图像格式比较

JPG/JPEG

JPEG（联合图像专家组）是最流行的图像格式之一。 它允许您将大量细节压缩到可共享文件中 - 非常适合共享数字图像。 JPEG 与大多数图像处理器和浏览器兼容，使其成为流行的选择。

JPEG 使用有损压缩，使图像尽可能小，以便快速加载。 这确实意味着，如果您尝试使 JPEG 更大，则会拉伸像素，从而导致质量下降。 JPEG 图像不支持透明背景。

注意：JPG 和 JPEG 格式之间通常没有区别，因为它们可以互换并且表示相同的图像格式。 它们具有不同版本名称的原因是由于 Microsoft Windows 的早期版本。 与 JPEG 相比，术语 JPG 现在更常用。

主要特征

  • 有损
  • 高分辨率
  • 光栅
  • .jpg 或 .jpeg 扩展名

何时使用

  • 网站
  • 打印

巴布亚新几内亚

便携式网络图形是一种无损的光栅文件类型 - 这意味着您可以编辑它们，而不会因为分辨率低而损失质量。

其广泛的调色板（支持 1600 万种颜色！）、清晰的边缘和透明背景的能力使它们非常适合图像和文本。

然而，PNG 通常具有较大的文件大小，这意味着它们会减慢您的网站速度。 因此，我们不建议在您的网站上使用 PNG，除非用于透明背景目的。

主要特征

  • 光栅图像文件
  • 无损
  • 透明背景
  • .png 扩展名

何时使用

  • 简单的图形
  • 标志
  • 信息图表
  • 图表
  • 横幅

网络P

WebP 文件可以减轻在线图像的重量，减小文件大小以帮助您的网站加载速度更快。 WebP 文件由 Google 推出，允许您以较小的文件大小显示高质量图像。 他们还支持在线动画。 此格式还支持无损和有损压缩，这意味着您可以减小图像大小。 但是，需要注意的是，某些较旧的浏览器和图像编辑器（例如较旧的 Internet Explorer）不支持 WebP 文件。

我们建议您将网站上现有的 JPEG 和 PNG 文件替换为 WebP 文件，这将有助于减少加载时间，从而提供更好的用户体验，同时保持图像质量。 您可以在 Ecograder 上测量各个 URL 以查看差异。

主要特征

  • .webp 扩展名
  • 有损和无损

何时使用

  • 透明背景徽标
  • 网站图片
  • 博客

静止无功发生器

可缩放矢量图形是网络友好的文件，通常用于在浏览器中显示二维图形。 SVG 图像使用 XML 代码，这意味着它们将信息存储为文本而不是形状 - 允许搜索引擎将这些类型的图形作为关键字读取。 由于它们不依赖于像素，因此您可以在不损失质量或分辨率的情况下缩放图像。

SVG 格式最适合较小的文件，包括简单的形状和文本，例如徽标和图标。

主要特征

  • 向量
  • .svg 扩展名

何时使用

  • 标志
  • 图标
  • 简单的插图
  • 图表

PDF

PDF（便携式文档格式）允许您创建和共享文档，旨在帮助您针对所有软件和操作系统可靠地呈现和交换文档。

您可以在任何设备上查看和打印PDF文档，并且布局和格式将与原始文件保持一致。 您还可以使用 Adob​​e Acrobat 等工具来编辑、压缩和合并 PDF。 您还可以在 PDF 中包含可点击的链接，并且它们是可搜索的 - 非常适合深度文章。

但是，PDF 不能直接包含在网站内容中，因为它们必须单独打开并作为单独文件加载。 因此，它们仍然可以上传到您的网站后端，但会在新选项卡中打开。 如果您的徽标是 PDF 格式，则无需任何设计编辑软件即可查看它。

主要特征

  • 向量
  • .pdf 扩展名

何时使用

  • 文件
  • 报告
  • 杂志封面
  • 传单等传统营销
  • 较大印刷

动图

Gif 图像格式支持基本动画，这意味着它们近年来在社交媒体上变得流行。

图形交换格式文件最多可形成 256 种 RGB 颜色，支持每像素最多 8 位。 它们的文件较小，这意味着它们适合互联网。

使用 GIF 格式，您可以组合图片或帧来实现基本的动画。 然而，它们的颜色数量有限，这意味着它们不能包含高质量的图像。

主要特征

  • 光栅图像文件
  • 动画支持
  • 无损
  • .gif 扩展名

何时使用

  • 网页图形和徽标的动画
  • 模因

这就是我们的图像格式指南。 如果您需要调整图像大小的帮助，我们建议使用 Figma。

因为您现有的徽标阻碍了您的业务进展，所以需要更多格式的徽标？ Ballyhoo 可以提供帮助。 我们能够从头开始为您创建新的徽标和品牌标识，或者我们可以通过我们的品牌服务将您现有的徽标套件转变为更广泛的视觉标识。 请立即联系我们，了解我们如何提供帮助。