Browser performance when combining image resizing with animated movement
- by Steve Reichgut
I have been tasked with the job of converting a Flash animation into HTML. The animation is rather complex and requires the need to move multiple images (9) from location (x,y) to location (x2,y2) while simultaneously increasing the image size from 215px wide to 930px wide.
While doing some initial testing of this animation with just 1-2 images, I noticed a lot of choppiness in FF handling of this animation. To try and isolate the problem, I removed the dynamic resizing of the animation and just moved it from point A to point B.
What was interesting was that I saw the same behavior when simply moving a 930px image that was resized down to 215px (via the CSS width or inline width properties).
When I try the same animation with a different image that is actually 215px wide, it performed smoothly. I then tried the same animation with the original 930px wide image (with no resizing) and it performed well also.
This makes me wonder if the browser is having to "resize" the image down to 215px each time it is moved which is causing the choppiness. Is this a correct assumption? If so, is there any other way to optimize the animation to allow for simultaneous image resizing and image movement?
Notes:
1) One optimization I have done is to position the images absolutely in order to minimize the reflow process.
2) I have tested the animation using both jQuery and the fX animation framework.
