Image quality issue

Community Beginner ,
Mar 30, 2022 Mar 30, 2022

Copy link to clipboard

Copied

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?

TOPICS
Design , Import and export

Views

339

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
community guidelines
Adobe Community Professional ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

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)

 

SpasK_0-1648718622182.png

 

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

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
community guidelines
Community Beginner ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

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.
  

Screenshot 2022-03-31 at 3.22.30 PM.png

Screenshot 2022-03-31 at 3.23.56 PM.png



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).


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
community guidelines
Adobe Community Professional ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

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.

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
community guidelines
Community Beginner ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

So what can be a possible solution for this?

How can I make the image appear crisp across all resolutions?

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
community guidelines
Adobe Community Professional ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

Best solution is to use .svg where possible, which is a vector format and will look sharp at any res. Unfortunately your image is too complex, so you're stuck with .png. Simply export it in a large enough resolution. For web 2x is usually enough.

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
community guidelines
Community Beginner ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

Thanks for the response.

I got that exporting it in 2x or 3x will help but as I said it's not doesn't look crisp but grainy in some of my co-worker's machines even using 2x size.

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
community guidelines
Adobe Community Professional ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

What is the difference between the machines it looks good on, and the ones it doesn't look good on? What are their monitor resolutions?

 

Can you upload the 2x and 3x images here? Just the images exported from Xd. (or somewhere else and send the link) This way I can check if it's an image problem, or its a web development problem. Also make sure you erase your browser cache on the machines it looks bad on, when you update the assets. Sometimes the image doesn't update.

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
community guidelines
Community Beginner ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

LATEST

Sure sir,

Please refer xd prototype link: https://xd.adobe.com/view/434f1129-6230-4082-a84f-b80fcc89df92-161c/
and compare it with the live development link: https://dev.lifezy.co.uk/home

here I am mentioning the machines in which the assets in the development link look grainy/fine.

My device is MacBook Pro (Retina, 15-inch, Mid 2015) - All assets are fine except the first one.

My co-worker's device is a windows laptop (1366x768 resolution) - All assets look grainy except the second one.

My other co-worker's device is a windows laptop (1366x768 resolution) - All assets are fine except the first one.

quote

What is the difference between the machines it looks good on, and the ones it doesn't look good on? What are their monitor resolutions?

 

Can you upload the 2x and 3x images here? Just the images exported from Xd. (or somewhere else and send the link) This way I can check if it's an image problem, or its a web development problem. Also make sure you erase your browser cache on the machines it looks bad on, when you update the assets. Sometimes the image doesn't update.


By @Spas K.

 

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
community guidelines