杭州高端建站：DataURI与CSS Sprites哪一个更好_极简慕枫

随着网站复杂性的增加，网站的性能成为网站所有者的重要考虑因素。最重要的是，如果网站包含太多图片，您需要考虑网站的效果。

考虑到图像比网站上显示的文本有更多共享机会的事实，许多网站所有者在其网站中包含图像以提高流量。但是，图像密集的网站需要很长时间才能加载。这是因为，大部分时间都与下载页面的几个组件（包括图像）有关。因此，减少图像可以减少浏览器发出的HTTP请求以呈现网页。

幸运的是，您可以采用许多不同的策略来优化图像，从而提高网站的性能。因此，如果您正在寻找使用它的技术，您可以加快包含大量图像的网站，那么Data URI和CSS Sprites是两种不同的策略，可以帮助您实现目标。然而，网络上一直在争论数据URI如何使CSS Sprites过时。

杭州高端建站这篇文章将阐明为什么要开发CSS Sprites以及为什么要使用Data URI而不是CSS Sprites。

DataURI与CSS Sprites

为什么CSS精灵会存在

图片来源：无表格

在深入探讨数据URI如何取代CSS精灵之前，我们先讨论一下CSS精灵的目的以及它们解决的问题。正如我们上面讨论的那样，HTTP请求会导致性能瓶颈。简单来说，向服务器发送更多HTTP请求会使您的网页加载缓慢。这意味着无论何时将图像加载到页面上，它都会让您争取页面速度。但是，由于CSS sprites这个问题已经解决了，因为它们帮助将所有图像组合成一个文件。从而通过将其转换为单个请求来减少额外的HTTP请求。

我们来看一个CSS Sprite的例子：

这里的“mastersprite”是父类，其中保留了所有需要使用的图像。因此，当您想要使用主精灵图像时，您将应用此类。除此之外，还需要第二节课，您可以将精灵图像移动到其确切位置。

但是，使用CSS sprites有一个缺点。由于图像需要按某种顺序排列，通常包含额外的空格，因此必须承担规划和使用CSS精灵图像的开销。这意味着您需要不断记下每个图像放置在较大的精灵图像中的位置，以便使用CSS进行定位并在正确的位置显示图像。可以使用Data URI解决此问题。

使用数据URI而不是CSS Sprites

数据URI是一种有效的技术，可让您将图像直接插入HTML和CSS文件中。由于数据在本地可用，因此不需要额外的HTTP请求来获取信息。就像CSS Sprites一样，数据URI也有助于解决对图像的HTTP请求过多但以相对容易处理的方式处理的问题。

想知道怎么样？
数据URI不使用单个额外请求来获取大型精灵图像，而是使用零额外请求来获取所需图像。除此之外，它不需要将所有图像组合成单个文件。您可以选择单独放置图像，并将其用作背景图像。因此，除了排除整个数据URI以腾出空间之外，CSS中没有太多变化：

正如您在上面的代码中看到的那样，csssprite不再需要该类，因为您的图像数据存储在每个图标类中。

注意：您不必对HTML标记进行任何更改，但可以根据需要删除csssprite该类。

在查看我刚刚讨论过的方法时，很明显有些人可能会质疑：如果通过添加图像数据来增加CSS大小会影响性能吗？不，直到您的CSS作为gzip压缩文件保存在外部文件中。数据URI Base64编码有助于在“gzipped”时压缩文件。

另一个优点是甚至不对所有图像进行单个调用。此外，由于图像保存在外部CSS文件中，因此它们会被缓存。因此，当用户请求图像时，它正从缓存中拉出。

将基于图像的CSS转换为Data-URI CSS

仍然以过时和不满意的方式编写包含图像的CSS？一个理想的解决方案是使用数据URI嵌入CSS文件。这可以使用CSSEmbed实现。它是一个有效的工具，可用于将基于CSS的图像转换为基于数据URI的CSS，最终使您无需编写CSS代码，如下所示：

最后的想法

我希望这篇文章能帮助您理解为什么CSS sprites首先被开发出来，以及什么使Data URI成为优化图像比CSS sprites更好的选择。有一件事我想引起你的注意：由于在移动设备上浏览的速度越来越快，因此你需要更加注重提供增强的用户体验。因此，您需要确保在移动设备上访问时，您的图像密集型网站的性能与在PC上一样。

杭州高端建站