Suggestion: Using CSS Sprites for Icons

[Ran Yefet]

Hello,

I've uploaded a test forum to my server, and i noticed that on some of the icons not loading.
and I need to press CTRL + F5 to reload all the icons.

I wonder, why don't you use CSS Sprites to combine all the icons to one file, and then decide what part of the image to display using css.
It's way more efficient, than loading each icon separately and It'll be really useful for large boards.

More Info on CSS Sprites:
http://websitetips.com/articles/css/sprites/

[Rikki]

CSS sprites are great, the problem is they are not understandable by most people. If we delivered them as a sprite, anyone that wants to change an image to one bigger than the default is going to have a really tough time reconfiguring all the coordinates. For the default skin, we have to keep in mind the people who are not necessarily savvy designers :)

[PrefeX]

Could you at least consider adding this to the buttons that have a hoover effect so we can get rid of the annoying loading where the background desepear for a moment?

[Charles]

As Rikki pointed out sprites are nice and all but a novice user would never be able to comprehend them. I barely can but then I'm a novice users so there we are.

[Jaggi]

Could you at least consider adding this to the buttons that have a hoover effect so we can get rid of the annoying loading where the background desepear for a moment?

this is really annoying or use a js image preloader library.

[JamesDW]

Sorry to bump an old thread.... but I for one would definitely be happy to pay extra to get a version of the icon files as a CSS sprite.
It would reduce HTTP request when loading a page to almost 1/3 of what they are with separate files and page load speeds can be quite significant in search engine results as well as the end user's experience.

If someone can offer this solution at a reasonable cost and in a way that's reasonably simple to implement, I'd be interested to hear from them :)

[Hultenius.]

This would be a very cool feature for IPB 3.2.

I actually tried to code a solution for automated CSS sprites some days ago that would work something like this:

1. Generate an combined image
Loop thru all common style images and build a big/combined image using GD2. Individual image locations in the combined image are saved to a database table.

2. Overwrite HTML <img> tags on the fly
Add an output filter to publicOutput.php where all <img="image" other stuff /> are replaced with:

<img="1pixel-dummy-image" style="background:url('combined-image.png') -{IMAGE-OFFSET-X}px -{IMAGE-OFFSET-Y}px; width: {IMAGE-WIDTH}px; height: {IMAGE-HEIGHT}px;'" other stuff />

Unfortunately my time is limited so this little project will probably die. Let's hope someone else could code this instead. I'm also willing to pay for a solution.

[Hultenius.]

I continued the project since nobody seemed interested, and the first test results are in. I used webpagetest.org to perform the tests (Verizon FiOS 20 Mbit/s, IE7, ping time around 100 ms). Yes, 20 Mbit/s is a bit high, but better than 1.5 Mbit/s.

Using normal images:


Using CSS sprite images: (and combining some css/js requests)


Much better! I will enable this mod on my board next week to capture some statistics.

Oh, and here are the CSS sprite images. Completely generated of course.

[Michael]

There's little doubt that doing this would make the pages load slightly faster, the problem with this is then it can become a nightmare for people to customize anything. I don't see that that loss of usability is worth a few milliseconds of page load savings, myself.

[agent462]

It would be a bit more substantial than a few milliseconds. Since most browsers only download two things at a time, for every 20 images at 100ms a pop you'll gain roughly 1 second back in network time. Now, since not every has really fast connections and most people don't have a CDN, network times for an image will probably range 100-300ms depending on where in the country you are. From the east coast US to the West coast US you'll see anywhere from 100-200ms latency.

Sprites would definitely be a great optional feature. It would for sure make the load time a bit snappier.

[blair]

Google has also said they use site speed as a factor in determining Search Engine Result Placement (SERP). "Novices may get confused", really doesn't cut it any more. IPS needs to get serious about improving site speed, reducing page size.

[Michael]

Google has also said they use site speed as a factor in determining Search Engine Result Placement (SERP). "Novices may get confused", really doesn't cut it any more. IPS needs to get serious about improving site speed, reducing page size.

This has been discussed to death. It doesn't mean that if one site loads 10% faster than another that the faster site will get a better page rank. This speed factor was added to prevent sites that take an extremely long time to load from getting too high of a ranking. Content is still more important than speed.

