Pixelated images and text only on mobile

[mkpena]

Hi. I created a phone version on my site using old Muse "add alternate layout>phone" way, so with fixed breakpoints at 380. I used an image that is bigger than that size and added some text using a system font.

When I see the site on any phone, both the image and text look pixelated, in portrait and landscape mode.

I've also tried adding the image in various sizes, even the exact size and in .png .gif or jpeg at very high quality without any luck.

If you want to take a look, the url is this: Gimnasios equipados | Opengym

I would appreciate any suggestions. I don't want to switch to fluid breakpoints because I would need to re-accommodate everything.

[Grzegorz_Róg · Accepted solution]

Hey @mkpena, the thing is you're probably working with standard resolution file in Muse. Displays in Mobile Devices are usually retina or HiDPI and they apply scaling to your assets, that is why they look blurry. To understand this issue better, you can check out: Screens Essentials for UI Design - YouTube​

The solution is, instead of Standard resolution, in Site Properties you'd need to select the HiDPI version (File > Site Properties). Please note that you will than have to import 2x size images into Muse, and that they can load slower.

Hope this helps,

Greg

[Günter Heißenbüttel]

• Concerning "pixelated fonts", please read my post 4 in this thread: https://forums.adobe.com/thread/2357163
• Concerning „pixelated images“, please read these threads:

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

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

Placed FW asset into Muse. Original Size = 908w x 2323h. Muse auto resampled to 800w x 2048h. I need...https://forums.adobe.com/thread/1793996​ (post 4)

If your issues remain, please give us

• a .muse file with only one of these „misbehaving“ images, and additionally
• the original(!) image, which you have placed in Muse.

Use a file sharing service to share these 2 files by following these instructions: https://forums.adobe.com/docs/DOC-8652

[mkpena]

Thanks so much Günter and Greg for your quick response! I was able to fix it!

The solution was a mix of both suggestions, but the standard resolution was the main problem.

What I did first was to incorporate the text to the image in Photoshop, so I wouldn't use any system fonts in the site. Then I created a site exclusively for that particular image at a HiDPI resolution and imported it at 2x, and only with a mobile layout. Then I used an iframe in the main site (standard resolution) pointing to the HiDPI image and that was it! Now it looks good.

Again, thanks to both of you for your help!