有没有比CSS精灵更好的解决方案？ [英] Is there a better solution than CSS sprites?

问题描述

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

this is not a question about a specific programming problem, it's about examining different concepts. If the moderators don't feel this is ok, delete my question.

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

I need to display 100 png images in a table td, and the images are 75x16 PNGs. In order to reduce the number of HTTP requests, I grouped all 166 images (only roughly 100 are shown at one time) in a big spritesheet, and have used the IMG tag to display the output, one image at a time. This is the code:

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。这就是结果，图像在表格中正确显示：

$classy is a variable which is calling the correct image based on the SQL query output. transparent.gif is a 1px transparent gif. And this is the result, images are shown correctly inside a table:

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

The page loading speed increased significantly, maybe 50-60%. In one of my earlier questions some concerns were raised over this being good practice or not. But it works.

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

The only other solution I've found is using jar compression, but that concept works for Firefox only. This is the code which is used for displaying these same images using jar compression (PHP, no 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是非实体档案，只提取被调用的图像，而不是全部。这个解决方案快速点亮，我从未见过更快的方式来显示那么多图像。这个概念是这里，值得一个链接。与CSS精灵相比的另一个优点是，使用jar可以针对大小单独优化每个图像（例如，一个优化为64种颜色，另一种优化为128,32 ......取决于图像），并且无法优化大型spritesheet，因为它包含很多颜色。

All of the 166 images are compressed in a jar archive and uploaded to the server, and as jar is a non-solid archive, only the called image is extracted, not all of them. This solution is lighting fast and I've never seen a faster way of displaying that many images. The concept is here and deserves a link. Another advantage over CSS sprites is that with jar each image can be individually optimized for size (e.g one is optimized to 64 colors, another one to 128, 32...depending on the image) and a large spritesheet can not be optimized as it contains a lot of colors.

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

So, does anyone know of a solution which would be equally fast as jar? If using CSS sprites to display content is bad practice - what is good practice which gives the same result? The key here is the loading speed of the website with as few HTTP requests as possible.

推荐答案

不是这方面的专家但是我也分享了这些东西

Not really an expert on this but I had my share in these thing also

HTTP请求

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

Ever heard of the "2 concurrent connections" (recent browsers have around 6-8). Loading a lot of stuff means if 2 are loading at the same time, the others have to wait in line. Loading it in one big chunk is better. This is the main reason why spriting is used. Aside from the connection limit, you manage those "same purpose" images in one image.

缓存

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

Now, one big chunk I say but you might ask "Does that make it even worse?". Nope, becasue I have an ace up my sleeve and that's where "cache" comes in to play. One page load is all you need, and then, poof! The rest of the pages that need that image are like the speed of light and Saves you from another HTTP request. Never underestimate the power of the cache.

图片

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

Other things you can do is to optimize your images. I have used Fireworks and I really love it's image optimization tools. To optimize, here are personal guidelines i follow which you can use in your situation:

• 图标的GIF，图像的JPG， PNG用于透明的东西。

• GIFs for icons, JPGs for images, PNGs for transparent stuff.

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

remove unused colors. yes, you can do this in some tools. cuts down size

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

never resize images in the html. have resized versions instead.

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

lose quality. yes, there is such thing. lower your image quality to reasonable limits. losing it too much makes your image too "cloudy" or "blocky"

渐进式加载图片。它的作用是快速加载模糊图像，然后稍后将其清除。

progressive loading images. What it does is it "fast-loads" a blurred image then clears it up later.

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

avoid animated images. they are a bloat, not to mention annoying.

服务器技巧

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

There are connection limits - but that does not prevent you from using other domains or even subdomains! Distribute your content to other domains or subdomains to increase the number your connections. For images, dedicate a subdomain or two for it, like say img1.mysite.com and img2.mysite.com or another domain mysite2.com. not only is it beneficial for your user, it's beneficial to distributing server load.

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

Another method is using a Content Delivery Network (CDN). CDN has a global network of servers, which contain "cached" versions of your website resources. Like say i'm in Asia, when i view your site with CDN'ed resources, it finds that resource in the server nearest Asia.

标记

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

Not necessarily related speed and semantics but the use of id should be reserved for more important purposes. If you use ID to mark images for their styles, what if there was another element that needs the same image? IDs need to be unique, they can't be used twice. So i suggest using multiple classes instead.

此外，ID优先于类。为避免意外覆盖，请使用类。了解有关 CSS特异性的更多信息。

also, IDs take precedence over classes. to avoid unexpected overrides, use classes. learn more about 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'/>";

这篇关于有没有比CSS精灵更好的解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！