Highlighted

Image resizing problem in Adobe Muse

Community Beginner ,
Aug 15, 2017

Copy link to clipboard

Copied

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.

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

Views

5.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image resizing problem in Adobe Muse

Community Beginner ,
Aug 15, 2017

Copy link to clipboard

Copied

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.

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

Views

5.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 15, 2017 0
LEGEND ,
Aug 16, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2017 3
Community Beginner ,
Aug 16, 2017

Copy link to clipboard

Copied

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,,

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2017 0
Explorer ,
Jan 24, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 0
LEGEND ,
Jan 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 0