如何优化 HTML 表格中的多个重复图像答案

【问题标题】：How to optimize multiple repetitive images in HTML table如何优化 HTML 表格中的多个重复图像
【发布时间】：2009-12-14 03:20:36
【问题描述】：

我正在生成一个大型 HTML 表格，并且我为许多单元格使用图像。例如，一列可能有一个拇指向上的图像或一个拇指向下的图像。如果我有 300 行，其中 200 行竖起大拇指，他们都有

 <a href="link"><img src="http://myserver.com/thumbsup.png"></a>

所以看起来我要访问服务器 200 次以获得相同的图像，并且还要访问 100 次以获得不喜欢的图像。

有什么方法可以提高效率吗？浏览器会识别这一点并获取图像的缓存值吗？

返回包含大量重复图像的大型 HTML 表格时，最佳做法是什么？

【问题讨论】：

标签： html image

【解决方案1】：

每个浏览器都会缓存图片并且只下载一次。

【讨论】：

【解决方案2】：

我会创建一个带有背景属性的 css 类。由于 css 被缓存并且小于 300 src="http://myserver.com/thumbsup.png"，因此您的 html 在每个页面调用中都会更小。

查看this thread 以获取有关 css 背景图像的更多信息，以及优缺点。

【讨论】：

【解决方案3】：

正如乔丹所说，浏览器会在第一次下载后缓存图片。但是如果你有很多图片要加载，那么你应该考虑制作一个image sprite。

【讨论】：

【解决方案4】：

如上所述，使用css sprites。请记住在锚点中添加一个文本，因为禁用 css 的人（屏幕阅读器）和搜索引擎只会看到一个空白链接（然后 text-indent:-9999px; 此文本通过 css 显示，因此它不会显示在背景图像的前面）。它也将有助于您的 SEO。

例如：

<style type="text/css">
a.th-up{
    background-image:url(http://myserver.com/sprite.png);
    background-position:-10px -20px; /*or whatever the "thumbsup" image's coordinates are in your sprite*/
    text-indent:-9999px;
}
</style>
<a href="link" class="th-up">Thumbs Up!</a>

【讨论】：

【解决方案5】：

在这种情况下我会使用 css。

【讨论】：