适合您网站的正确图像格式是什么？

图像格式选择与优化：网站图像最佳实践

关键要点

• 正确选择图像格式并优化图像对于网站图像的正确使用至关重要。错误的使用会导致网站性能缓慢和用户体验差。
• JPEG、GIF、PNG、SVG 和 WebP 是常用的网站图像格式。JPEG、GIF 和 PNG 是长期使用的格式，而 SVG 和 WebP 则比较新，但由于其适合响应式和快速加载的网站，因此越来越受欢迎。
• 图像格式的选择取决于图像类型、文件大小和浏览器兼容性。例如，JPEG 由于其质量和压缩性而非常适合照片，而 PNG 由于其支持透明度而非常适合徽标和图标。
• WebP 是一种由 Google 开发的现代图像格式，它结合了 JPEG 和 PNG 的优点，而不会产生较大的文件大小，使其成为网络使用的理想选择。但是，并非所有浏览器都普遍支持它。

本文是与 SiteGround 合作创建的系列文章的一部分。感谢您支持使 SitePoint 成为可能的合作伙伴。

截至 2017 年 3 月，图像占据了超过 65% 的网络内容。

这并不奇怪：图像增加了美感，传达信息，讲述故事并与您的网站访问者建立联系。

另一方面，如果使用不当，图像往往是网站速度缓慢和用户体验差的主要原因。

在网络上正确使用图像主要涉及两件事：

• 选择正确的图像格式
• 优化图像

在本文中，我将讨论第一点。特别是，我将介绍在网络上效果最佳的图像格式以及它们最适合的图像类型。

但在进一步讨论之前，让我们简要澄清一些术语。

栅格/位图与矢量图像

栅格或位图图像由二维像素网格组成。每个像素存储颜色和透明度值。

栅格图像的缩放效果不是很好：如果放大栅格图像，它会失去清晰度和质量。网络上常用的栅格图像类型是 JPEG 或 JPG、GIF 和 PNG 格式。

以下是苹果的两个栅格图像 (JPG)。第一个是图像的自然大小。第二个显示了同一图像放大版本的细节。

栅格图像自然大小示例。

远大于自然大小的栅格图像细节。

请注意，放大后的图像版本相对于原始副本的质量下降。

相比之下，矢量图像是由线条、形状和路径点组成的。矢量的信息不是存储在像素中。相反，它们存储在与像素完全无关的数学绘图指令中。Alex Walker 在提到 SVG（网络上最流行的矢量格式）时，说得非常好：

SVG 不是图像格式——它更像是一种图像“配方”。

为什么 JPEG 像麦当劳苹果派（而 SVG 不是）

与分辨率无关的一个含义是，您可以随意缩放矢量图像：它们将始终看起来清晰明了，非常适合视网膜屏幕。

小比例的 SVG 图形。

放大的 SVG 图形细节。

上面的两张图像都是同一矢量图形的视图，但在第二个图像中，矢量的渲染大小是第一个图像的两倍多。然而，并没有质量损失。

有损与无损

“有损”和“无损”都指应用于数字媒体（即图像、音频和视频）的文件压缩技术。

有损压缩：

不会将数字数据解压缩回原始数据的 100%。有损方法可以提供高度的压缩率，并产生较小的压缩文件，但原始像素、声波或视频帧中的某些数量将永远丢失。

PCMag.com 百科全书

这在实践中意味着，您压缩有损文件越多，它就越小。但是，随着文件大小的减小，您也会不可逆地损失一些原始文件的质量。有损压缩涉及文件大小和质量之间的权衡。

您在网络上经常看到的一种有损图像类型是 JPEG。

相比之下，无损压缩不会在压缩的资源和原始资源之间造成任何数据丢失。这意味着压缩不会导致文件质量下降。但是，正因为如此，无损文件格式通常比有损文件格式的文件大小更大。

您可以在网络上轻松找到的无损图像格式是 GIF 和 PNG。

在决定内容的最佳图像格式时，这些初步信息非常有用。

我下面要介绍的前三种图像文件类型，即 JPG、GIF 和 PNG，已经在网站上使用了很长时间。最后两种，即 SVG 和 webP，虽然并非完全是新格式，但尚未成为主流。然而，由于它们非常适合对响应式和快速加载网站的需求，因此它们的普及程度一直在不断提高。

JPEG

JPEG 或 JPG 是一种由联合图像专家组开发的有损图像格式

网站上几乎 3% 的所有内容类型都是由 JPG 图像组成的。这就是这种图像格式如此受欢迎的原因：

• JPG 格式可以显示数百万种颜色。这使其成为在网络上显示摄影作品的理想选择
• 作为一种有损文件类型，您可以使用压缩来大幅降低其文件大小。JPG 文件提供各种压缩级别：大约 60% 对于网络图像来说足够了，而高于 75% 的任何压缩都会导致图像质量下降。
• 所有支持互联网的设备都支持 JPG 图像格式，这使得它易于在网站上使用。

JPG 文件中缺少的一件显而易见的事情是支持透明度。因此，如果您计划使用透明背景将图像与网页上的背景颜色或纹理混合，则 JPG 图像不是合适的选择。最好选择我下面列出的选项之一。

GIF

GIF 代表图形交换格式。它是一种 8 位无损格式，最多支持 256 种颜色。此限制使 GIF 文件不适合显示宽色域和摄影图像。

以下是一些在 GIF 文件在网站上长期使用中发挥巨大作用的要点：

• 鉴于 256 种颜色的限制，文件大小通常非常小
• 支持透明度
• 支持动画。这使其适合显示循环动画图像，例如图标、表情符号、横幅等。
• 适用于具有平面颜色的简单图像，但不适用于照片

