Highlighted

SOME images show up blurry while others look crisp and sharp ON PHONEs

Participant ,
Sep 10, 2017

Copy link to clipboard

Copied

Hello!

I have been working on this site, - www.atelierdor.jp
When I see it on my laptop screen, the top image look perfectly sharp.

When I see it on my phones (I tried on 5 phones, iPhone, Galaxy, etc), the top image look very blurry.

I have been asking Adobe to solve this issue since April, and had many chats and phone calls over screen-shares, over and over again, but only suggestion they give me is the same thing from the beginning until now, resize to smaller size, use the rectangle frame tool, fill it with the image as "Scale to fill" and position it at center.

If the above info solves my issue, I wouldn't be contacting the support!! After weeks of contacting Adobe support, their final answer was the same thing as what they said on the day 1. So I got tired of it, and stopped.

Strange thing is, some images show super sharp on the same exact screen. I even saw the same exact image being sharp once, and then I refreshed my browser and became blurry again.

Can anyone help me with this issue PLEEEEEAAAASE??? This is driving me crazy because it takes forever and never get solved!!

Thank you for your help!!!

Views

2.4K

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

SOME images show up blurry while others look crisp and sharp ON PHONEs

Participant ,
Sep 10, 2017

Copy link to clipboard

Copied

Hello!

I have been working on this site, - www.atelierdor.jp
When I see it on my laptop screen, the top image look perfectly sharp.

When I see it on my phones (I tried on 5 phones, iPhone, Galaxy, etc), the top image look very blurry.

I have been asking Adobe to solve this issue since April, and had many chats and phone calls over screen-shares, over and over again, but only suggestion they give me is the same thing from the beginning until now, resize to smaller size, use the rectangle frame tool, fill it with the image as "Scale to fill" and position it at center.

If the above info solves my issue, I wouldn't be contacting the support!! After weeks of contacting Adobe support, their final answer was the same thing as what they said on the day 1. So I got tired of it, and stopped.

Strange thing is, some images show super sharp on the same exact screen. I even saw the same exact image being sharp once, and then I refreshed my browser and became blurry again.

Can anyone help me with this issue PLEEEEEAAAASE??? This is driving me crazy because it takes forever and never get solved!!

Thank you for your help!!!

Views

2.4K

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
Sep 10, 2017 0
LEGEND ,
Sep 10, 2017

Copy link to clipboard

Copied

Muse won't touch your image at all, if you place (place, not fill!) it without any scaling in 100 % size (50 %, if you have a HiDPI site). If you do so, input quality will be identical to output quality.

If you have more than one breakpoint, Muse has to recalculate your image for each smaller breakpoint (3 breakpoints = 3 differently sized versions of an image), to reduce load times of your site.

Normally, Muse does a good job in recalculating/optimizing images. If your images have very fine structures, it may be better to use a special version of your image per breakpoint:

Go to the smaller breakpoint, rightclick onto your image and choose "Hide in this Breakpoint". Place a hand optimised version (Photoshop!) of your image instead, which you "Hide in other Breakpoints" (right click again). Make sure, that this image is placed in exactly 100 % pixel size too.

Now you have best possible image quality. Muse won't change anything on your originals.

Be aware, that the image quality between your breakpoint, when resizing the browser window, can't be influenced by Muse in any way! This depends completely on the scaling algorithms of your browser/operating system.

If you "Export as HTML", and look into the  exported "images" folder, you will find there the images, which Muse has exported, to be used in your different breakpoints. Compare these to your originals, and you shouldn't notice any difference.

