Highlighted

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.

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

Views

679

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

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.

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

Views

680

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
Nov 08, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2017 0
mkpena 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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2017 0