Highlighted

Images look poor in Muse Slideshow widget

Explorer ,
Jan 23, 2018

Copy link to clipboard

Copied

Hi! Hope someone can help me with this...

I inserted a Slideshow widget into my muse site and added my images. 

When I preview, the images look a bit pixelated in the lightbox view and VERY pixelated and low resolution in the thumbnails.  I'm not sure why this is happening as the images look perfect in photoshop.  They are 1200px in width which is larger than I need them so there is no up-scaling happening and I Saved optimized for web.

Also, I tried saving as PNG instead of JPG as I saw suggested elsewhere, but that did not help at all.  Still the same problem.

Any ideas?? Thanks!

… in addition: My answer here should help: https://forums.adobe.com/thread/2371157

One more hint: Don’t zoom your site  in browser view! This necessarily decreases quality, because the browser only has images in the size they are needed on your page and not in the size needed for a zoomed view.

Views

705

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

Images look poor in Muse Slideshow widget

Explorer ,
Jan 23, 2018

Copy link to clipboard

Copied

Hi! Hope someone can help me with this...

I inserted a Slideshow widget into my muse site and added my images. 

When I preview, the images look a bit pixelated in the lightbox view and VERY pixelated and low resolution in the thumbnails.  I'm not sure why this is happening as the images look perfect in photoshop.  They are 1200px in width which is larger than I need them so there is no up-scaling happening and I Saved optimized for web.

Also, I tried saving as PNG instead of JPG as I saw suggested elsewhere, but that did not help at all.  Still the same problem.

Any ideas?? Thanks!

… in addition: My answer here should help: https://forums.adobe.com/thread/2371157

One more hint: Don’t zoom your site  in browser view! This necessarily decreases quality, because the browser only has images in the size they are needed on your page and not in the size needed for a zoomed view.

Views

706

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
Jan 23, 2018 0
Jan 24, 2018

Copy link to clipboard

Copied

Hi kelseyholden,

The problem here is not low resolution, but because your images are oversized and this is what causes them to show blurred.

Just try to keep them normal size and resolution as 72dpi.

If still doesn't work please share the image you are using with us for further investigation.

Regards,

Ankush

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 1
LEGEND ,
Jan 24, 2018

Copy link to clipboard

Copied

… in addition: My answer here should help: https://forums.adobe.com/thread/2371157

One more hint: Don’t zoom your site  in browser view! This necessarily decreases quality, because the browser only has images in the size they are needed on your page and not in the size needed for a zoomed view.

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 1
Explorer ,
Jan 30, 2018

Copy link to clipboard

Copied

Ugh I'm still having problems with this.  The issue is the images on mobile.  I've tried making a separate version of the slideshow with smaller images for mobile and they still don't look clear.  I'm not sure what I'm doing wrong.  Here's a dropbox link to my muse file and the images I'm using.

Dropbox - Muse Help 

Also, if you need to see the site in live mode on a mobile you can see it at Frankie Holden - Lookbook

Thanks so much! Hope someone can help me

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 30, 2018 0
LEGEND ,
Jan 31, 2018

Copy link to clipboard

Copied

Before we start:

Your site has 8(!!) breakpoints, what is way to much! One of them even is completely unnecessary – the 320 px breakpoint. Or do you know smaller devices? And if: The minimal page width is set to 320 too! What finally should happen in this breakpoint?)

In short: 3, 4 breakpoint should be really enough. If not, you should really rethink your layout. But this is a different subject.

Your „image problem“:

Did you really read my link in post 2?

In this thread I tried to explain, how to achieve best possible image quality. I wrote, that Muse won’t change your images at all, if they are placed without any scaling at 100 % pixel size.

If you followed my suggestion, you should set the images to „Fit Frame Proportionally“ and – according to your images – your slideshow’s image container should have have exactly 1500 px in height (desktop) and 1152 px in height for mobile.

But looking at your data, we find this situation:

  • Original image size for desktop (1.jpg“): 322 kb, 1000 x 1500 px
  • Original image size for mobile: („mob-1.jpg“): 590 kb, 768 x 1152 px
  • Slide show container and in consequence final image size for desktop: 724 x 980 px
  • Slide show container and in consequence final image size for mobile: 331 x 527 pp; The image within this container is placed in a even smaller size: 527 x 790 px

You see: Your images in layout have completely different sizes than your original images. So you literally force Muse to downsample the images during output. You can’t expect best possible image quality in this case!

If I use your data (1.jpg, mob-1.jpg) and build the slideshow in a way, I described in my post above (image containers in Muse = original image size), all works as expected.

Just look at this simplified sample file, based on your own .muse document: https://www.dropbox.com/s/6xr4u5yu5ijxt73/kelseyholden.zip?dl=0

In these slide shows, I used a hero image container size of exactly the same pixel height as your original images have. (The width doesn’t matter, because it proportionally follows the height.)

