MyBB Community Forums

There are allot of images on forums, MyBB is no exception

I'm about to undergo some work to sprite the common images on a MyBB forum

Often, images will be downloaded in parallel, allowing multiple images to be downloaded at once. However, there is a limit to the number of packages that can be downloaded in parallel, and if you watch these packages you'll notice much of the time is used starting the request and connecting to the data, very little of the time is used transferring the data

When we're in a situation where we use images on our own servers, I like the use of sprites on sites. It reduces the number of http request, and can often reduce the overall size of images with the knock on affect of really increasing the site performance.

A big disadvantage of this is that users find it harder to manipulate and personalise sprite designs. This isn't what you want for a modifiable Forum

What I suggest is to sprite the common images and also have a tool within the Admin CP. This tool can then allow user to add their own images, and sprite them in a way that suits them (some open source libraries for spritting might be available, but if not, a simple link from the Admin CP to free spriting application/site might do the trick)

[Due to the design difficulties and possible negative side, I know this will be a rejected enhancement, but I thought I would throw it out there since I believe MyBB could achieve where other forums haven't yet ventured]

I don't think this is a bad idea, since the editor already uses this. Many of the icons for sure could be combined into one image. Not sure about the rest of the stuff, though.

(2010-12-07, 03:51 AM)Scoutie44 Wrote: [ -> ]I don't think this is a bad idea, since the editor already uses this. Many of the icons for sure could be combined into one image. Not sure about the rest of the stuff, though.

I'm expecting mybb to use a lot less images and take advantage of more CSS like styles for buttons and what not in 2.0.

The only issue with sprites is what do you combine? I mean post icons can't be because they are different from board to board. The icons indicating if there is a new post you could, online/offline, and just about everything else in a default install is to theme dependent if you're using a custom theme it can take advantage of sprites.

And, as mentioned in the original post sprites are a lot harder to manage especially when you start changing sizes of things. I'm not saying it's a bad idea. However for the default theme don't think it should be there so it's easier for people to modify. You are more then welcome to make a sprited theme though .

The two I think of immediately are the expand/collapse image (which I'm surprised isn't already) and the postbit_multiquote, as with these two there's often a visible lag when toggling them for the first time. After that, any image where there's multiple states that could be on the screen at the same time, like the folder images. Perhaps if there was some kind of "spritify" tool in the ACP for theme developers that would take the many separate but related images and put them into sprite sheets and automatically convert the theme to use them.

well, I've sprited all the images now
[I've also made it so there is:
* only 1 CSS file per page (by combining css files and hacking out the others)
* only 1 on page javascript file (+ CDN JS external libs)
* both external js and external css are now minified
* javascript is now loaded last (just before end of body)
* changed it so the task.php runs as a cron job
]

Seems quite a lot faster (pingdom tools its pretty good for showing bottle necks). I usually get a page load (non-cached) between 400-800ms (most other forums get non-cached page loads of about 1000-1500) [the myBB details tell me that the pageLoad Global Parsing Time is ~0.025]. The performace increase of my forum is really noticed when using Google Chrome

The last performance tweak I need to do is place the sprited images, css and on-site js on my own CDN

The sprited images are attached

To sprite ALL the images took a little hacking here and there (and a lot of helpful people on this forum) , if you want to know the details of how I mapped any particular images, let me know.

[I'm eagerly waiting for 2.0 so I can finally get rid of the prototype Lib and just use jquery ]

I think your main time-saver is the CSS & JS, but nonetheless, nice job.