I really hope this never gets implemented, this would kill nearly anyone's ability to customize their board's images, all for a bit of saving on loading time, and then only one the initial page load.

[Hultenius.]

There's little doubt that doing this would make the pages load slightly faster, the problem with this is then it can become a nightmare for people to customize anything. I don't see that that loss of usability is worth a few milliseconds of page load savings, myself.

It depends on how you implement CSS sprites. You are in for trouble if you have to edit the skin files, that would be a nightmare. But there is a better solution!

Look at my implementation above. It is more of an output filter. All you have to do is to list all images you want in the CSS sprite, and push a button! If you change an image, just push the button again and everything will be fine. Super-easy! You will never touch the skin files. As a bonus, this method also add width and height parameters to the <img>-tags, completing the DOM-tree and slightly improves the rendering time.

[JamesDW]

I continued the project since nobody seemed interested, and the first test results are in.

Brilliant work :thumbsup:
I'm really impressed :)
I can't see why more people aren't quite excited about this :blink:
We've got a busy forum, as well as a wordpress blog and a magento shop and all are visually very nice, but all rely heavily on loads of tiny skin files. We've tested performance differences in page load times between image-rich skins and basic or blank ones and can measure significant page load time differences that can only be attributed to multiple http requests. We're talking in some cases about 3 times faster page load times (1.8secs instead of 5.5 secs) and less server load too.
Hultenius, are you planning on making this into a plugin that would be widely available?

[Hultenius.]

I'm planning to release this as an IPB application. It will come with a fair price tag, somewhere around

[Shadow82x]

I would be interested in a mod for CSS Sprites. Please do keep us updated.

[ørret]

We need this! People download free/bought skins and run these anyway. If it enhance performance, then I don't see why we should think of the people that might want to change some of the images. Most people stick to a skin anyway, and those who want to customize can easily look up a guide on the internet to check out how CSS sprites are done. The professional skinners would of course know how to do this, and would have no problem whatsoever doing it.

Performance over anything!

[bfarber]

I disagree, it's not about performance over everything. If it were, you'd have a textarea box you could submit a post in and that's it. No bbcode parsing, forum categorization, etc.

You have to balance performance and usability. CSS sprites are a good idea, and it comes up often here, but the reality of the matter is that the vast majority of those who create, edit and/or release skins for IP.Board (save the top skin shops most likely) would not be able to work with sprites. We cannot take our product in a direction that cuts off access to a large audience like that (unless you're a CSS guru and know how these work, you can't change any images on your board).

[JamesDW]

CSS sprites are a good idea, and it comes up often here, but the reality of the matter is that the vast majority of those who create, edit and/or release skins for IP.Board (save the top skin shops most likely) would not be able to work with sprites.

Exactly. But this is why the solution Hultenius is proposing of having a plugin that acts as an output filter is such a good one.
It would mean that people could use styles as per usual, then select the image files and run a quick conversion job in the back end to convert to a png sprite file with it's associated css references.
So the benefits would be available to everyone with no specialist knowledge required.

[bfarber]

Yes, he has an interesting idea, I'll admit that. I'm curious how well it turns out. Once you start factoring in custom skins and such, things like this can get tricky.

[Hultenius.]

Yes, he has an interesting idea, I'll admit that. I'm curious how well it turns out. Once you start factoring in custom skins and such, things like this can get tricky.

For "normal" images with the good ol' <img>-tag, things are really easy. I'm working on a "suggester" right now that downloads pages as a guest/googlebot and gives suggestions.
Should be easy enough for everyone and works with all skins.



You won't get all images, but getting 50% of the images is still better than nothing. And you can always add more manually.

CSS-images on the other hand are hard/time consuming to eliminate. I've added advanced settings so you can indeed eliminate almost all CSS-images, but it requires knowledge and time. You need to right align, left align, add margins, and sometimes repeat images. You also need to add image specific CSS-code. But the benefits can be worth it.

[Jaggi]

damn you don't waste any time do you? looking good.

[ørret]

Long time no news, what happened?

[Amged Osman]

.. ummm we have skin for XML .. skin for mobile .. and default skin... it wouldnt be bad if we get a skin with "CSS S" by default as well.. if they dont know how to design it then use the default one!


I'm loving this very good job!

[Enkidu]

+1 from me :thumbsup: