views:

84

answers:

6

My demo is here.

Basically, I have a HUGE image (19160px × 512px to be exact, just under 2MB) that I transition the backgroundx using javascript to make it appear as if a transformation was happening.

I cannot compress the image much more without ruining its quality dramatically. Is there another way that I can achieve this with the same level of cross-browser and not rely on plugins like flash, but have it load faster?

A: 

If it is a jpeg, you can always use progressive encoding. it will become clearer as it is downloaded.

There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. -Wikipedia

Byron Whitlock
yeah it would help, but unfortunately not all browsers handle it right. Some defer showing the whole image, until it is loaded completely...
galambalazs
Yeah, but who uses ie 5 anymore?
Byron Whitlock
A: 

Slice it like Google Maps.

galambalazs
this would add many more http requests and not decrease file size.
Tom
i thought 19160px wouldn't fit to the screen anyway, so a large part of it is useless to load initially....
galambalazs
not really, because it needs to transition. I cannot wait to call another image with each step because each step only lasts a number of milliseconds and older browsers (even some newer ones) cannot download a ~60kb image and display it that fast and do it repeatedly.
Tom
A: 

If you want to change that many pixels on the screen at once, you'll have to get them to the client somehow. You could chunk it into multiple images and use something other than background-x, but then you expose yourself to other potential network interruptions along the way.

The only alternative I can think of to precomputed images like this one is to do the computation on the client - start with the full-colour image and manipulate it using the client's CPU. Your options here involve canvas or CSS3 or a plugin.

DDaviesBrackett
the latter was my original intention, but this makes things VERY slow due to client-side CPU demand, is not cross-browser, and I haven't found a way to achieve the same effect.
Tom
A: 

I'm not a big fan of Flash but in this case it seems like the right tool for the job (unless you need it work on the iPhone). If you don't have the Flash authoring tool you can use the free Flex compiler.

See http://www.insideria.com/2008/03/image-manipulation-in-flex.html

Rodrick Chapman
He already said no plugins.
Austin Kelley Way
A: 

Make it into an animated gif? Break it up into individual parts to remove all the area that is obscured by content.

Austin Kelley Way
+2  A: 

Have you considered making this a video?

It might improve loading time somewhat.

Also, another idea. Have you tried using only the first and last image, putting the last one on top of the first, give it opacity:0 and fade it in using JavaScript (e.g. jQuery)?

The effect won't be 100% identical to what you have now, but it might look good enough to please the client, and it would reduce loading time to a bare minimum.

If both ideas won't work for you, I think the first 10-12 frames could be compressed more effectively as GIF images. (It's an estimate, I haven't tried.) You would have to split the image into multiple div s to do that and change the method you use to switch the images, and you would have more requests, but it could be worth it.

Pekka
Neither the video nor the gif resulted in the desired effects (video needed flash for some non HTML5 browsers and didn't save too much space, gif didn't save enough to be worth it), but I will have to demo the transition through opacity and other effects, that seems doable.
Tom