Question

我创建了一个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的常规方法更好？

Answer 1

像往常一样，答案是“它取决于”。以下是一些有趣的观点：

嵌入图片可以通过减少HTTP请求的数量来加速页面，因此对于许多小文件，它可以提供帮助。
在基础64中编码将使图像的大小增加大约1/3。
由于浏览器必须解码图像，因此可能会降低渲染速度。

请参阅http://en.wikipedia.org/wiki/Data_URI_scheme以获取更详尽的优缺点列表。

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

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

Answer 2

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

Answer 3

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

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

HTML和CSS中图像的最佳实践是什么

3 个答案: