Highlighted

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

Community Beginner ,
May 13, 2020

Copy link to clipboard

Copied

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

 

Screen Shot 2020-05-13 at 5.44.41 PM.png

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

Adobe Community Professional
Correct answer by Dan_Rodney | Adobe Community Professional

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

 

 

Views

982

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

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

Community Beginner ,
May 13, 2020

Copy link to clipboard

Copied

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

 

Screen Shot 2020-05-13 at 5.44.41 PM.png

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

Adobe Community Professional
Correct answer by Dan_Rodney | Adobe Community Professional

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

 

 

Views

983

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
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Community Beginner ,
May 21, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

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

 

Schermafbeelding 2020-05-17 om 22.55.16.png

 

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.

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
Reply
Loading...
Community Beginner ,
May 21, 2020

Copy link to clipboard

Copied

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

Screen Shot 2020-05-21 at 10.51.54 AM.png

 

 

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
Reply
Loading...
Adobe Community Professional ,
May 21, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

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

 

 

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
Reply
Loading...
Community Beginner ,
May 21, 2020

Copy link to clipboard

Copied

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.

 

 

 

 

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
Reply
Loading...
Adobe Community Professional ,
May 21, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...