Skip to main content
A
Ankit Lakhera
Known Participant
March 31, 2022
Question

Image quality issue

  • March 31, 2022
  • 1 reply
  • 895 views

Hello guys,

Kindly refer to the mobile mockup in the hero section, it appears grainy when exported. While rest of the section images appear fine.

Here's how it appears in the prototype link: https://xd.adobe.com/view/434f1129-6230-4082-a84f-b80fcc89df92-161c/?fullscreen

and here's how it appears in development: https://dev.lifezy.co.uk/home

PS: the image was exported in 1x though.
 Any idea how to resolve this?

This topic has been closed for replies.

1 reply

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
March 31, 2022

Can you please screenshot how you see it? To me they look identical.

Here are both side by side. (Only difference is the background is in another perspective on the web prototype)

 

 

P.S. To be retina-ready, you should export at least @ 2x, but you can show bigger or smaller image depending on the device.

A
Ankit LakheraAuthor
Known Participant
March 31, 2022

I am surprised to see that it looks identical on your side, but here i am posting a screenshot for your reference on how it looks on my side.
  



Also in regards to exporting in 2x size, the image looks great on some devices like on my mac and my co-worker's Windows machine, but on the same size, it looks grainy on our other co-worker's machine (one has windows and one has mac).


Spas K.
Community Expert
Spas K.Community Expert
Community Expert
March 31, 2022

Can you make sure you're viewing it @ 100% and your browser isn't zoomed in or something? Generally, that blur looks like you're viewing the website at more than 100%. The vector elements (text, button) are sharp, so it's definitely a resolution issue. And when you say it looks good on some devices and not on others, clearly it's about the way its viewed, rather than an exporting problem. My screenshots are taken without any scaling, viewed them on about 100dpi 1080p monitor. Your screenshots look huge, so I assume your monitor has scaling, thus requiring twice the resolution on your image so it stays sharp.

 

Prototype is sharp, because Xd prototypes are exported at 2x,  (you can zoom to 200%, so they ensure everything stays sharp if possible).

 

Depending on the monitor resolutions, the OS (mac or win) might apply scaling and will enlarge everything on the screen to fit the physical resolution. If you design on a 1440 width artboard in Xd, and you export your image on 1x, it will look blurry on a Macbook with the 1440 *logical* resolution, because they have retina screens and the physical resolution is 2 times larger. That's why you normally export 2x as well for web.

 

Check the image on its own @ 100% on the different devices, through an image viewer or just in the browser, and you will see if the image is at fault or the way it's embedded / displayed.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices