有没有比CSS精灵更好的解决方案？

Question

这不是关于特定编程问题的问题，而是关于检查不同概念。如果版主认为没有问题，请删除我的问题。

我需要在表td中显示100 png图像，图像是75x16 PNG。为了减少HTTP请求的数量，我在一个大的spritesheet中对所有166个图像（一次只显示大约100个）进行了分组，并使用IMG标记一次显示一个图像输出。这是代码：

CSS：

.sprites {background-image:url('folder/spritesheet.png');background-color:transparent;background-repeat:no-repeat;display:inline;}
#png3  {height:16px;width:75px;background-position:0px 0;}
#png5  {height:16px;width:75px;background-position:-75px 0;}

PHP：

$classy = "png" . $db_field['imageid'];
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='alt' align='absmiddle'/>" , "</td>";

$ classy是一个基于SQL查询输出调用正确图像的变量。 transparent.gif是1px透明gif。这就是结果，图像在表格中正确显示：

页面加载速度显着增加，可能为50-60％。在我之前的一个问题中，人们对这是一种好的做法提出了一些担忧。但它确实有效。

我发现的唯一其他解决方案是使用jar压缩，但该概念仅适用于Firefox。这是用于使用jar压缩（PHP，无CSS）显示这些相同图像的代码：

$logo = "jar:http://www.website.com/logos.jar!/" . $db_field['imageid'] . ".png";
echo "<tr>" , "<td>" , "<img src='$logo' alt='alt' width='75' height='16'/>";

所有166个图像都在jar存档中压缩并上传到服务器，而jar是一个非实体存档，只提取被调用的图像，而不是全部。这个解决方案快速点亮，我从未见过更快的方式来显示那么多图像。这个概念是here，值得链接。与CSS精灵相比的另一个优点是，使用jar可以针对大小单独优化每个图像（例如，一个优化为64种颜色，另一种优化为128,32 ......取决于图像），并且无法优化大型spritesheet，因为它包含很多颜色。

那么，有没有人知道一个与jar一样快的解决方案？如果使用CSS精灵来显示内容是不好的做法 - 什么是良好的做法，给出相同的结果？这里的关键是网站的加载速度尽可能少的HTTP请求。

Answer 1

这不是真正的专家，但我也分享了这些东西

HTTP请求

听说过“2个并发连接”（recent browsers have around 6-8）。加载很多东西意味着如果2个同时加载，其他人必须排队等候。将它加载到一个大块中更好。这是使用spriting的主要原因。除连接限制外，您还可以在一个图像中管理这些“相同用途”的图像。

<强>缓存

现在，我说了一大块，但你可能会问“这会让情况变得更糟吗？”不，因为我有一个王牌，这就是“缓存”的用武之地。只需一页加载就可以了，然后，噗！需要该图像的其余页面就像光速一样，可以让您远离另一个HTTP请求。永远不要低估缓存的力量。

图片

您可以做的其他事情是优化图像。我使用过Fireworks，我真的很喜欢它的图像优化工具。为了优化，我遵循以下个人指南，您可以在您的情况下使用：

• 图标的GIF，图片的JPG，透明的PNG。

• 删除未使用的颜色。是的，你可以在一些工具中做到这一点。缩小规模

• 永远不会调整html中的图片大小。已经调整了版本。

• 质量下降。是的，有这样的事情。将图像质量降低到合理的限度。失去太多会使你的形象太“混乱”或“块状”

• 渐进式加载图片。它的作用是“快速加载”模糊图像，然后在以后清除它。

• 避免使用动画图片。他们是一个臃肿，更不用说烦人了。

服务器技巧

存在连接限制 - 但这并不妨碍您using other domains or even subdomains！将您的内容分发到其他域或子域以增加连接数。对于图片，请为其指定一个或两个子域，例如说img1.mysite.com和img2.mysite.com或其他域mysite2.com。它不仅对您的用户有益，而且有利于分配服务器负载。

另一种方法是使用内容分发网络（CDN）。 CDN拥有全球服务器网络，其中包含您网站资源的“缓存”版本。就像说我在亚洲，当我用CDN的资源查看你的网站时，它发现服务器中的资源最接近亚洲。

<强>标记式

不一定与速度和语义相关，但id的使用应保留用于更重要的目的。如果您使用ID为其样式标记图像，如果有另一个元素需要相同的图像怎么办？ ID必须是唯一的，不能使用两次。所以我建议改用多个类。

另外，ID优先于类。为避免意外覆盖，请使用类。详细了解CSS specificity。

.sprites {
    background-image:url('folder/spritesheet.png');
    background-color:transparent;
    background-repeat:no-repeat;
    display:inline;
    height:16px; /*same width and heights? place them here instead*/
    width:75px;
}
.png3  {
    height:16px; /* in cases you need a different dimension, this will override */
    width:75px;  
    background-position:0px 0;
}
.png5  {
    background-position:-75px 0;
}

$classy = "png" . $db_field['imageid'];
echo <img src='transparent.gif' class='sprites {$classy}' alt='alt' align='absmiddle'/>";

Answer 2

我在样式表中嵌入了小图片/图标：

.someicon{
    background-image:url('data:image/png;base64,iVBORw0KGg....');
}

这适用于所有现代浏览器，并且不需要我创建精灵（甚至还可以保存一个额外的文件来加载）。

在开发过程中，图像通常在样式表中定义：

.someicon{
    background-image:url('../images/someicon.png');
}

我有一个生成最终样式表的系统（包括将所有CSS合并为一个，用数据：url缩小和替换图像引用）每当我对样式表进行更改时都会自动生成。

这很好用，为我节省了大量的工作。使用gzip压缩时，CSS文件并不比添加在一起的单个文件大得多。优化PNG / JPG文件后，我的起始页面的CSS为63K未压缩。即使使用稍微小一点的精灵文件，我也可能不会为普通用户节省超过一秒的加载时间，所以我不打扰精灵。