这不是关于特定编程问题的问题,而是关于检查不同概念的问题。如果版主觉得这不行,请删除我的问题。
我需要在表td中显示100张png图像,图像为75x16 PNG。为了减少 HTTP 请求的数量,我将所有 166 个图像(一次仅显示大约 100 个)分组在一个大 spritesheet 中,并使用 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 查询输出调用正确的图像。透明.gif 是 1 像素的透明 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 是非固体存档,因此仅提取的是调用的图像,而不是全部。该解决方案速度非常快,我从未见过比这更快的方式来显示这么多图像。这个概念在这里,值得一个链接。相对于 CSS sprites 的另一个优点是,使用 jar,每个图像都可以单独优化尺寸(例如,一个优化为 64 色,另一个优化为 128、32...取决于图像),而大型 spritesheet 则无法优化,因为它包含很多颜色。
那么,有谁知道有一个与 jar 一样快的解决方案吗?如果使用 CSS 精灵来显示内容是不好的做法 - 什么是给出相同结果的好做法?这里的关键是在尽可能少的HTTP请求下网站的加载速度。
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.
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 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:

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.
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'/>";
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.
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.
发布评论
评论(2)
并不是这方面的真正专家,但我也参与过这些事情
HTTP 请求
听说过“2 个并发连接”(最近的浏览器大约有 6-8)。装载很多东西意味着如果两个同时装载,其他人就必须排队等候。将其装入一大块会更好。这是使用精灵的主要原因。除了连接限制之外,您还可以在一张图像中管理那些“相同用途”的图像。
缓存
现在,我说的是一大块,但你可能会问“这会让事情变得更糟吗?”。不,因为我有一张王牌,这就是“缓存”发挥作用的地方。只需加载一页即可,然后,噗!其余需要该图像的页面就像光速一样,使您免于另一个 HTTP 请求。永远不要低估缓存的力量。
图像
您可以做的其他事情是优化图像。我使用过 Fireworks,并且非常喜欢它的图像优化工具。为了进行优化,我遵循以下个人指南,您可以在您的情况下使用它们:
用于图标的 GIF、用于图像的 JPG、用于透明内容的 PNG。
删除未使用的颜色。是的,您可以在某些工具中执行此操作。缩小尺寸
切勿调整 html 中图像的大小。已调整版本大小。
质量下降。是的,有这样的事情。将图像质量降低到合理的限度。失去太多会使您的图像过于“浑浊”或“块状”
渐进式加载图像。它的作用是“快速加载”模糊图像,然后将其清除。
避免使用动画图像。它们很臃肿,更不用说烦人了。
服务器技巧
有连接限制 - 但这并不妨碍您使用其他域甚至子域!将您的内容分发到其他域或子域以增加您的连接数量。对于图像,为其指定一个或两个子域,例如
img1.mysite.com
和img2.mysite.com
或另一个域mysite2.com
>。它不仅对您的用户有利,而且有利于分配服务器负载。另一种方法是使用内容交付网络 (CDN)。 CDN 拥有全球服务器网络,其中包含网站资源的“缓存”版本。就像我在亚洲一样,当我使用 CDN 资源查看您的网站时,它会在距离亚洲最近的服务器中找到该资源。
标记
不一定与速度和语义相关,但
id
的使用应保留用于更重要的目的。如果您使用 ID 来标记图像的样式,那么如果有另一个元素需要相同的图像怎么办? ID 必须是唯一的,不能重复使用。所以我建议改用多个类。此外,ID 优先于类。为避免意外覆盖,请使用类。详细了解 CSS 特异性。
Not really an expert on this but I had my share in these thing also
HTTP Requests
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.
Cache
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.
Images
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:
GIFs for icons, JPGs for images, PNGs for transparent stuff.
remove unused colors. yes, you can do this in some tools. cuts down size
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.
Server Tricks
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
andimg2.mysite.com
or another domainmysite2.com
. not only is it beneficial for your user, it's beneficial to distributing server load.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.
Mark-up
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.also, IDs take precedence over classes. to avoid unexpected overrides, use classes. learn more about CSS specificity.
我在样式表中嵌入了小图像/图标:
这适用于所有现代浏览器,并且不需要我创建精灵(而且它甚至还保存了一个额外的文件来加载)。
在开发中,图像通常在样式表中定义如下:
并且我有一个系统,每当我创建时,它都会自动生成最终样式表(包括将所有 CSS 合并为一个,缩小并用 data: url 替换图像引用)对样式表的更改。
这很有效,节省了我大量的工作。当使用 gzip 压缩时,CSS 文件并不比单个文件加在一起大多少。优化 PNG/JPG 文件后,我的起始页的 CSS 未压缩为 63K。即使使用稍微小的精灵文件,我也可能不会为普通用户节省超过一秒的加载时间,所以我不关心精灵。
I embed small images/icons in the style sheet:
this works with all modern browsers, and does not require me to create sprites (plus it even saves one additional file to load).
In development, the images are defined in the style sheet normally like so:
and I have a system that generates the final style sheet (including consolidating all CSS into one, minifying and replacing the image reference with the data: url) automatically whenever I make a change to a style sheet.
This works well and saves me a ton of work. When compressed with gzip, the CSS file is not much bigger than the individual files added together. After optimizing the PNG/JPG files, the CSS for my start page is 63K uncompressed. Even with a slightly smaller sprite file, I would probably not save more than a fraction of a second in load time for the average user, so I do not bother with sprites.