• For deeper informations about this, read my answer (post #4) here: https://forums.adobe.com/thread/1793996

If this doesn't work, do the following: Create a new site and place one of your "blurry" images onto it. Now let us have a look at this newly created site together with the original(!) image, which you have placed. Please upload the .muse file and the image to a service like Dropbox, and post the download link here.

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...
Sep 10, 2017 2
Participant ,
Sep 10, 2017

Copy link to clipboard

Copied

Hello

Thank you so much for your reply!

I already did your first suggestion and made the image smaller for the screen size but no difference was made to the image. Also, if what you suggest is the issue, the other too large images on the page should look blurry, too, right? But even when I had them all at large sizes - sized for large screens - some were sharp and others were blurry. So I don't think this is the solution. There must be something else.


We actually did this test, too. Created the new site and added the same image. And they also asked me to send them my whole muse file, so I did, and they did something to some of the blurry images and they became sharp but they wouldn't tell me what they did. Like, they did tell me that they did "rectangle frame - scale to fill - position to center" like everyone would, but that can't be the solution because I did it already but it didn't get solved. I tried, tried and tried, and they were still blurry. But they did something to my muse file and it came back with some sharp images. But I have no idea what they did so I can't fix other blurry images. I emailed the same agent again as he told me to email him back if I still have issues but I sent 2 messages and never heard back from him.

I uploaded the original image and also the muse file to this link. The image looks blurry on the new site, too.

Dropbox - BlurryImageTest

When you scroll down below the top image on my website, you can see a photo gallery, where they look very blurry, too. But when you scroll down even further, there are a lot of sharp images, but those sharp images are sized for large screens, too. Why some look blurry and others look sharp under the same condition?


This is the top image, which look blurry on my phone  (Galaxy S8 - newest phone)
Screenshot_20170910-170326.png


When you scroll down, there is this photo gallery, which also looks blurry.

Screenshot_20170910-185345.png


And there is this image, which looks pretty sharp even when zoomed in like this.

This image was actually blurry before I contacted the support. But they did something to it and they became sharp. But they wouldn't tell me what they did to those images. The only instruction they gave me was what I explained above. I tried to fix them by following their instruction but they are never solved if I do it. I am pretty sure they did something more than the simple instruction but I don't know what they did.

Screenshot_20170910-185408.png

And this is how the top image looks when zoomed in. Terribly blurred, while you can see the texts are very sharp.

Screenshot_20170910-185421.png

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...
Sep 10, 2017 0
LEGEND ,
Sep 10, 2017

Copy link to clipboard

Copied

I’ll describe tomorrow, what I have done.

But so much for now: It is no problem at all, to achieve, that the output quality on a homepage is absolutely identical to the original image.

Now, it is (very late) bed time in Germany! Good night!

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...
Sep 10, 2017 0
Participant ,
Sep 10, 2017

Copy link to clipboard

Copied

OK no problem, thank you!

Just for tomorrow, I re-created this page, using 3 images at 3 different sizes.
Image 1: 1895 x 1394 pixel
Image 2: 490 x 360 pixel
Image 3: 300 x 220 pixel

http://blurryimagetest.businesscatalyst.com/index.html

If what Adobe explains and your first suggestion is the solution, they all should look different on the page, but on my phone, they all look the same, very blurry, even the one that is sized 100% to the frame (300 x 220 pixel) is blurry. This is why I think what Adobe suggested and your first suggestion is not the solution in this case.

And I opened this page on Samsung browser, Chrome and FireFox but they all look exactly the same, blurry.

Thank you so much for help and have a good sleep!! I'll come here to check again tomorrow.

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...
Sep 10, 2017 0
Adobe Community Professional ,
Sep 10, 2017

Copy link to clipboard

Copied

I don´t see any blurry images (Safari, Chrome, Firefox).

But I realize some breakpoint alignment issue, which you should take of.

Bildschirmfoto 2017-09-11 um 07.56.23.png

Bildschirmfoto 2017-09-11 um 07.57.05.png

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...
Sep 10, 2017 0
LEGEND ,
Sep 11, 2017

Copy link to clipboard

Copied

So, now I am back finally.

I am referring to your post 2 in this thread.

As I thought, the problem normally should be covered by my answer in post 1.

But let’s look at the details:

Your sample files in „BlurryImageTest“ show quite clearly one issue:

Your original image "1601-dor-whS-HighResS.png“ has a pixel dimension of 490 px x 360 px and a file size of 115 KB.

If I use the menu command „File/Export As HTML …“ and look into the „images“ folder of the exported files, the image, you find there, has a pixel dimension of 300 px x 220 px and a file size of 33 KB

Why? Simply, because you didn’t place the image in Muse without any scaling. Muse has to resize and recalculate the image, because the browser needs different values! The browser expects a pixel size of 300 px x 220 px, just because your image container in Muse is defined this way!

That means, you are forcing Muse to recalculate your images to the needed size. Normally, Muse does this quite well, But an application like Photoshop of course is far better in images calculations – especially, it the image contains very fine structures. Additionally, Muse can’t know, what you want to achieve: Do you want an image with minimal file size to accelerate loding time in browser, or do you want best possible quality, regradless of loading times?

So, Muse does exactly, what it is supposed to do. The „culprit“ is the user!

What I did:

  • I checked, which size your image container in Muse has (320 x 2356 px)
  • I opened Photoshop and recalculated your image to 320 x 235 px.
  • I resized your image containers in both breakpoints to exactly these dimensions (320 x 235) and placed the image into it.
  • Now I used „Export as HTML“, and had a look at the exported image: It has exactly(!) the same size and quality as the original.
  • Now I opened the exported site in browser, dragged the image from the website to my computer’s desktop and had a look at this image: As expected, exactly the same size and quality as the original!
  • That means: If you place an image without any scaling, the input quality is identical to the output quality.

Annotation:

I you wat a metrological prove, do this:

Open the original image „Original_320x235px“ and the exported image in Photoshop. Place the layer of one of these images while holding down „Shift“ into the other image, so that both images are placed exactly one over the other. Now use Photoshop’s blend modes (-> layer panel) and set the bottom layer to „Difference“. The image should turn black now. Open the „Info“ panel, hover over the image and check the RGB values: They will show only the value „0“, what means, that both image layers ar absolutely identical.

Now, what is the result?

Muse exports your image absolutely correct. The image, which is exported to be shown in browser, is identical to the original image.

If the browser displays the image „blurry“, this has nothing to do with Muse at all. It may be a browser issue.

I wrote „it may be a browser issue“, because I assume, there is a different problem involved:

Mobile browsers are using so called „viewport scaling“ to display a website: If a page (or a breakpoint) doesn’t fit exactly onto the actual screen, the browser scales it – and its images – until it fits. The breakpoints, you are using in your sample file, force the mobile device to scale the content, if they don’t match the exact screen size of your device, until it fits to the screen. And here we are again: In this case, your image quality depends on the scaling mechanisms of your mobile browser/mobile operating system. The bad news: You can’t do anything against it. This is, how the internet, how webbrowsers are working. The only way out would be, to create breakpoints for every single device out there in the market, what obviously is more than absurd!

You may moderate (not prevent) this behaviour by creating a HiDPI site, but this has the disadvantage of longer load times.

Here you find the sample site, I described above, together with the placed, exported, and displayed images.

http://00blurry.businesscatalyst.com

You may download these files directly from the sample site and reproduce, what I was saying.

One more annotation: If you zoom into your page in browser view, the images necessarily become blurry! The browser has one image (on responsive pages with responsive breakpoints some more). Where from should your browser get the the higher resolved image data, when you zoom into the page? There in definitely no way. Zooming in browser always means zooming (upsampling) the available data, and that means quality loss.

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...
Sep 11, 2017 1
Participant ,
Sep 11, 2017

Copy link to clipboard

Copied

While I believe what you are saying is true technically, because that's exactly what the Adobe agent said. However, I am still have the issue so there have to be something else that is causing this problem.

>Your original image "1601-dor-whS-HighResS.png“ has a pixel dimension of 490 px x 360 px and a file size of 115 KB. If I use the menu command „File/Export As HTML …“ and look into the „images“ folder of the exported files, the image, you find there, has a pixel dimension of 300 px x 220 px and a file size of 33 KB

Why? Simply, because you didn’t place the image in Muse without any scaling. Muse has to resize and recalculate the image, because the browser needs different values! The browser expects a pixel size of 300 px x 220 px, just because your image container in Muse is defined this way!

Yes, I thought you would say that, so that's why I made the post 3. I placed the same image but at different sizes on the test page.

http://blurryimagetest.businesscatalyst.com/index.html

Please go to the above link again and you'll see 3 images.
The bottom one is sized exactly to match the frame dimension, which is 300 x 220 pixel.
But it still look blurry and looks exactly the same as the other ones at larger sizes on my phone.
Because of above test, I am sure the size is not the only issue here. It might be one of the issue but not the only one.
And I tested this on 3 different browsers on my phone, so I don't think the browser is the problem, either.
I also tested it on 5 different phones on different browsers but they all look blurry.

And another question here is, why some photos look perfectly sharp on the same page / same phone?

There are plenty of photos that are sized for larger screens, which means the image is way larger than the actual frame dimension in Muse, but look perfectly sharp on the same page / same phone. Can you explain this?

If Muse can't do anything about it but it's all because of the browser, why was the agent able to make some of the images sharp?

Lastly, I updated the breakpoint exactly to match my phone screen resolution, which is 360 pixel wide and placed the top image at 300 x 220 pixel size in a 300 x 220 pixel frame on my atelierdor.jp site. It still look exactly the same, blurry. Blurrier than the other images sized for larger screen size, on the same page.

I am not trying to say Muse is a bad product or Muse is doing something wrong. It does not even really matter to me. I just want to make my top image sharp because it is the most important image on my website!

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...
Sep 11, 2017 0
Participant ,
Sep 11, 2017

Copy link to clipboard

Copied

Is this screenshot from your phone? What is your phone and what is the screen resolution? I tried this on some iPhones and some Galaxy phones but they all looked blurry. What is the breakpoint alignment issue exactly?

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...
Sep 11, 2017 0
LEGEND ,
Sep 11, 2017

Copy link to clipboard

Copied

You second link (blurryimagetest …) is useless. Because (1) we don't have the original image and (2) we can't drag the images out of thevwebsite to inspect. Again: Give us the .muse file and the original image.

But I think, it makes no sense, to continue the discussion. You don't believe me. Why wasting time?

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...
Sep 11, 2017 1
Participant ,
Sep 11, 2017

Copy link to clipboard

Copied

It is not that I don't believe you. But it is just I am not seeing the results. You can't say I don't believe you after I did exactly what you told me to do : I made the breakpoint exactly to match my phone screen resolution (360 pix wide), placed the image (300x220 pix) that fits 100% of the frame (300x220 pix). But my top image is still blurry on my Galaxy S8, which is the newest phone with great quality screen.


And you do have the original files, they are all uploaded in the DropBox link I shared with you in my post #2. This is the link.
Dropbox - BlurryImageTest

I am here to ask for help because I couldn't get enough help from the Adobe support. The Adobe agent told me the same thing you said and I believe what you say is true but my image is still blurry after I followed all of your and Adobe agent's advices!

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...
Sep 11, 2017 0
LEGEND ,
Sep 11, 2017

Copy link to clipboard

Copied

Again in short:

  1. The image which Muse exports in case of the example file, which  linked in post 6  – is it the same as the original?
  2. The image appearing on the homepage after exporting to HTML – is it the same as the exported or the original one?

I described how I checked it, I provided the images for you to examine this By yourself.

If the answer of question 1. and 2. is "yes", there is no chance, that Muse is the culprit for any "blurriness", you are experiencing in any browser on any machine. Or am I wrong? .

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...
Sep 11, 2017 2
Participant ,
Sep 13, 2017

Copy link to clipboard

Copied

I don't know how to export it as HTML in my phone. I know how to do it in my laptop but I don't see the option to do it with my phone browser. So I haven't been able to try that. If you checked and they were same as original, Muse is probably doing perfectly fine. However, my image is still blurry. So this could mean there are some other issue, outside of Muse. But even if the issue is outside of Muse, it could still be related to Muse and other Adobe products, like Photoshop. And I don't know what it is and still need help, so I contacted Adobe agent again. Will update here when I hear back from them. They are working on my file now.

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...
Sep 13, 2017 0
LEGEND ,
Sep 13, 2017

Copy link to clipboard

Copied

After the file export of Muse – which evidently and definitely is correct – there follows no Muse, no Photoshop, no Adobe at all. There follows nothing but the browser, operating system and device of the visitor of your site.

By the way: You need not "export to HTML" on your phone to save and inspect an image! On an iPhone, you can save website images simply by pressing your finger for a little while onto it. A dialog will appear, which allows you to save the image.

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...
Sep 13, 2017 0