目录
- 使用 CSS Sprite 组合图像意味着什么？
- 什么时候应该在 WordPress 上使用 CSS Sprite组合图像？
- CSS Sprite 在高层次上是如何工作的
- 如何在 WordPress 上使用 CSS Sprite组合图像
- 您可以使用 WP Rocket 将图像组合成 CSS Sprite吗？
- 今天就开始使用 WordPress CSS Sprite
虽然这个名字听起来有点奇怪，但使用 CSS Sprite组合图像是一种流行的性能增强技术，它可以通过减少在网站上加载图像所需的 HTTP 请求数量来加速您的 WordPress 网站。
使用适用于 WordPress 的 CSS Sprite生成器，您可以以最少的工作量从这种性能优化技术中受益。您需要在基本级别上使用 CSS 和 HTML，但不需要了解底层代码，我们将向您展示将所有内容的确切放置位置。
在这篇文章中，我们将更多地解释什么是 CSS Sprite以及何时应该在 WordPress 网站上使用它们。然后，我们将通过详细的分步指南向您展示如何使用 WordPress 中的 CSS Sprite Sprite组合图像。
使用 CSS Sprite 组合图像意味着什么？
如果没有 CSS Sprite，WordPress 网站上的每张图片都是一个单独的文件。当有人访问您的网站时，该人的浏览器会发出 HTTP 请求来下载每个单独的图像文件，如果您在 Pingdom 等性能优化测试工具中查看瀑布分析图表，就会看到这一点。
如果您在一个页面上使用 5 张图片，则意味着 5 个单独的 HTTP 请求 – 每张图片 1 个。
这是一个问题，因为在所有条件相同的情况下，更少的 HTTP 请求意味着更快的加载站点。
要解决此问题，您可以使用 CSS Sprite将图像合并为尽可能少的图像。
从本质上讲，这意味着您将所有单独的图像合并到一个图像文件中。然后，使用 CSS 处理该单个图像，使其在每个位置仅显示所需的特定图像。因此，您仍然可以在页面上显示五个单独的图像 – 它们都来自同一个图像文件。
在前端，您的人类访问者不会注意到使用 CSS Sprite和单独的图像文件之间的任何区别。但在后端，访问者的浏览器只需要下载一个图像文件，这可以加快您网站的页面加载时间。
什么时候应该在 WordPress 上使用 CSS Sprite组合图像？
尽管 CSS Sprite可以加快您的页面加载时间，但您不想使用 CSS Sprite组合所有 WordPress 图像，因为存在一些缺点。
也就是说，将图像与 CSS Sprite组合在一起不会让您为每张图像添加单独的图像替代文本和标题，这不会：
- 可能会对您的 SEO 工作产生负面影响，特别是如果您想在 Google 图片搜索中对图片进行排名（这对于 CSS Sprite 是不可能的，因为它是一个单独的图片文件）。
- 损害您网站的可访问性，因为使用屏幕阅读器的人将无法理解每个图像应该代表什么，因为它们都来自同一个文件。
由于这些原因，您希望将 CSS Sprite 的使用限制为装饰性图像。
CSS Sprite有意义的一些示例是：
- 主页上的装饰性图标（如果您尚未使用图标字体)
- 您的客户或给您留下推荐的人的徽标/图片
- 社交媒体分享图标
通常，这些可能是您在全站或核心静态页面上显示的图像。
另一方面，你可能不想在博客文章中使用 CSS Sprite来组合图像。
例如，AWeber 主页上的这些图像可能是 CSS Sprite的良好候选者，因为：
- 它们对于 SEO 目的并不重要。
- 失去添加 alt 文本的能力不会对页面的可访问性产生负面影响。
CSS Sprite 在高层次上是如何工作的
以下是使用 CSS Sprite 组合图像的基本两步过程：
- 使用 CSS Sprite 生成器工具将多个图像合并为一个图像文件。
- 使用 Sprite 生成器工具提供的 CSS 和 HTML，可以仅显示包含要显示的图像的整个图像文件的特定部分。
因此，假设您想在主页上显示两个单独的图像：
- 美国国旗
- 法国国旗
首先，您将使用 CSS Sprite 生成器将每个标志的单独图像合并为一个图像。以下是组合图像的样子：
然后，您将添加该工具提供给您网站的 CSS，然后通过在内容中添加带有该 CSS 类的 <div> 或 <span> 来显示每个图像。
如果这还没有意义，请不要担心 – 我们将在下一节中逐步向您展示如何在您的 WordPress 网站上执行此操作！
如何在 WordPress 上使用 CSS Sprite组合图像
现在，让我们从上面获取这个高级过程，并将其专门应用于如何使用 WordPress 中的 CSS Sprite组合图像。
让我们继续以国旗为例，为越南添加第三个国旗（那是我住的地方！
下面是没有 CSS Sprite 的示例页面的外观。每个图像都是一个单独的图像文件，因此总共有 3 个图像和 3 个图像 HTTP 请求：
以下是该内容在 WordPress 编辑器中的样子——同样，你可以看到三个单独的图像块：
现在，让我们使用 CSS Sprite组合这些图像！
1. 使用 CSS Sprite 生成器组合图像
首先，请使用 CSS Sprite 生成器工具将单独的图像文件合并为一个文件。
在将图像上传到 CSS 生成器工具之前，请确保正确调整图像的大小/大小。稍后执行此操作会困难得多，因为您需要使用 CSS 来操作它们，如果您不了解 CSS，这将很困难。
有很多好的生成器，但我喜欢这个叫做 CSS Sprites Tool 的生成器。
您所做的就是将图像拖到界面上。然后，单击 Generate CSS Sprite 按钮。您可以将所有其他设置保留为默认值：
然后，您应该看到三个输出：
- 一些 CSS 代码
- 一些 HTML 代码
- 组合图像文件
下载组合的 CSS Sprite 图像文件，并将此页面放在手边，因为在接下来的步骤中您将需要代码。
2. 将组合图像上传到您的 WordPress 媒体库
将组合图像文件上传到您的 WordPress 媒体库。您还需要将其放在手边，因为在下一步中您将需要直接图像文件 URL：
3. 将 CSS 代码添加到您的 WordPress 网站
要将 CSS 代码添加到您的 WordPress 网站，请转到外观→自定义→其他 CSS。
然后，在步骤 #1 中粘贴 sprite 生成器中的 CSS 代码。执行此操作时，请将 background：url 字段替换为指向 WordPress 媒体库中组合图像文件的直接链接：
4. 使用 HTML 代码显示图像
要完成操作，您需要在您希望特定图像在内容中显示的位置为每个图像添加 HTML 代码。
如果您在 WordPress 块编辑器中工作，这意味着您将使用自定义 HTML 块，而不是使用图像块来显示每个图像。这是它的样子：
请记住，您可以在步骤 #1 中从 CSS sprite 生成器获取此 HTML 代码。
在前端，它看起来完全相同。只是现在，访客只需要加载一个图像文件，而不是三个单独的图像：
如果你查看底层 HTML，你可以看到每个图像都是使用 CSS 显示的：
这就是在 WordPress 上使用 CSS Sprite组合图像的方法！
您可以使用 WP Rocket 将图像组合成 CSS Sprite吗？
不，WP Rocket 不提供帮助您在 WordPress 上将图像组合成 CSS Sprite的功能。不幸的是，很难可靠地自动化此过程，这就是为什么您必须遵循我们上面详述的手动方法，而不仅仅是安装 WordPress 插件并收工。
话虽如此，WP Rocket 提供了许多其他方法来优化 WordPress 网站上的图像和其他媒体内容。
例如，WP Rocket 可以帮助您实现图像延迟加载，它可以让您通过等待加载非首屏内容直到用户开始向下滚动页面来加快加载时间。
今天就开始使用 WordPress CSS Sprite
CSS Sprite可以通过将多个图像文件合并为一个文件来帮助您加快 WordPress 网站的速度。
您不应该对所有图像使用 CSS Sprite，因为在 SEO 和可访问性方面存在缺点。
但对于装饰性图像，例如主页上的图像，CSS sprite 是一种智能的性能优化技术。
要在 WordPress 中使用 CSS Sprite组合图像，您可以：
- 使用 WordPress CSS Sprite生成器工具将多张图像合二为一。
- 将组合图像文件上传到您的网站。
- 使用 WordPress 定制器将 CSS 代码添加到您的 WordPress 网站。
- 在要显示每个图像的位置添加提供的 HTML。
发表回复