Pixelated images in mobile site.

[kennethd075]

Hi guys,

The problem I have is image quality differs from desktop to mobile device.

Therefore I place an image at 1900px wide onto my desktop site, I then put in my breakpoints for other devices.  When I preview the site on my iPhone 6 and zoom in. The images are blurry.  I'm saving all my images as .png

What am I doing wrong?

Thank you for you help.

[Günter Heißenbüttel]

You "zoom in"? Quality can’t be the same if you "zoom in" in browser. Where should the mobile browser get better image data from? Zooming in a browser always uses the "as is" data and resamples them – with all implications for image quality.

If your "normal", unzoomed image is "blurry" in mobile breakpoints, the reason might be, that the small mobile asset has to be recalculated from your huge 1900 px desktop image. To prevent this, go to the mobile breakpoint, hide the big image (right click -> Hide in Breakpoint) and place an optimised image instead, which you hide in other breakpoints

[kennethd075]

Thank you for the reply!

I've just done an "experiment".  I usually save my images as .png, but I just saved one as .gif and the result was vastly superior to the .png

[fotoroeder]

Are these images photos or graphics? Is it good practice to save as png? or gif? Long time ago in PS, there was a "save for web" function. This should be the best, should`t it? If these are graphics with transparencies, than of course png would be fine-or gif.

[kennethd075]

They are images.  And yes, I use the "Save for Web" function.

I must be doing something terribly wrong.

[ankushr40215001 · Accepted solution]

Hello,

Check this post where Guenter has made some good suggestions - Adobe Muse - image quality

Let us know if it helps.

Regards,

Ankush

[kennethd075]

Hi Ankush,

Thank you for the link.  And I did everything the gentleman suggested. 

When I exported my Muse file to HTML and opened the images file, I found that for every breakpoint created in my Muse document, a new image file had been created to fit that breakpoint width.

I'm assuming that this is why, when in my mobile site, I pinch and zoom in to see detail, I find that my images become pixelated.

Any ideas as to how I can fix this?

Thank you.

[Günter Heißenbüttel]

Again: If you zoom an image in your browser, there is no way to maintain its quality! How on earth should this work? Where should the browser get the zoomed image data from?