0

我创建了一个 WordPress 主题，并实现了一个功能，允许将图像嵌入到 HTML 文档和 CSS 文件中。

我的意思是，而不是在我的网站中添加图像：

<!-- In HMTL -->
<img src="http://www.some-url.ext/img/my_image.jpg" />

/* In CSS */
selector
{
    background-image: url(http://www.some-url.ext/img/my_image.jpg);
}

以以下形式在我的网站中添加图像：

<!-- In HMTL -->
<img src="data:image/gif;base64,R0lG...." />

/* In CSS */
selector
{
    background-image: url(data:image/gif;base64,R0lG....);
}

处理后的图像存储在缓存文件中以获得更好的性能。

我当前的主题还有一个全宽滑块，其中包含很大的图像。

问题是由于嵌入的图像，处理后的文档大小为 1.83MB。

此外，文档加载速度非常快，幻灯片下方的任何内容显示速度都会变慢:(

那么，将图像嵌入到文档中更好还是使用 URL 的常规方式更好？

4

3 回答 3

3

像往常一样，答案是“视情况而定”。以下是一些兴趣点：

  • 嵌入图像可以通过减少 HTTP 请求的数量来加快页面速度，因此对于大量小文件，它会有所帮助。
  • 以 base 64 编码将使图像的大小增加约 1/3。
  • 因为浏览器必须解码图像，它会减慢渲染速度。

有关更详尽的优缺点列表，请参阅http://en.wikipedia.org/wiki/Data_URI_scheme 。

对于大图像，我会说你最好接受 HTTP 请求。您可以使用各种预加载方案来使 HTTP 命中对用户不那么可见。

PageSpeed、YSlow 等是指导方针，而不是福音。正如您所发现的，您应该始终测试更改并找出对您的站点有意义的内容。

于 2012-10-17T13:34:24.663 回答
1

通常，使用 Data URI 仅对小图像有意义（例如多个图标合并到一个精灵中）。大图像应作为单独的文件提供。

于 2012-10-17T13:28:35.870 回答
1

我想这里隐含的标准是效率。出于缓存的原因，图像通常应该单独提供，因为这样每个图像都可以被缓存。否则只能缓存包含图像数据的整个文档，除非它是一个非常稳定的文档并且图像仅在该文档中使用，否则它会变得相当低效。

查看http://www.mnot.net/cache_docs/了解有关缓存的一般信息。通常，任何合理的缓存友好服务器端（通常默认情况下）都会使图像可以很好地缓存，因为它们不会经常更改。

于 2012-10-17T13:38:19.007 回答