如何减少图片数量以提高页面速度

加快网站速度的方法之一是最小化网页在完全显示给访问者之前需要加载的文件数量（HTTP请求）。当您的网页需要加载很多全站图片（在您网站的每个页面上使用的图片）来正确显示您的网页时，这可能会导致大量的额外服务器负载，并导致访问者的浏览器在所有文件完成加载之前阻止渲染您的网页。这就是为什么最小化您的网站使用的图片文件数量很重要。别担心，这可以轻松完成。让我首先引起您注意您应该专注于哪些图片。

专注于用于设计或功能的图片

对于大多数网站，可以取得最大进展的领域是如何使用用于设计或特定功能的图片。通常，人们使用从设计师那里购买的现成主题。值得注意的是，其中一些主题使用很多单独的图片用于设计目的。这大多是不必要的，因为我们可以使用CSS精灵和常规CSS代码来实现当今网页的几乎任何视觉方面。以下是处理这些类型的图片以提高页面速度的一些解决方案。

使用CSS图片精灵

使用CSS精灵允许您将几个图片合并为一个更大的图片，但仍然在您的页面上单独使用每个单独的图片。这可以大大降低您的网页必须调用的单独图片文件数量，从而通过最小化HTTP请求数量大大提高您的页面速度。例如，您可以将30个图片合并为1个图片。通过这样做，浏览器只需要下载1个更大的图片而不是30个。

通过在CSS代码中使用X和Y坐标来定义从精灵在您的网站上使用的每个单独图片的位置，您可以将图片放置在您希望它们的位置。使用CSS Sprites Generator用您自己的图片创建CSS精灵，它还提供了在页面上设置精灵的指南。

内联图片（使用Base64代码）

最小化您的网页使用的文件数量的另一个好方法是在HTML代码中内联图片，而不是使用图片文件。您可以通过使用此工具将图片文件转换为Base64代码并用Base64字符串替换图片来做到这一点。用此代码替换您的图片将给您与调用图片文件完全相同的视觉图片。然而，值得注意的是，Base64字符串的文件大小通常比原始图片稍大一些。但您仍然会从将图片转换为Base64代码中受益，因为HTTP请求更少。但不要过度使用。

将徽标转换为纯CSS代码

您实际上可以仅使用CSS代码创建徽标，而不使用图片文件。这需要很多工作，不过，除非您喜欢使用CSS，否则不建议使用此方法。在此处查看一些示例，如果您想要这些徽标的代码以了解如何创建您自己的纯CSS徽标。

忽略您的照片

虽然您绝对应该延迟加载和优化它们，但用于文章或其他类型的信息页面的照片在最小化HTTP请求方面通常应该保持原样。这些类型的照片文件通常只在一个页面上使用，如果您必须为每一个单独的照片创建精灵或Base64代码，那将是很多工作。