网站图像优化：快速加载的漂亮页面

asing
378 阅读11分钟

网站图像优化：快速加载的漂亮页面

什么是图像优化？

网站图像的优化是通过压缩、审慎选择图像格式以及仅在需要时交付图像来有效存储和交付图像的过程。许多插件和工具可用于自动化，消除手动任务的苦差事。
以下是优化在线图像的最常见好

  • 更快的页面加载
  • 更高的搜索引擎排名
  • 增强的用户体验可带来更高的转化率
  • 减少提供图像所需的存储和带宽
  • 更快的网站备份

网络图像优化的常见用途

在深入研究具体技术之前，有必要了解图像优化的一些常见用途：

  • 图像大小和文件大小：较小的图像（尤其是不超过 2 兆字节的图像）通常比较超过 20 兆字节的较大图像更适合 Web 使用。这种平衡可确保图像具有足够的质量，而不会过大，否则会减慢页面加载速度。
  • 图像格式注意事项：虽然 PNG 以其高质量输出而闻名，但它的文件大小往往比 JPG、GIF、SVG 和 WebP 等其他格式更大。根据图像质量和文件大小之间所需的平衡选择正确的格式至关重要。
  • JPG 的压缩：对于 JPG 图像，在压缩中实现适当的平衡至关重要。 70-90% 之间的压缩质量通常是最佳的，可以减小文件大小，同时保持合理的图像质量。
  • 有效的图像命名和替代文本的使用：对图像使用描述性的、简单的语言名称和替代文本不仅可以提高可访问性，还可以增强搜索引擎优化 (SEO)。
  • 最佳图像尺寸和角度：为图像选择正确的尺寸和角度可以显着影响它们在网站上的感知和使用方式。
  • 利用图像站点地图：图像站点地图可以有效确保您的所有图像都能被搜索引擎识别并索引，从而进一步优化您的网站。
  • “模糊”技术：这涉及最初加载较低质量的图像，可以逐步增强该图像，从而缩短页面加载时间。
  • 用视频替换动画 GIF：考虑用视频格式替换动画 GIF 可以提供优化优势，特别是在减小文件大小方面。
  • 选择独特而不是库存图片：在可能的情况下，使用独特的图像而不是库存照片可以提供更加个性化和引人入胜的用户体验。

如何优化网络图像？

您可以通过多种方式优化网站图像，包括组合多种方法以实现更大优化的选项。

要确定选择哪种方式及其对网站的影响，请分析网站的当前性能。 Google PageSpeed Insights 是一款免费工具，可识别要优化的图像并提供优化过程的建议。

执行以下四项任务中的一项或多项来优化网站的图像。

请参阅我们的占位符生成器详细指南了解更多信息。

任务 1：压缩图像

压缩图像通过消除或重新格式化不必要的数据来减小其文件大小。您可以通过以下两种方式之一来完成此操作：

  • 有损压缩：删除人类通常无法感知的不必要的元数据或视觉数据。然而，这种方法会降低图像质量以进一步减小文件大小。此外，删除的数据将永久丢失。
  • 无损压缩：通过用变量或其他指标替换其模式来消除重复数据，这会导致文件比有损压缩生成的文件更大。在这种情况下，压缩数据是可恢复的。

Cloudinary 如何提供帮助

Cloudinary 的 q_auto 功能会自动压缩和调整图像以获得尽可能小的图像尺寸，而不会牺牲图像质量。

q_auto 的工作原理如下：

您将 q_auto 参数添加到图像 URL。

  1. Cloudinary 的智能质量和编码算法可评估图像内容、格式和查看浏览器。
  2. 该算法识别最佳质量压缩级别和编码设置，相应地压缩和编码图像。
  3. 此过程可确保为网站、浏览器、查看器和设备提供优质视觉效果的压缩版本。下面是一个例子。
https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

woman.jpg

在这篇文章中了解有关 q_auto 的更多信息：自动压缩图像而不损失质量。

任务 2：采用下一代图像文件格式复制此标题的链接

下一代图像格式（例如下面描述的四种）比旧格式（例如 JPEG）提供更多压缩，从而进一步减小图像大小，而不会损失质量。

  • WebP，一种支持有损和无损压缩的开源格式。 WebP 由 Google 开发，适用于 Google、Samsung、Opera 和 Firefox 65 及更高版本的浏览器。 WebP 文件通常比同类格式的文件小25%左右。这种格式可以成为 GIF、JPEG 和 PNG 的理想替代品。
  • JPEG-XR 是一种由 Microsoft 开发的专有格式，适用于 Internet Explorer 和 Edge 浏览器。 JPEG-XR 扩展了当前的 JPEG 有损压缩技术，支持无损压缩和透明度。
  • SVG 是一种由 W3C 开发的开源格式，也是一种矢量格式，可让您创建可在所有现代浏览器中平滑缩放的图像。基于 XML，SVG 图像可以使用 CSS 或 JavaScript 或在图像编辑器中轻松编辑。最适用于徽标、图像、动画和图表。
  • JPEG2000 (JP2)，一种用于无损压缩的开源格式。这是一个高度可扩展的 ISO 标准，使图像的各个部分能够以不同的质量存储。但是，此格式仅适用于没有插件的 Safari。

如需了解下一代格式的前景，请查看 Cloudinary 的 2020 年视觉媒体状况报告

Cloudinary 如何提供帮助

Cloudinary 的 f_auto 功能完全自动地向查看者的浏览器提供最合适的图像格式。

首先，Cloudinary 通过动态 HTTP 或 HTTPS URL 转换媒体资产，为每个媒体资产分配唯一的 URL 和公共 ID。提供资产时，Cloudinary 通过快速内容交付网络 (CDN) 交付 URL。

