Javascript transitions on CSS scaled images perform poorly

I am working on a front page gallery which has several images, scaled to fit the page via CSS.

The images fade from one to the next (overtop of each other), and will resize if the user resizes the browser to use up the space.

The problem is that the image fading performs terribly on most browsers and on all but the newest computers.

However, if the images are not stretched, then the performance is perfect across all browsers on most computers.

I've run into this problem before with other sites I've designed and have spent considerable amount of time researching and testing solutions, but I can't seem to find anything.

Any ideas?

I've implemented a performance/styling trade-off. Instead of arbitrarily scaling the images, say by a factor of 0.7543234, I round it to 8 and so on. I found that arbitrary scaling factors have a huge performance penalty, and using single decimal scaling greatly reduces that.

Here is some js code:

var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);

var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);

• newWidth is the desired width,
• originalImage.width is my array where I keep the original image sizes (since js is so smart it can't access these after it's been scaled),
• roundNumebr is a function which scales to the nearest decimal place

function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; }

After this the fading works about 50% better but is still not perfect. Well thanks for your help everyone hopefully this helps someone out there.

The performence loss due to the way browsers scale and display information and pictures.

Try adding the following to anything that will be scaled:

-ms-interpolation-mode: nearest-neighbor;
image-rendering: optimizeSpeed;

This turned off filtering while the image is being scaled making it much faster on slow machines.

After the animation is complete, set the element's styles to:

-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;

Also the rounding script seems to invoke Math a lot when rounding, this is quite slow when repeated many times (like in an animation). You could cut down the overhead by replacing the rounding script with this leaner version:

var roundNumber = function (num) {
    return ~~(num + .5);
    //this take a number (num), adds .5, then chops off the decimal place. 
}