10

考虑我的网站的这个条件：

  • 我不支持 IE8 及以下，所以浏览器支持不是问题。

  • 我还使用 gzip 来避免 CSS 中的数据过载，以防在我的 CSS 文件中复制和粘贴数据 URI 图像。

  • 我只有一个由 LESS 生成的 CSS 文件。

  • 为方便起见，我对每个图像数据 URI 使用 LESS 变量。

  • 我将图像变量放在一个单独的 LESS 文件中，以保持我的代码库干净

有了这一切，我仍然不确定这是否是加载图像的最佳方法。使用这种方法加载小图像减少了 HTTP 请求的数量，而且我们不必维护精灵图像。

您能想到这种方法有什么缺点吗？

4

1 回答 1

2

如果任何图像发生更改，则必须更改整个 css 文件。这会破坏 HTTP 缓存。对于 sprite 图像，css 文件本身将从缓存中提供，并且只需要再次下载更改的图像。

最好只为 data:URI 图像生成一个 css 文件，为常规 CSS 内容生成另一个文件。这样，常规的 css 更新不需要重新下载 data:uri 图像。

第二个问题是前景图像，那些<img>在 html 中带有标签的图像。如果是经常使用的图片，则会不必要地增加 html 的大小。

于 2012-11-18T06:49:04.507 回答