6 Replies Latest reply on May 19, 2017 12:07 PM by Lina G

    SVG Image Resolution

    willjam

      I have saved an image from Photoshop where it's resolution full screen is sharp.  However when importing that image into my Muse site and previewing in the browser it is not sharp.  The resolution has degraded.

       

      Help???

        • 1. Re: Image Resolution
          adobelance Adobe Employee

          If you have a large image (say 3000x2000 pixels) in photoshop, and place that file into Muse, and then resize it significantly smaller (like 300x200 px), when you output from Muse, Muse will resample the image smaller.

          Muse doesn't offer any controls over this resampling. If you're not happy with the way it looks, the best option is to resize the image in photoshop to the size you're going to use it in Muse, and place that smaller image in Muse.

          If the size matches, Muse will generally just output the original image rather than resampling it.

          One exception to this rule is if you apply an effect that uses transparency - that will often require Muse to generate a new image.

          • 2. Re: Image Resolution
            Jilo

            What would you suggest to be best resolution in photoshop for typical full screens background pictures?

             

            Also, what would you say the background image size should be in Mega bytes - i.e. what is best practice for both please?

             

            Newbie to websites!

             

            Karima

            • 3. Re: Image Resolution
              Zak Williamson (Adobe) Adobe Employee

              There is no single answer. It depends on the specific image. Is it photographic in nature or computer generated, with hard edges, large ares of solid color, text, lines, etc. and the importance of crystal clear images versus page load performance to the person paying for the site and the site visitors, as well as the demographic of the visitors in terms of what device(s) and screens sizes/resolutions they're most likely to be using.

               

              If the brower fill is a photographic image that is soft in nature (i.e. sky, ocean waves, a non-repeating texture, soft focus, etc.) then a JPEG image that's in the 1400-1600 pixels in width range and saved with Low JPEG quality will likely look fine and be very fast to download (probably in the neighborhood of 50k). If the image is photographic with crisp focus, then an image size closer to 2048 pixels in width with JPEG quality of Medium is likely to have a noticeably better appearance, but at 3-4 times the size and download time.

               

              If the image is computer generated with hard edges, areas of solid color and/or text, then you'd want to try JPEG with a High quality setting, but even that may introduce too many compression artifacts for you. If that's the case, you may want/need to try using a PNG image but be aware PNG is generally ~5 times larger than a high quality JPEG for a photographic image (and thus very slow to download). However PNG can be smaller than JPEG for some computer generated images, so at times it is the right choice.

               

              Basically I pretty much go into Photoshop's Save for Web feature and try different settings on a 1400-2000 pixel wide image and attempt to get the smallest image file (lowest JPEG quality setting) I can without noticeably degrading the appearance of the image.

              • 4. Re: Image Resolution
                Jilo Level 1

                This has been an excellent feedback, if nothing else, it has given food for thought i.e. Speed of loading vs quality.

                 

                Thanks for taking the time to reply.

                 

                Regards

                Karima

                • 5. Re: Image Resolution
                  willjam Level 1

                  Many thanks!

                  • 6. Re: Image Resolution
                    Lina G Level 2

                    I finally figured out a way to get the image/design to come out completely crip and clear. I remembered a while back that muse now allows the use of SVG. Now I'm not a big designer on Illustrator, I'm mostly experience with Photoshop, but I have used the program from time to time and explore the program to learn.

                     

                    Anyways I figured out that when I brought over my layers to Illustrator they were converted to objects - okay no big deal I still have the psd. Then I selected all the text and expanded them as objects (so I don't run into the font matching problem or whatever)

                     

                    I made sure that everything was expanded and in object form. Then I saved the file as an SVG file. I made sure the file was the same or proportionally the same as I want it to come out on muse.

                     

                    I linked the asset - publish and boom! A super grip and clear image. I hope this helps! I'm not sure about full on photography images - I haven't tried that.

                     

                    Hope this helps!

                     

                    How To.jpg