10 Replies Latest reply on Sep 10, 2014 5:13 AM by paul_james123

    Image quality / performance

    paul_james123 Level 1


      Hey All,

      I often wonder about this. (I'm using CS5.5): In Flash I need a movie clip that to be 200 px by 200 px on my stage.

       

      -If I create a 500px by 500px image in Photoshop and import it at that size, create my MC, then resize it down to 200 x 200 in Flash, it looks real nice.

      -If I create a 200 x 200 image in Photoshop and import it and create my MC (no need to resize in Flash), it looks kinda crappy.

       

      In my final SWF, is there a greater performance hit with the larger pixel dimension images that are resized in Flash ..compared with the images imported at the exact same size as they will display on my Flash stage?


      Also: I always save my images as PNG from Photoshop because I've heard that that is the best format for Flash. Can someone confirm or correct this belief?

      Thanks much!

        • 1. Re: Image quality / performance
          Ned Murphy Adobe Community Professional & MVP

          Ideally your image should be the desired size before you import it.  Have you enabled smoothing for the imported image?  Right click the imported image in the library and choose Properties and enable the smoothing option.

          1 person found this helpful
          • 2. Re: Image quality / performance
            paul_james123 Level 1

            Thanks for the reply, Ned.


            I 'allowed for smooting' but see no improvement (they even look a little more blury).
            This is something that is pretty important to me because my movie relies on image quality.


            I made a test swf so you can see what I mean:
            http://bigbendhc.org/bbhcCuePointTest/compareDiffPxDimenImages.swf

             

            The image on the left is imported exact size it displays on stage.
            The one on right is a larger image that has been resized after import.
            Both exported from Photoshop as PNGs and 'allowed smoothing' in Flash.
            There is a significant difference in image quality.
            Am I overlooking something?

             

            Also:
            -Does importing images that are the exact size they will be displayed improve performance (IOW: resizing in Flash costs in performance)?
            If it doesn't make any difference performance-wise, I would just keep them large.

            -Should I be exporting from Photoshop in a format other than PNG?
            Thanks

            • 3. Re: Image quality / performance
              Amy Blankenship Level 4

              If Ned's suggestion doesn't do what you want, if you create a jpg image at a low quality in PS that is larger and scale it down in Flash. Even though the low quality looks bad at full size, it can often look better than a higher quality image created at the same size.

              1 person found this helpful
              • 4. Re: Image quality / performance
                paul_james123 Level 1

                Amy,

                What do you mean by: "low quality image?"

                 

                Correct me if I'm misunderstanding but it sounds like what you're saying is what I'm doing (except I'm using PNGs):  To arrive at a good looking image in Flash, I create a larger (in pixel dimensions) image than what the final size will be on the Flash stage. So, for example, if the final size of the MC needs to be 200 x 200px, in Photoshop I create a 500 x 500px PNG image that has a resolution of 72, import it at that size and then resize it to 200 x 200. I'm happy with those results. That results in good image quality but I want to know if I'm going to pay for it down the road in slow performance once I've added lots of images in this way.

                 

                So I guess my question is about best practices: Should I consider importing larger images as a performance trade off? Do larger images (resized down in Flash) cost in performance as compared with images that are imported at the exact size they will appear on stage?

                 

                In other words: I can probably get an even better looking image if I create a 600 x 600 image in PS (requiring even more resizing in Flash)...but if it will slow down the animation then I might settle for the 500 x 500.

                 

                Thanks for your help.

                • 5. Re: Image quality / performance
                  Ned Murphy Adobe Community Professional & MVP

                  To be honest with you and possible exhibit my own ignorance, I have almost always worked exclusively with jpegs... pngs being the newer kid on the block never really enticed me (as yet) and I have found that on occasion they cause more problems than I know how to handle.  You can get good quality out of a jpeg image.

                  • 6. Re: Image quality / performance
                    Amy Blankenship Level 4

                    Hi, Paul;

                     

                    I'm referring to using this technique. This is a technique that only works with jpgs.

                     

                    In addition to Ned's other suggestion, try changing the compression to lossless or up the quality so that Flash doesn't compress your png's so much.

                    1 person found this helpful
                    • 7. Re: Image quality / performance
                      paul_james123 Level 1

                      Very Interesting article, Amy! I'm fine with switching to jpgs if it means good image quality and good performance.

                       

                      I know the article is about web performance...but do you think this method will also result in better Flash performance...as in: my Flash animations will perform better (animating faster with less stuttering of alpha tweens on lower end machines) if the images are 0 quality jpegs?

                       

                      Thanks

                      • 8. Re: Image quality / performance
                        Amy Blankenship Level 4

                        I suspect the Flash performance will be worse, since it's going to be interpolating while it's tweening, but that's just a guess.

                        • 9. Re: Image quality / performance
                          paul_james123 Level 1

                          Thanks Amy and Ned.
                          I think I'm back to square one but at least I have more info.

                           

                          Unless I missed the answer, I still don't know whether a 500 x 500px image resized down to 200 x 200px costs more
                          in SWF performance than just importing a 200 x 200px image in the first place. I'm assuming it does.

                           

                          I tried using JPGs instead of PNGs with same result: Importing images that are exact stage-display size look bad (whether I 'allow smoothing' or not). IOW: The larger the image, the better it looks when it's resized in Flash:

                          http://bigbendhc.org/bbhcCuePointTest/compareDiffPxDimenImages.swf

                          I'll try large, 0 quality jpgs to see if they work better than large, medium quality JPGs.
                          (I'll be testing for image quality and performance and will post my results.)
                          Thanks again!

                          • 10. Re: Image quality / performance
                            paul_james123 Level 1

                            Ok I said I'd report back: I don't see much difference in performance between an animating flv (linked from the swf) that includes a larger-than-display size image vs. an exact-display-size image.

                             

                            IOW:

                            -I have a 600 x 600px image ...and the same image saved as 200 x 200px.

                            -I export both as alpha flvs from After Effects (with the same keyframe animation on each). As expected, using the larger image results in a flv that is about double the size as the other.

                            -Each flv is linked from a movie clip in Flash and has a looping code in it.

                            -I resize the 600 x 600px image down to 200 x 200px on the stage, keeping the other one the same size.

                            -When I look at the swf file on the web they both perform the same (looks like no slow down or stuttering in the larger-image flv animation.)

                             

                            Since the image quality IS different (the larger-than-display-size, medium quality image looks better) I'm going to build my project with the larger , medium quality images for now. If I see performance problems later, when more images are included, I will reduce the px sizes and test further.

                             

                            Also: I tried 0 quality jpgs but they looked pretty bad. Not sure if I was doing it right. (Just put the pixel dimension way up and the quality down to 0.) ...So I have gone with medium quality PNGs for now.