Comments on: Sprite Me! Helping you sprite up, but maybe you shouldn’t?

By: coolnalu

coolnalu — Tue, 07 Jul 2009 14:26:24 +0000

I think the solution is being “reasonable”. Apparently having large white area (especially when larger than content area) is not efficient and maybe even quite silly. I only use sprite for grouping icons of similar sizes and it not only saves loading time. but also become necessary in cases where webapps need to function in offline mode (while keep trying to connect the server), so that when I hover over an image button it only shifts it as oppose to trying to load a new image which will be empty or shown as the little square with red “x”.

By: NickTulett

NickTulett — Fri, 03 Jul 2009 09:08:05 +0000

Now I know why IE sucks up a gig of ram to display one page of our employee photo gallery. Who would have known that images need optimisation?

By: ThomasHansen

ThomasHansen — Wed, 24 Jun 2009 12:28:13 +0000

@cromwellian
Wow…! Didn’t know that! Cool feature :)
.
@TheWorld
All though tools like this are great in assisting people, I still think “Widgets” in general form are a “commodity problem” – as in should exist (mostly) within the framework itself, which means that for the widgets you use, this problem is (or should) already be *solved*. Though then there’s the rest of the website remaining, so it’s still a problem and maybe tools like this can help out, I however believe more in the “manual doing” here. I wrote a blog that explains them pretty easily though about 6 months ago here; http://ra-ajax.org/how-to-make-css-sprites.blog – for those interested … :)
.
[2-cents]
Ohh yeah, I guess if you have needs for more then 2042×2042 big sprites and you can’t handle them in less then a handful of sprites non-the-less, then I am pretty certain that you’ve got other issues then Opera to worry about … ;)
[/2-cents]

By: cromwellian

cromwellian — Tue, 23 Jun 2009 19:38:17 +0000

Or, you can just use GWT ImageBundle/ClientBundle which auto-bundles resources, efficiently packs them, with the compiler pruning any unused bits, and automatically rewriting the CSS, pruning, and minifying it, … :)

By: rasmusfl0e

rasmusfl0e — Tue, 23 Jun 2009 10:34:36 +0000

As is the case with any technique – css-sprites also has limitations. Piling techniques/workarounds/hacks on top of each other won’t help the real problem – while imposing an intricate set of different limitations (that may again require additional workarounds).

From a performance point of view the current model of requesting an html page which in turn references a number of resources (javascripts, image content, stylesheets) – that again may point to further resources (stylesheets, images) – doesn’t make much sense. (But from a flexibility point of view it does)

We need servers to be smart about not just sending the recipe but also the ingredients on the fly in a multipart package.

By: ChrisHeilmann

ChrisHeilmann — Tue, 23 Jun 2009 08:55:45 +0000

Well, let’s not forget that making a 15000 pixel high sprite also makes the maintenance of the thing useless. This is once again a case of taking technology too far and leaving common sense out of the equation.

The dimensions problem is well known, and the spritegenerator by Project Fondue Sprite me is based on does take care of that:

Opera (at least as far as version 9.0) won’t recognise a background position greater than 2042px or smaller than -2042px using that boundary value instead. The tool takes care of this by creating new columns within the image output each time the vertical limit is reached.

We’ve been playing with base64 encoding and inlining images for content images but sprite solutions first and foremost also mean that you only put background images in there as they don’t need to be an img with alternative text.

A combination of CSS sprites with sensible dimensions, lazy-loading other images (for example with the YUI image loader) and inlining other data (either via base 64 or by serving the whole document as MSHTML as used in Outlook) seems to be the best solution.