CODEWITHSUNDEEP
javascriptperformanceimage
Tom
Tom

Reputation: 7091

Using a large image (file size) but not hinder load time?

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?

Upvotes: 3

Views: 461

Answers (6)

Pekka
Pekka

Reputation: 449783

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.

Upvotes: 3

Catharsis
Catharsis

Reputation: 476

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

Upvotes: 0

Rodrick Chapman
Rodrick Chapman

Reputation: 5543

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

Upvotes: 0

Dan Davies Brackett
Dan Davies Brackett

Reputation: 10081

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.

Upvotes: 0

gblazex
gblazex

Reputation: 50127

Slice it like Google Maps.

Upvotes: 0

Byron Whitlock
Byron Whitlock

Reputation: 53921

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

Upvotes: 0

Related Questions