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

Image quality issue

  • March 31, 2022
  • 1 reply
  • 896 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).


A
Ankit LakheraAuthor
Known Participant
April 5, 2022

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.


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.

 

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