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!
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.
… 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.
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.
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
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:
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:
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!
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!
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:
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
Thanks in advance!
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:
But you have this issue in the next breakpoint as well:
In your breakpoint 1200 ,fixed width, you should take care about the fact, that elements should not be placed outside the guides:
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:
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 …