Adobe XD showing up blurry when sharing for review

New Here ,
Aug 06, 2019 Aug 06, 2019

Copy link to clipboard

Copied

Hi everyone!

I'm running into some import issues with XD that I hope someone can help me with.

I have two PSDs, same file setting for both files. I made JPEGs out of both of them to import into Adobe XD. I exported them 3 times the size in Photoshop so they are high resolution in XD. When I share my XD link with my client, one of the jpegs end up being super blurry while the other one retain it's high resolution. I believe it's something to do with the export setting in Photoshop but they are both exported the same way! Please note all the other elements in my presentation remained very high res, except for that one jpegs. I tried carrying all my layers from the PSD that's exporting the blurry jpegs into the PSD that exports high res jpegs and it solved the issue. But the thing is that, majority of my project is built with the low res PSD and I can't help but think there's a setting that can fix this issue. but yet again both PSDs are created using the same settings and bits. 

Is there a view setting I need to explore in Adobe XD? Or is there a setting I need to change in Photoshop?

Any help is very much appreciated! Thank you!

Views

6.3K

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

correct answers 1 Correct Answer

Adobe Community Professional , Aug 07, 2019 Aug 07, 2019
I have the same issue. I figured out that it's to do with the size of the image (i.e. nothing to do with the JPEG compression level). Your good example is 3,240px height while the bad example is 14,514px height. I bet if you crop the bad image to 2,000px height and re-import, the image quality in the web preview would be good.About low image quality when sharing a prototype for previewing – Adobe XD Feedback : Feature Requests & Bugs Better image interpolation for device/web preview – Adobe XD Feedback : Feature Requests & Bugs...

Likes

Translate

Translate
Adobe Employee ,
Aug 06, 2019 Aug 06, 2019

Copy link to clipboard

Copied

Hi Anna,

Thank you for reaching out. We're sorry to hear you're facing trouble using Adobe XD. We'd like to confirm a few more details like:

  • What is the resolution (width and height) of both the PSD's file?
  • What method are you using to save the JPEG in Photoshop?

Please check out this article for how to export the assets https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703 By Elaine.

Let us know if that helps.

Thanks,

Harshika

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
New Here ,
Aug 06, 2019 Aug 06, 2019

Copy link to clipboard

Copied

Hi Harshika!

Thank you very much for reaching out to me! I have attached the image settings for the two PSDs. The "Good" is exporting the high res JPEGs and the "Bad"is exporting low res JPEGS. Please note, when I import both these into XD, it looks really crisp but the moment it is shared with my client through the web, the "bad" Jpeg becomes blurry.

GOOD.pngBAD.png

I usually export using the "save the web" method but that setting wont let me export 3 times the size. The reason I need to export 3 times the size is that when my cilent zooms into the XD, the image appears crisp. Therefore right now I am exporting using File>export as and change the setting to 3Xs.

Screen Shot 2019-08-06 at 2.09.24 PM.png

Please let me know if you need more information. Thank you again for helping out Harshika!

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 Employee ,
Aug 06, 2019 Aug 06, 2019

Copy link to clipboard

Copied

Thank you for sharing the details, Anna. I'd request you to please change the resolution to 300 and while exporting the image, make sure the quality is 100% as shown in the screenshot below:

Please try that and let me know if that helps.

Thanks,

Harshika

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 ,
Aug 07, 2019 Aug 07, 2019

Copy link to clipboard

Copied

I have the same issue. I figured out that it's to do with the size of the image (i.e. nothing to do with the JPEG compression level). Your good example is 3,240px height while the bad example is 14,514px height. I bet if you crop the bad image to 2,000px height and re-import, the image quality in the web preview would be good.

About low image quality when sharing a prototype for previewing – Adobe XD Feedback : Feature Reques...

Better image interpolation for device/web preview – Adobe XD Feedback : Feature Requests & Bugs

This needs fixed or the web preview feature is useless

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
New Here ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

Hi there, I've created a prototype for design review with client and everything, including vector elements, as well as live text seem to be appearing blurry. I don't think I've encountered this before with my previous prototypes. Is anyone else experiencing this?

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 Employee ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hi Rene,

 

Sorry to hear about the trouble. We can surely test this on our end so could you please share a few more details like:

 

  1. The version of XD and the OS.
  2. Are the text and images blurry while previewing on the XD app?
  3. Have you tested it on a different browser?
  4. Do you use an external monitor along with the primary screen?
  5. Please share a screenshot of how the preview looks at your end? 
  6. Will it be possible for you to share the link with us so that we can test this on our end? If yes, you can DM us the link, please add this discussion link in the subject while sending DM.

 

