performance of jquery.animate() - image file size vs. image dimension size

Question

I'm building a website that will have a lot of images and a lot jquery animations. On one page, we have several sections, each section with a foreground that has grids of 20 images that are periodically and automatically re-positioned via jquery.animate() and with a background image that is subject to parallax scrolling.

Sometimes we get choppiness in the animation. So i'm trying to find ways to optimize. The content person is uploading high quality images. I'd like to ask them to reduce the quality.

Before I do so, I'm curious how each of the following affects performance of the animations, and if one is more important than the other:

• image file size
• image dimension size
• other image attributes to consider

Can someone prioritize these considerations based on which will affect animation performance the most?

Answer 1

The file size should not affect the animation framerate, only the download time. The animation suffers when more pixels are animated. For example, a 100x100px image is 10,000px to animate, while a 500x500px image is 250,000 pixels to animate. Please let me know if I didn't answer all your questions.

To respond to your comment on your question: once the image is rendered, it does not matter if the image is a png, jpg, etc.