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?
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)
P.S. To be retina-ready, you should export at least @ 2x, but you can show bigger or smaller image depending on the device.
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.
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).
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.
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?
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.
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.
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.
Copy link to clipboard
Copied
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.
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.