Here are some things you can check when optimizing for mobile performance:
- Limit your transparency pixels. Cropping as close to your image as possible will help your load times and your rendering performance. PNG is incredibly compressed and doesn't reflect the impact on the processors.
- Try stripping as much metadata out of your images as possible. There are tools available out on the web for this type of optimization
- Check to see what the dimensions of your images are. For iPad, you'll want a max of 1024x768, and for mobile the number might be smaller.
- I think Firebug mobile might have a network panel - if so, you can check to see which image it's choking on in terms of download speed
Hope this helps!
Thank You very much for your ideas. Thus far I have tried this:
Trimming images of any extra transparency.
Saved photos using Photoshop Save for Web and chose "None" for Metadata
The largest image I have (which is my main background image that doesn't move) is 912x222 in size.
I looked at the Firebug Network Panel but frankly this panel is a bit confusing, not sure how to tell what images hold up the loading.
With the above said it appears I was able to trim about 50kb of size (roughly). While this is an improvement the animation is still slow and jerky.
Thank You for your time,