请参阅我们的 https cdn 详细指南了解更多信息。

请参阅 Cloudinary 上资产交付 URL 的示例：

要优化 Cloudinary 上的媒体，您只需向 URL 添加一个参数（在本例中为 f_auto ），如下例所示：

f_auto 告诉 Cloudinary 的智能算法在为每个请求浏览器选择正确的格式后自动获取格式。下面是一个例子。

https://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg

sample.avif

在这篇文章中了解有关 f_auto 的更多信息：在不损失质量的情况下自动减小图像尺寸。

任务 3：调整图像大小

假设您不想压缩或重新格式化图像。或者，压缩和重新格式化不能满足您的优化要求。在这些情况下，您可以调整图像大小以对其进行优化。

通常，在显示图像时，您可以通过样式组件来调整图像大小。这涉及上传不必要的数据，因为图像的完整尺寸永远不可见。要将图像调整为尽可能大的显示尺寸，请消除所有未使用的数据。

Cloudinary 如何提供帮助

通过利用人工智能，Cloudinary 可以动态调整图像大小并裁剪最有趣的部分。 Cloudinary 中的动态裁剪是通过智能响应断点来完成的。您有两个选择：

  • 自动断点：Cloudinary 的智能算法可以通过考虑生成的图像版本的数量以及每个版本发生的文件大小减少来计算最佳断点的设置。该差异决定了每个宽度的实际图像文件大小。有关详细信息，请参阅我们有关响应式图像的文档。
  • Cloudinary API：您可以通过 Cloudinary API 以编程方式请求上传图像的断点，方法是指定宽度范围等设置并请求转换。此外，您可以请求多种图像转换，包括裁剪、图像效果、滤​​镜和优化。有关详细信息，请参阅这篇文章：智能响应断点解决方案简介。
cloudinary.v2.uploader.upload("dog.jpg", 
        { responsive_breakpoints: [{
          create_derived: false, bytes_step: 20000,
          min_width: 200, max_width: 1000,
          max_images: 20}], public_id: "dog"}, 
        function(error, result) {console.log(result); });

任务 4：延迟加载图像

无论您采用什么其他图像优化技术，始终执行延迟加载，即仅在查看者想要查看图像时才加载图像。通常，为了检测观看者的这种愿望，您可以在观看者滚动浏览您的网站时加载图像。

延迟加载减少了站点访问时必须加载的数据量。如果包含图像的部分从未被访问，则其数据也永远不会发送，从而为您和您的查看者节省带宽。

Cloudinary 如何提供帮助

借助 Cloudinary 的新 lazy 功能，您可以延迟加载图像，即仅在必要时才显示它们，只需按几次键即可。只需将属性 loading=“lazy” 添加到图像的 cl-image 标记即可。

有关详细信息，请参阅这篇文章：Cloudinary Angular SDK 的高级图像组件。

图像优化的最佳实践是什么？

我们强烈建议您还执行以下操作来优化网站的图像。

  1. 在适当的情况下用原生元素替换图像。复制此标题的链接 在优化图像之前，评估哪些图像是必要的。例如，许多背景图像是简单的渐变或图案，您可以使用 CSS 渲染它们而不是显示它们。由于 CSS 是原生渲染的，因此它不需要像图像那样额外的存储或带宽来传输内容。

此外，图像的一个很好的替代方案是网络字体，您可以使用它在图像上放置文本。您可以使用专门的文本字体，而无需将其显示为图像。利用网络字体的另一个好处是，查看者可以根据需要搜索、选择文本和调整文本大小。多么双赢啊！

  1. 在矢量和光栅之间进行选择。复制此标题的链接 如果您确实需要为您的网站显示图像，您可以在矢量图像和光栅图像之间进行选择。

  • 矢量图像是可缩放的，由点、线和多边形组成。无论显示器尺寸如何，这些图像都能提供相同程度的清晰度和质量。一般来说，矢量图像非常适合简单的视觉效果，例如文本、徽标和图标。

  • 要优化矢量图形，您可以缩小它们以删除不必要的元数据，这一过程有望将其大小减少一半或更多。

  • 由像素定义的光栅图像在可扩展性方面受到限制。这些图像通常用于照片或更复杂的图形。

  • 要优化光栅图像，请执行以下操作之一：

  • 减少位深度。减少图像可用的颜色或色调调色板。对于没有精细渐变的简单图像采用此技术。 练习增量编码。通过存储像素之间值的差异来消除冗余像素信息。这样，您可以通过引用源像素来存储许多相似像素的数据，同时节省带宽。

  1. 正确调整图像大小。复制此标题的链接 除了节省空间和带宽之外，正确调整图像大小还可以带来更好的用户体验。除了执行前面描述的调整大小步骤之外，您还可以向查看者提供多种图像尺寸。尽管这种做法需要 Web 服务器上更多的存储空间，但它限制了提供内容的带宽。

正确调整图像大小的一种简单方法是使用 HTML <picture> 元素，该元素定义多个图像源，然后您可以根据浏览器规范提供图像。此外，通过此步骤，您可以提供不同格式的图像或完全不同的图像。

如何使用 Cloudinary 优化网站图像？

Cloudinary 提供广泛的图像优化和管理功能，例如自动化压缩和高水平的质量。使用 Cloudinary，您不仅可以调整图像大小而不必担心图像质量下降，还可以延迟加载它们以加速页面加载。

所有这些优化功能和许多其他出色的功能都是 Cloudinary 数字资产管理 (DAM) 解决方案的一部分。立即注册 Cloudinary！我们提供慷慨的免费计划来帮助您入门。

相关内容：阅读我们的图像管理指南。

avatar
文章
阅读
粉丝