Help: Can't fix pixelated images on mobile

[Seruhio]

Hello everyone,

I did a quick search in this forum before posting but sadly I couldn't find a solution so far. I think the problem to begin with is that we don't know what the problem is.

What we tried so far: HDPI, "mobile sized" (not using big desktop images) pngs, jpgs, svgs, ai. Every format we could. CMYK, RGB, 72 and 300 dpi.

Still when we open the design on mobile it looks horrible, jagged edges, pixelation everywhere.

We even tried tutorials we found on this forum on how to export images. I believe WE are making a mistake somewhere but I can't tell what/which/where/why.

I have been making websites with Muse with Beta and this is the first time I have encountered this issue. Also, it doesn't happen with all the images, some work, some don't.

Please help me.

Designer is using a Macbook Pro with Illustrator CS6. I use a Custom PC (Gaming Rig) with CC Membership.

Link to sample :

https://goo.gl/xLWN3a

[Günter Heißenbüttel]

Before going into details, some annotations:

1. What makes me worry: You told, you have tried SVGs too, but this didn’t solve your problem. This normally can’t be the case, because SVG as a vector format preserves vector data, which simply can’t get blurry. (To save pixel data as SVG makes absolutely no sense). Could it be, that you zoom your images while viewing them on your phone („pinch“)? Zooming the phone view inevitably has to result in blurriness of images, because your browser only has the image data, which are needed, to display the images in the size, they are placed for. Besides that, your mobile browser doesn’t even know, that you are zooming, because this feature is provided by the operating system of your device.
2. CMYK is a Color System for printing purposes, and isn‘t – better: can’t be – supported in the web.
3. „72 and 300 dpi“ is completely irrelevant for web design. The only thing, what counts, are the pure pixel values of your image.

Now to the underlying „problem“:

1. Muse won't touch your images at all, if you place (place, not fill!) them without any scaling in 100 % size (or exactly 50 %, if you have a HiDPI site). If you do so, input quality will be identical to output quality.
2. If you have more than one fluid breakpoint, Muse has to recalculate your images for each smaller breakpoint (3 breakpoints = 3 differently sized versions of an image), to reduce load times of your site.
3. 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.
4. Be aware, that the image quality between your breakpoint, while 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.
5. 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.

But there is one more problem, which has to be mentioned. Unfortunately this is method, how web browsers are working, and there is no way for Muse, to influence this behaviour:

• On mobile devices (phones, tablets), browsers use „viewport scaling“ for displaying web pages. This means: they try to scale your page, until it matches the screen of your device. You can see this quite well, if you visit a fixed width, desktop optimised website: Your phone will display the complete page width by downsizing it accordingly.

Creating a responsive layout minimises this problem, because mobile browsers will use an according (smaller) breakpoint for rendering the page, but „minimising“ doesn’t mean „avoiding“.

Evidently, in most cases, there will be no breakpoint, which exactly(!) matches the device’s screen size. (If this should be the case, you would have to create hundreds/thousands of breakpoints: one for each known device).

Consequence: The mobile browser normally has to resize nearly every breakpoint/page width, in order to guarantee a screen filling page view. And resizing is inevitably connected to quality losses. As I alread said: There is absolutely nothing, Muse can do, to avoid this behaviour.

• For deeper informations about preserving  image quality, read this:

https://forums.adobe.com/thread/1793996​ (post #4)

or this:

https://forums.adobe.com/thread/2371157

If you think, you are confronted with a completely different problem, please 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. Follow the steps, which are described here: https://forums.adobe.com/docs/DOC-8652

[Seruhio]

You were right about the svg, we double checked and it works fine.

However jpegs and pngs are giving me a headache and I knew and/or tried everything you wrote + the two links.

I will upload my muse file when I get a chance to do it. Probably tomorrow morning.

Thanks!

[Günter Heißenbüttel]

A file with one „misbehaving“ image together with the original image is enough!