Pixelated images and text only on mobile

Community Beginner ,
Nov 08, 2017

Copy link to clipboard

Copied

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.

Views

715

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

Explorer , Nov 09, 2017
Grzegorz_Róg Explorer , Nov 09, 2017
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 image...

Likes

Translate

Translate
Jump to answer Jump to answer
Explorer ,
Nov 09, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Nov 09, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
mkpena AUTHOR LATEST
Community Beginner ,
Nov 09, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more