PNG

PNG 代表可移植网络图形。它是 W3C 开发的 GIF 的替代格式。与 GIF 一样，它使用无损压缩算法，并且有 8 位或 24 位格式。这两种格式都支持透明度。但是，24 位 PNG 图像中的透明度是使用 alpha 通道以及红色、绿色和蓝色通道实现的。因此，虽然 GIF 和 8 位 PNG 图像要么完全不透明，要么完全透明，但 PNG 图像中的每个像素都提供多达 256 个不透明度级别。

您可以将 24 位 PNG 格式用于

• 具有各种透明度级别的网络图像
• 复杂的图片和图形
• 您需要经常编辑和导出的图形：它们的无损格式确保不会降低质量。

与 GIF 格式不同，PNG 图像类型不支持动画，并且它们的文件大小可能相当大。

SVG

SVG 代表可缩放矢量图形，它是一种基于 XML 的矢量文件类型。虽然它自 2001 年就存在，但它直到最近才在网络开发人员中变得非常流行。这种迟来的喜爱的原因在于 SVG 多年来一直享有较差的浏览器支持。幸运的是，我很高兴地说，在撰写本文时，SVG 在所有主要浏览器中都受支持，尽管存在一些不一致之处和错误。

SVG 格式具有许多功能，可以推荐它作为网络图形格式的绝佳选择，尤其是在用于徽标、地图、图标等简单图像时，它特别适合。

SVG 格式的优点

• SVG 的文件大小通常小于其栅格对应物，特别是如果您针对网络对其进行了优化并以 gzip 格式提供它们
• 它们是可缩放的，这意味着无论屏幕分辨率如何，它们看起来都很清晰
• 您可以在 HTML 标记内使用 SVG 代码并保存 HTTP 请求
• SVG 代码本身就可以使用 CSS 进行自定义
• 您可以使用 CSS 和 JavaScript 对 SVG 图像及其各个部分进行动画处理，这非常酷。

因为文件大小可能会变得相当大，所以尝试避免将过于复杂的 SVG 图像用于网络使用。最后，对于摄影图像，SVG 不适用，您最好坚持使用 JPG 格式或 webP。

WebP

尽管自 2010 年以来就已存在，但我不会说 webP 仍然感觉很新，而且不像 JPG 或 PNG 那样知名。但是，这种图像格式的 DNA 中包含了网络：它天生就是为了在网络上使用而设计的，这使其非常有趣

WebP 是一种由 Google 开发的开源图像格式。以下是其主要功能：

WebP 是一种现代图像格式，它为网络上的图像提供了卓越的有损和无损压缩。……WebP 无损图像的大小比 PNG 小 26%。WebP 有损图像比可比的 JPEG 图像小 25-34%……无损 WebP 支持透明度……只需额外增加 22% 的字节。对于可以接受有损 RGB 压缩的情况，有损 WebP 也支持透明度，通常比 PNG 提供 3 倍更小的文件大小。

WebP 网站

WebP 的优点在于它结合了 JPG 和 PNG 格式的优点，而不会产生庞大的文件大小。

目前，浏览器支持非常好：基于 Blink 的浏览器从一开始就都支持它，毕竟，webP 是 Google 的产品之一。对于不支持的浏览器（即 IE/Edge、Firefox 和 Safari）的向后兼容性，一些聪明的人已经设计了适当的解决方法。

以下是一些很棒的资源，您可以从中了解有关 webP 的更多信息以及如何立即实现它：

• WebP 常见问题解答
• 什么是 WebP 图像格式（以及为什么它很重要）？
• 如何选择完美的图像格式以优化您的网站
• 使用 WebP 图像的指南：案例研究
• 使用 WebP 图像

结论

在本文中，我概述了网络图像格式，并简要讨论了它们更适合的图像类型。

JPG、GIF 和 PNG 非常流行，并且已经使用了很长时间。SVG 和 webP 是更新颖、令人兴奋的替代方案。SVG 非常适合插图和简单图像，webP 非常适合 JPG 和 PNG 可用于的所有情况。

您在开发工作中是否使用过 SVG 或 webP？您面临哪些挑战？您是否体验过任何显着的性能提升？

点击评论框分享！

关于网站图像格式的常见问题解答 (FAQ)

选择网站图像格式时需要考虑哪些关键因素？

为您的网站选择图像格式取决于几个因素。首先，考虑您正在处理的图像类型。例如，照片最好以 JPEG 格式保存，以获得最佳质量和压缩效果，而徽标和图标则可以使用 PNG 格式，以支持透明度。其次，考虑文件大小。较小的文件大小加载速度更快，从而提高您网站的速度和性能。最后，考虑浏览器兼容性。虽然大多数现代浏览器都支持 JPEG、PNG 和 GIF 等格式，但 WebP 等较新的格式并非所有浏览器都支持。

图像格式如何影响我的网站 SEO？

图像格式会显着影响您的网站 SEO。搜索引擎（如 Google）优先考虑加载速度更快的网站，而较小的图像文件大小可以帮助实现此目标。此外，Google 更喜欢 JPEG 2000、JPEG XR 和 WebP 等某些图像格式，因为它们具有卓越的压缩和质量特性。使用这些格式可能会提高您网站的搜索引擎排名。

有损压缩和无损压缩有什么区别？

有损和无损是图像格式中使用的两种数据压缩类型。有损压缩通过消除“不必要”的数据位来减小文件大小，但这会导致图像质量下降。JPEG 是一种常见的有损格式。另一方面，无损压缩在不牺牲图像质量的情况下减小文件大小，但生成的

以上是适合您网站的正确图像格式是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！