Ran Yefet Posted June 27, 2009 Posted June 27, 2009 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 Posted June 27, 2009 Posted June 27, 2009 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 Posted July 1, 2009 Posted July 1, 2009 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?
Management Charles Posted July 1, 2009 Management Posted July 1, 2009 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 Posted July 2, 2009 Posted July 2, 2009 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 Posted September 15, 2010 Posted September 15, 2010 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. Posted September 15, 2010 Posted September 15, 2010 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. Posted September 25, 2010 Posted September 25, 2010 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 Posted September 25, 2010 Posted September 25, 2010 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 Posted September 25, 2010 Posted September 25, 2010 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 Posted September 25, 2010 Posted September 25, 2010 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 Posted September 26, 2010 Posted September 26, 2010 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. Posted September 26, 2010 Posted September 26, 2010 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 Posted September 27, 2010 Posted September 27, 2010 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. Posted September 28, 2010 Posted September 28, 2010 I'm planning to release this as an IPB application. It will come with a fair price tag, somewhere around
Shadow82x Posted September 28, 2010 Posted September 28, 2010 I would be interested in a mod for CSS Sprites. Please do keep us updated.
ørret Posted September 30, 2010 Posted September 30, 2010 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 Posted September 30, 2010 Posted September 30, 2010 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 Posted September 30, 2010 Posted September 30, 2010 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 Posted October 1, 2010 Posted October 1, 2010 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. Posted October 3, 2010 Posted October 3, 2010 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 Posted October 5, 2010 Posted October 5, 2010 damn you don't waste any time do you? looking good.
Amged Osman Posted October 19, 2010 Posted October 19, 2010 .. 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!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.