2 Replies Latest reply on Mar 18, 2013 10:08 PM by Lynda-S

    Improving Animation Performance on Mobile Devices

    Lynda-S Level 4

      I have a fairly simple animation created and looks great on desktops. However, on mobile devices (tested on iPhone 4 and iPad Mini both running iOS6) the animation is very slow and can take a while to load.

       

      Are there ways to improve performance on mobile devices?

       

      Note:I have saved any images (I am using JPG and PNG) in Photoshop and reduced the file size as much as possible. Also slower desktop computers also lag but not as bad. I assume if I can improve performance on mobile it will also help slower desktops.

        • 1. Re: Improving Animation Performance on Mobile Devices
          elainecc Adobe Employee

          Hi, Lynda-

           

          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!

           

          -Elaine

          • 2. Re: Improving Animation Performance on Mobile Devices
            Lynda-S Level 4

            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,

             

            Lynda