8 Replies Latest reply on Jul 2, 2018 7:00 AM by punarvikarnad

    blurry images in chrome

    Mnietek Level 1

      I've set simple animation where image changes size from small to large.

      Image is clipped in a div.

      Image looks VERY blurry and pixelated in chrome (IE and Firefox are OK).

      Why is this happening?

       

      IE.JPG   Chrome.JPG

        • 1. Re: blurry images in chrome
          QuadrantProductions Level 1

          I've noticed the same thing.  I've also noticed that it has something to do with when you load an image in the background of a DIV that has been scaled.  Unless you are loading it in 1 to 1, there is often blurriness.

          Also, if you place an image in the app this doesn't appear to happen. 

          • 2. Re: blurry images in chrome
            lester_dm Level 1

            Hi,

             

            I had something similar.

            Try putting the div (where the image is loaded in) in another (wrapping) div.
            Then scale the outer div instead. I can not test it now, because I'm working.


            I can get back to you later on. Good luck.

             

            Kind regards,

            Lester.

            • 3. Re: blurry images in chrome
              resdesign Adobe Community Professional & MVP

              Try to load your images with attr instead of css-background.

              example - I load images that are the same size as img not div

               

              sym.$("image").attr("src","images/"+image[i]+".png");

              1 person found this helpful
              • 4. Re: blurry images in chrome
                QuadrantProductions Level 1

                Hi resdesign I don't understand.

                If I have a div where I am loading in an image background are you saying change that method to loading in images on the stage?

                I'm curious to try that out, but I don't think it's optimal long term as I'm building types of widgets which load JSON objects.  The protocol is built once and then re-used across various areas of the site. 

                • 5. Re: blurry images in chrome
                  QuadrantProductions Level 1

                  so for example

                  along these lines....

                  the div I want to load into is the $("placehereCopy") which is nested inside "logo"

                   

                  I know the following doesn't work.  Just trying to understand the syntax / method.

                   

                  sym.getSymbol("logo").$("placehereCopy").attr("src","images/"+myimagenam[i]+".jpg");

                  • 6. Re: blurry images in chrome
                    resdesign Adobe Community Professional & MVP

                    Make sure you change the image from div to img otherwise it will not load. Select the image and on the top Left of stage choose div and change to img.If you use div then you need to use css background image. 

                     

                     

                     

                     

                    Sorry I am not at a computer.

                     

                    On Tue, Nov 4, 2014 at 3:43 PM, Adobe Forums <forums_noreply@adobe.com>

                    • 7. Re: blurry images in chrome
                      resdesign Adobe Community Professional & MVP

                      i there,

                      I would like to clarify some things.

                      1- when using attr you need to target an img tag and not a div. So basically you load your 'seed' image on the stage and change from div to img.

                      Note: when using img instead of div, you are limited somewhat because you will need to have all your images to the be exact same size otherwise your will have distortions. An advantage is that you could have the seed image loaded on the stage and change it's size. For example your original image is 100 x 100. You put it on the stage and change the size to 50 x50. Even though your images in the folder are 100 x100, they will automatically fix the seed image. This can be good because images can look better when the original is larger and scales down to smaller when added in the seed image.  This is why I suggested attr so you could load a larger image in the seed image and get a better rendering.

                      img.png

                      2- When using css background - you need to have div and not img. The images can be different sizes but they will load at (0,0) in their original size in the container and you need to use background-repeat, no-repeat so that you have only one image show.

                       

                      Hope this make sense.

                       

                      So I am not sure whether this will help with your problem.

                      • 8. Re: blurry images in chrome
                        punarvikarnad Level 1

                        Thank you! This solved my problem of blurry images in Chrome