Regards

Rishabh

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
New Here ,
Oct 27, 2020 Oct 27, 2020

Copy link to clipboard

Copied

I am experiencing the same issue. Text looks sharp in the app (XD) but in browser review published share link, it looks blurry in Chrome. I just tested the share link in Firefox and it looks sharp. Seems to be a browser compatibility issue.  Halp!

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
New Here ,
Sep 29, 2020 Sep 29, 2020

Copy link to clipboard

Copied

I'm seeing the same thing.  All text, vector, and svg looks blurry. I do have some png icons in there from Material Icons, but even so, they looks about the same as the vector stuff.

Look fine in the app (XD) but in browser review (Chrome latest), blurry.

XD 33.1.12.4
MacOs 10.15.6

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 ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Stop marking my question as Answered. The issue has not been fixed and I have no ETA on the fix.

All my prototypes look blurry when viewing them in the browser. They only look fine when I go full screen mode. Please fix it asap as it blocks my daily activities.

See example below:

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 Employee ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Hi there,

Would it be possible for you to share your files with us for testing? You can upload them to a shared location such as CC or dropbox and share the URL with me over a private message. To send a private message, click my picture and use the message button.

We will do our best to help.

Thanks,

Preran

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 Employee ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Hi there, I have been working on this case on Preran's behalf. I would like to inform you that the image looks fine when published on the browser.

I have tested it on both Windows and Mac OS. Could you please share the version of your and the browser that using?

Thanks,

Atul_Saini

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 ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Hi, thanks. I am not sure what's going on, but I am having this issue in both IE and Chrome browsers:

This is what it looks like when I open it in either browser (look how blurry everything is, basically unreadable):

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 ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

btw, I think I noticed this happening after you updated the layout Adobe Creative Cloud

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 Employee ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

Thank you for the information. I am not sure as to what could be causing this issue. Let me check if the team has heard of this issue. I couldn't find anything in Uservoice as well Adobe XD Feedback : Feature Requests & Bugs

Feel free to file a bug in UserVoice, and I will have the team look at it.

jayh: If you can share your prototype link here or over a private message, we can test it for you. To send me a private message, click my picture and use the Message button.

Thanks,

Preran

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 Employee ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

I published your file, and I don't see any issue with the published output being blurred in the browser in a non-full screen mode.

Screen Shot 2018-06-20 at 3.55.51 PM.png

Is there anything I should be doing to reproduce your issue? I am viewing the published file on Safari (Mac OS). My colleague tried viewing it on Chrome (Windows) and he could not see any blurriness either.

Thanks,

Preran

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 ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

I have exactly the same issue, this is happend since the last update. Very blurry on chrome, firefox etc in any other size other than full screen.

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 ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

Did you find a work around by the chance?

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 Employee ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

I opened the file that Jay shared on my computer and it looks perfectly fine on Chrome (Mac OS). I have no idea as to what's going on.

I would like you to use the UserVoice link that I shared with you to report. I can have the team take a look.

Thanks,

Preran

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 ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

Please investigate as this prevents me from doing my day to day activities. Thank you

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 Employee ,
Jun 27, 2018 Jun 27, 2018

Copy link to clipboard

Copied

Hi there, thanks for your  using Adobe XD and sharing feedback. I would request you to vote for this bug: - Second monitor blurry prototype – Adobe XD Feedback : Feature Requests & Bugs and share more information in comments.

Thanks,

Atul_Saini

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 ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

I have found out this might have to do with a second monitor setup.

The prototype on my main macbook screen is perfectly sharp, but when I drag or open this same prototype on the second monitor, it all becomes very blurry and bad.

I will post a bug for this to be investigated.

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 ,
Nov 06, 2018 Nov 06, 2018

Copy link to clipboard

Copied

I have the same issue with blurry prototypes, I'm on a mac seems to be random...some layouts it happens then not on others. Also doesn't seem to matter what browser I use.

The prototypes are so buggy in XD, I refuse to send links to clients...end up sending JPGS — which defeats the purpose of this app! Crazy frustrating.

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 Employee ,
Nov 06, 2018 Nov 06, 2018

Copy link to clipboard

Copied

Are the images or the vectors pixel snapped?

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 ,
Nov 06, 2018 Nov 06, 2018

Copy link to clipboard

Copied

Yes, as in "Align to Pixel Grid".

BTW:

My dark bg layout is previewing much worse than the lighter layout....

i.e. white text, or icons are blurry on top of a photo or solid black background.

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