Jump to content

Suggestion: Using CSS Sprites for Icons


Ran Yefet

Recommended Posts

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/

Link to comment
Share on other sites

  • Replies 83
  • Created
  • Last Reply

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 :)

Link to comment
Share on other sites


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.
Link to comment
Share on other sites

  • 1 year later...

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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:
post-111531-021928100 1285428397_thumb.p

Using CSS sprite images: (and combining some css/js requests)
post-111531-032905800 1285428407_thumb.p

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.
post-111531-075136600 1285422234_thumb.p
post-111531-065168800 1285422263_thumb.p

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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.
Link to comment
Share on other sites


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.
Link to comment
Share on other sites


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?
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.
Link to comment
Share on other sites


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.

post-111531-084167900 1286141376_thumb.p

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.
Link to comment
Share on other sites

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...