Now please do the following:

  • Open my sample site in Muse.
  • Use menu „File/Export to HTML“ to save the output data on your local disk.
  • Now go to the exported data files, look into the „images“ folder. There you’ll find your images (alongside with downsampled thumbnail images, using the prefix „crop“)
  • Compare these images with your originals (file size, pixel size quality) and you will find no difference at all. Why? Muse did, what you told: "Take my original images and pass them through to output without any changes."
  • No go one step further: Double click the exported „index.html“ file.
  • Your browser should open.
  • Active your slide show lightbox by clicking onto the thumbnail, and drag the hero image out of the browser to you local disk (attention: Because it has the same file name, it might overwrite the originals.) Do this too in a smaller breakpoint.
  • Now you have the images, which your browser displays. If you compare them to your originals and to the images, which Muse exported to you hard drive, you will see: Not any difference at all in whatever aspect. The images simply are 3 completely identical instances. Input quality = output quality.

You see: If you follow my suggestions of the link in post 2, you will obtain best possible image quality. This is hard work, if you think in terms of a complete site, but there is logically no way around. You have to prepare/create your images according to your Muse layout. By the way: In this aspect, there is absolutely no difference to print layout.

Additionally you see, that this process will be quite difficult, when you have many breakpoints. Hand optimising every image for every breakpoint can be very laborious!

The question is: Is this procedure worth to be done? I personally don’t think so. Why? Optimising your images for every breakpoint is a nice idea, but one crucial fact isn’t taken into account: The visitor of your site doesn’t bother about breakpoints. His browser window normally has a coincidental size, which normally doesn’t match your defined breakpoint widths. And exactly this is the problem: You are able to optimise images breakpoint-wise, but what happens between the breakpoint, is completely out of Muse’s control. There is no way for Muse, to influence the image scaling algorithms of your browser/operating system. Muse can deliver best possible image quality if you allow it to do so , but it can’t change the way, your browser displays images between the defined breakpoints or during window scaling. Welcome to the web!

  • Finally: There may be one way for you to get even better image quality:
    • Use menu „Site Properties/Resolution: HiDPI“. this will dramatically increase image quality. The drawback: Page loading time of cause will be longer.
    • If you create a HiDPI site, your images have to have double pixel size (2x). That means: If you have an image container of 150 x 250 px, you image has to have 300 x 500 px.
    • More information about HiDPI sites: https://helpx.adobe.com/muse/using/retina-display.html

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 31, 2018 0
Explorer ,
Feb 02, 2018

Copy link to clipboard

Copied

Wow thanks for this excellent answer!

I really did try to follow your earlier directions, but with having so many breakpoints, I got really confused with what sizes thing should be... I guess the whole breakpoint thing confuses me as well, I have so many because my design kept "breaking" when resized.... and the 320px one was because my design looked off on my partner's iphone4 so I made an additional breakpoint for that size of screen. 

If you could provide a link for best practices when setting up breakpoints, I'd be very appreciative.   It's certainly laborious adjusting things over and over and over again.

I'm going to go through everything you provided and learn from my previous mistakes!  Thanks again for your quick and extremely detailed help!

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...
Feb 02, 2018 0
Explorer ,
Feb 16, 2018

Copy link to clipboard

Copied

I hate to be posting again about this.... but I still feel like I'm not getting good image quality with some.  I have resized the image to the exact size of the container in muse.  The image looks great in Photoshop, but when I place in muse and then preview, it still looks poor to me.  It mainly seems to be the problem for images where the subject is more zoomed out - which makes sense but I still feel like it should be clearer, as I see on other websites such as:


Gentlefawn · Dresses

Here is the link to my muse file, original Image and the resized one I'm using in Muse. Hopefully there's a solution here that i'm missing, as I've been struggling with this for weeks

Dropbox - muse-help-2

Thanks in advance!

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...
Feb 16, 2018 0
Adobe Community Professional ,
Feb 16, 2018

Copy link to clipboard

Copied

As always I start to watch out masters: A breakpoint at 320 is unnecessary, as there are no smaller devices than 320. 320 should be the minimum width. Not the solution, I know, but anyway one issue that will have some effect to your site.

So, changing this needs some settings to be made to these images on master:

Bildschirmfoto 2018-02-16 um 23.03.47.png

But you have this issue in the next breakpoint as well:

Bildschirmfoto 2018-02-16 um 23.07.16.png

In your breakpoint 1200 ,fixed width, you should take care about the fact, that elements should not be placed outside the guides:

Bildschirmfoto 2018-02-16 um 23.14.38.png

Some of these facts are already mentioned by Günter Heißenbüttel​. Why don`t you follow his advices?

Your main question here now has no corresponding example on your page "shop". The image is quite small with no scaling.

So there´s no quality issue on the page visible, but (it´s not easy to say this to images, I have no idea, under which circumstances they were shot), the image quality with ISO 800 is quite grainy and not 100% sharp, more kind of blurred, although it wa sshot with 1/500 of a second:

Bildschirmfoto 2018-02-16 um 23.00.13.png

So finally I can only recommend to fix your page settings and layout issues. Image quality as of this reading is not the issue with the settings you gave us with your file.

Sorry but …

Best Regards,

Uwe

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...
Feb 16, 2018 0