6 Replies Latest reply on Jun 4, 2015 7:57 PM by sdough82

    Is it better to make image transparent in PS or Edge for faster loading time?

    sdough82

      Hi there,

       

      I have created a website that uses a lot of transparencies.  The load time for the site is slow, I have done a test on Pingdom which shows my js files and images load slowly.  So my question is:

       

      Is it better to create a transparent png in photoshop and import it in or to create the transparency within Edge Animate?

       

      Cheers!!

        • 1. Re: Is it better to make image transparent in PS or Edge for faster loading time?
          seano2o7 Level 3

          I couldn't find an answer on the internet so I made a circle with a background and without a background (transparent).

           

          The file size of the image with a background was:

          19,469 bytes

           

          The file size of the image without a background was:

          19,216 bytes

           

          so it saved a tiny bit of space. Nothing worth changing the images for. The best way to speed up your site loading time would be to compress the images to a lower quality.

           

          When you save an image as JPG in Photoshop you can choose image quality etc in this menu when saving. You will be able to lower image quality like this:

           

          Screen Shot 2015-05-25 at 10.39.20.png

          • 2. Re: Is it better to make image transparent in PS or Edge for faster loading time?
            sdough82 Level 1

            Thank you for taking the time to look at this. I guess what I really want to know is-

             

            I have a leaf on my website which needs to be transparent, is it better to:

             

            A)  import a png into Edge Animate at 100% opacity and turn down the opacity to 65% within edge, or

            B)  open the png in Photoshop, turn the opacity to 65%, save it, then import it in to Edge Animate where it will already be at the correct opacity and won't need to be adjusted within Edge Animate.

             

            This image needs to be a png to work with other elements in the composition.

            • 3. Re: Is it better to make image transparent in PS or Edge for faster loading time?
              resdesign Adobe Community Professional & MVP

              If you need transparent areas of course you must use png. As far as

              transparency for the whole image, I would do that in the UI. This give you

              perfect control. If you add jquery you can also use both CSS opacity and

              animate() for transparency animation.

              • 4. Re: Is it better to make image transparent in PS or Edge for faster loading time?
                sdough82 Level 1

                Thank you redesign, just looking back at the original question, what will give me a smaller website load time?

                 

                Say I import the transparencies from PS at the correct opacity and don't animate them and publish the site will this be a smaller website size than if I apply the opacity in the UI??

                 

                What I am wondering is would changing the opacity in the UI create a larger JS file?? 

                 

                One of the bigger elements in my website in terms of loading are my JS files and images.  The images I can resize, the js files I would like to reduce if possible.

                • 5. Re: Is it better to make image transparent in PS or Edge for faster loading time?
                  resdesign Adobe Community Professional & MVP

                  I really am not sure about the difference in size for animate when you add the transparency in the UI and of course you can see the difference in size in the png files when you change the transparency. i guess if no one can give a specific answer about that, you might want to try on a test file and tell us what happens.

                  • 6. Re: Is it better to make image transparent in PS or Edge for faster loading time?
                    sdough82 Level 1

                    Thank you redesign, in this case I will try with a test file and post the results. 

                     

                    Further to this question, I have resized my images to the smallest size possible, however the site is still taking considerable time to load.

                     

                    Based on the information from Pingdom the page is 944 kb and takes 596 ms to load.  Is this a healthy file and load size??

                     

                    I also have a script which makes the page responsive, as it is only a one page website and the elements need to stay in place the responsive script keeps everything in proportion.  Could this be slowing the process down at all?

                     

                    The script is:

                     

                    var stageHeight=sym.$('Stage').height();sym.$("#Stage").css({"transform-origin":"0 0","-ms-transform-origin":"0 0","-webkit-transform-origin":"0 0","-moz-transform-origin":"0 0","-o-transform-origin":"0 0"});function scaleStage(){var stage=sym.$('Stage');var parent=sym.$('Stage').parent();var parentWidth=stage.parent().width();var stageWidth=stage.width();var desiredWidth=Math.round(parentWidth*1);var rescale=(desiredWidth/stageWidth);stage.css('transform','scale('+rescale+')');stage.css(' -o-transform','scale('+rescale+')');stage.css('-ms-transform','scale('+rescale+')');stage. css('-webkit-transform','scale('+rescale+')');stage.css('-moz-transform','scale('+rescale+ ')');stage.css('-o-transform','scale('+rescale+')');parent.height(stageHeight*rescale);}