Help! XD is Exporting Super Low-res JPEGs and PNGs

[beibeian]

Hi Guys,

I'm working on exporting design assets for the web developer as I normally do. For the images, I uaually use JEPGs. Recently, all the photos I've been exporting just look very blurry and low quality, tried both PNG and JPEG, just not acceptable. I designed them at the 1x size. And I have checked this article: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703 It's pretty dated, and nothing really helps. 

I attached a screen shot of the comparation between design view in XD (Left) and an image (Right) I exported. You can see that not only it became pixelated, the color also changed and look duller...Both views are at 100%. 

I already designed and cropped every image the way I wanted in XD, and I don't want to go back to photoshop to crop and resize them one by one. (Tired)

Please let me know if this is a software bug or a set up I can change on my end. (The "Preferences" button in my XD is also greyed out...)

Thanks a lot!
Beibei

[Ares Hovhannesyan]

It depends how XD renders original images that depends on image size.

Please review this convertion https://community.adobe.com/t5/adobe-xd/adobe-xd-showing-up-blurry-when-sharing-for-review/td-p/1056... 

Hope this will help

[beibeian]

Thanks for linking. But the images I brought in are actually not that big, within the normal range. They're not exported from the photoshop either. The thing is: this problem happens with all the images I exported with XD.

[Engr Abdul Rehman5E2F]

Hello Everyone,

I want to ask a question regarding product image size. I am new to adobe photoshop. I want to resize my product images. Kindly tell me the easy way to do this

[Ares Hovhannesyan]

Select Image Size from Image menu and change size.

[Peter Villevoye]

I just made a test with imported PSDs and JPEGs, having them exported as JPEGs at x1 size and 100% quality, and they visually look exactly the same, as crisp and colorful as the original. Are you sure you have set the Quality at 100% when exporting the assets ? This blur and loss of color brilliance are typical compression effects, in order to fit the bandwith of a low-quality JPEG...

Note: imported PSDs stay at 72 dpi (their original pixel size), but dragging in JPEGs will automatically scale them down to 50%, to keep them sharp at the often required 2x pixel size. But since you're explicitly using the 1x output, this shouldn't pose a problem.

BTW: The Preference setting (in the Mac version) is an Apple-obligated menu command. But it's grayed out, because XD has no preferences. So you're mot missing out on something. There's just a Language setting, available from the Help menu.

[beibeian]

I did export with 100% quality for sure. 

I didn't know that the way you import the image could affect the quality. I usually just drag in the photos. Can you give me a recommended importing method for the best quality image export?

Here's the setting I have when exporting (same as yours):

[Dan Rodney]

You always design at 1x size in XD, but if you're viewing on a 2x (Retina) display... you're still seeing the 2x quality when looking at XD. If you export for Design (1x) it will look pixelated when compared to what you see in XD. If you export for Web (1x and 2) it will export an image as both 1x and 2x. The 2x will be sharper.

Both 1x and 2x are meant to be viewed at the same size... but the extra pixels that make up the 2x will create a sharper more detailed image when viewed on a 2x monitor that is capable of showing the additional information.

For importing images, what matters is how much they are scaled after importing them.

• JPEGs dragged in from the desktop (or imported using File > Import) will automatically be scaled down (by XD) to 50% size, which makes them Retina (2x) quality. 
• All other formats PNG, GIF, PSD, etc. will NOT be scaled down to 50% automatically so they start only as 1x. You must scale them down to 50% size to make them 2x. 
• I wish XD didn't apply different scaling to various file types. I think everything should be automatically scaled to 50% so it's 2x (Retina), but for now the above is just a quirk you need to be aware of.

[Dan Rodney · Accepted solution]

#1 My guess is you're working on an iMac or MacBook with a monitor that uses the Display P3 color space. XD is not color mananged, which is why you're seeing the color shift. Please upvote this feature request to tell Adobe this is important to you XD User Voice - Color Management (set color profiles) 

#2 Within XD you'll see the full resolution of the image you imported. If you export at 1x (Design) it will look pixelated because it has lowered the resolution (that's the expected behavior). Export for Web to get 1x and 2x and you'll see the 2x has much information than the 1x.

[beibeian]

To #1: Yes! I do use MacBook Pro when using XD, as all of our staff in our company. Thanks for letting me know the color management issue, I upvoted the request! So you mean that XD is not managing the color between XD software display and the image it exported? Basically what I get is not what I see? That's a huge setback... If Photoshop, Illustrator and InDesign can do that, I wonder why not XD. 

To #2: Just tried the Export for Web 2x, similar result as the image I show in the beginning tho. I think it's the #1 issue.

[Dan Rodney]

Photoshop, Illustrator, and InDesign are all color managed programs that have been around for many more years than XD. XD is still a young developing app and color management is something Adobe still needs to add. 

Until XD becomes a color managed app, try using an sRGB profile for your monitor.

[evelyn57875]

Hi Dan,

I have the same problem but I couldn't solve yet cause I am not using Mac. How can I solve this problem on Windows 10? Could you please help me.

>> more info: https://community.adobe.com/t5/adobe-xd-discussions/jpeg-quality-is-greyish-in-my-xd/m-p/12616913#M5...

Thanks in advance,

Ezgi