4 Replies Latest reply on Jan 24, 2018 4:06 PM by Günter Heißenbüttel

    Image resizing problem in Adobe Muse

    Mo7a33ed

      Hi,

       

      Thank you for all new features in Adobe Muse CC, except I have a problem with image resizing.

       

      When I place a large image, then fit it to the page to be smaller, I see image quality changes when I upload my website.

       

      Am wondering , how in preview it looks perfect, also after uploading it in my website, it looks perfect .

      But when I check my website after a while, one day for instant, image becomes pixeled.

       

      So I need to resize originals first with Photoshop before using any in Muse, and my website contains a lot of images.

       

      Hope there is a solution.

       

      Thank you.

        • 1. Re: Image resizing problem in Adobe Muse
          Günter Heißenbüttel Adobe Community Professional

          Perhaps it helps, if you know, how Muse handles images.

           

          If you place an image in Muse and scale it down to fit the size you want, Muse recalculates this image to the exact size, which is needed on your web page. This is necessary to reduce the loading times of your site. Since Muse is no image editing software, this recalculation won’t be as good as it may be, if you use Photoshop. Nevertheless, depending of the image, Muse generally does a very good job in this respect.

          • If you want best possible image quality, you should place an image without any scaling (= 100 % size). If you do so, Muse won’t even touch your image and pass it through from your hard drive directly to your web space without any modifications. Input quality will be identical to output quality.
          • If your image is bigger than needed, I recommend, to resize it in Photoshop. Because this application is specialised on these kind of operations, image quality will in many cases be better, than if you leave this job to Muse’s built in resampling algorithms.

          And this is the best way of layouting with images in Muse, if you want best possible image quality:

          • In the first step place no images, but image placeholders into your layout.

          Rectangle-tools.jpg

          • When done, open the „Transform“ panel and look at the pixel size of these placeholders.
          • Create your images in exactly this size in Photoshop. (If you create a HiDPI site, create your images in exactly double pixel size.)
          • Back in Muse press cmd+D („Place …“) and in the appearing dialog select all the images, you have created.
          • After closing the dialog, you’ll see the so-called „Place Gun“ (= a cursor, „loaded" with all images, which you have selected. The „Place Gun“ shows the number of images, which are „loaded“ (with the arrow keys of your keyboard you can cycle through the images).

          Place_gun.jpg

          • Hover with your cursor over an image placeholder (its outline will now be highlighted blue) and click.
          • The image will now be placed precisely into your frame.
          • Go to the next image placeholder and click again. And so on …
          • If you want to know more about Muse’s image handling, you may want to read my post #4 in this thread too: https://forums.adobe.com/thread/1793996

          You may test the image quality of this workflow by yourself:

          Prepare an image just as I described above and place it into Muse

          • Go to menu „File/Export as HTML …" and export your site.
          • Open the exported „images“ folder and find the image, you have placed.
          • Open this exported site in your browser by double clicking onto „index.html“ and drag the image out of the browser window to your machine.
          • Now you have three images to compare: the original one, the image dragged out of the browser and the image you found in the exported „images“ folder.
          • Open these image in Photoshop and compare them. There shouldn’t be the meanest difference. (There are methods to compare the images precisely, but this should be enough.)

           

          If you continue having problems with image quality, please do the following: Place an image onto a newly created Muse site and give us this .muse file together with the original image to have a closer look. Please follow these instructions: https://forums.adobe.com/docs/DOC-8652

          1 person found this helpful
          • 2. Re: Image resizing problem in Adobe Muse
            Mo7a33ed Level 1

            Günter Heißenbüttel

            • If your image is bigger than needed, I recommend, to resize it in Photoshop. Because this application is specialised on these kind of operations, image quality will in many cases be better, than if you leave this job to Muse’s built in resampling algorithms.

             

             

            Yes, this is my case.

            Thank you for your instructions and helpful response about laying out images.

             

            Greetings,,

            • 3. Re: Image resizing problem in Adobe Muse
              kelseyholden Level 1

              Thank you so much for this super detailed reply!  Images being too large is definitely my issue.

               

              I used a slideshow widget to display a handful of images.  Would it make sense to hide the slide show on my breakpoints for mobile and insert a separate one with the same images resized even smaller in Photoshop?  I don't want my load times on mobile to take forever because the images are being scaled down from a size that is suitable for a larger display.

               

              THANKS AGAIN!

              • 4. Re: Image resizing problem in Adobe Muse
                Günter Heißenbüttel Adobe Community Professional

                This definitely is the best way to obtain best possible image quality.

                But there are certain drawbacks too: Since you have different instances of your slide show in your breakpoints, they may run asynchroniously in your breakpoints. This certainly is no big deal: Nobody will resize the browser window, when watching a slide show. But you should be aware of this behaviour.

                Concerning loading times you don‘t need to worry: Muse already exports optimized versions of your images per breakpoint. If you export your site as HTML to your hard drive and look into the „images“ folder, you‘ll find several instances of differently and breakpoint-specific sized images. That means: If you are thinking of loading times, it is not necessary to place different instances of your slide show per breakpoint. If you are thinking of quality, it might be an option.