Participant

Answered

Adobe XD showing up blurry when sharing for review

Forum|Forum|7 years ago
June 20, 2018
11 replies
29098 views

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!

This topic has been closed for replies.

Correct answer Kenneth Kawamoto

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

This needs fixed or the web preview feature is useless

M

Mark29066200edfh

Participant

using incorrect image dimensions or low resolution usually causes blurry photos.. If it didn't help, try this solution:
https://adobexd.uservoice.com/forums/353010-adobe-xd-bugs/suggestions/38269462-about-low-image-quality-when-sharing-a-prototype-f

J

JBenoitTMP

Participant

If you save the file out as an SVG and place it in XD the blur of the file goes away.

D

default04qq8ydlrzxq

Participant

Yes, it's the length of the jpg for some odd reason...If I use one long jpg, 1920x5848px, it looks awful in the browser but if I use the same size XD file but chop the psd file into a few jpgs it looks great at 5848px length, which makes no sense to me. It just can't render long images...

This should definitely be fixed, because chopping up a psd file into smaller jpgs and putting together in XD is a nightmare..

Will this be fixed Adobe?

K

Kenneth Kawamoto

Community Expert

Try your 1920 x 5848 JPEG in Figma and apply some transitions - you'll see how that performs. You would never use that size JPEG in your actual web/app (well, you should not) 😉

D

default04qq8ydlrzxq

Participant

Thanks, ya, I'm playing around with Figma, I should try that...But it's long scrolling website, not a web app and I've been designing them for 15 years. They get much longer even, as website do, but it should really work like you said.

I could just design in XD from the beginning but I grew up on Photoshop so I work so quickly...Let's hope they fix this... Thx

F

Federico26089009p2fg

Participant

Hello i have the same problem, someone solved?

milanz15547916

Participant

I'm having the same issue right at this moment and I instaled last version few minutes ago. Do you have any advice how to solve this issue except narrowing the size to 2048x 2048 px which is unacceptable. At the end this software should be used for creating the websites not Instagram posts

K

Kenneth Kawamoto

Community Expert

How large is your image?

J

Jason Ober

Participating Frequently

Same. Still having this issue in August 2021. NOT resolved - the "Correct" answer is a workaround that none of us should have to do. 😃

See for yourself on this prototype I made today.

@Rishabh_Tiwari @elainecc @HARSHIKA_VERMA @Preran @Atul_Saini there are 5 of you Adobe peeps involved on this thread and you're all allowing it to be "Solved"??? =(

This thread is 2 years old now. I understand there are endless bug fixes but fast prototyping is Xd's entire value proposition. Screenshots and images I can find on the interwebs or that my company has at the ready to plop into my prototype are fast. I expect I can drop them into Xd with no issues AND that the live preview within Xd reflects what people will see in the browser preview.

Happy to help more if needed. Thanks.

J

Jason Ober

Participating Frequently

@Kenneth Kawamoto @annat72027643 since you were some of the originators - are you still doing Kenneth's labor-intensive workaround? Do you do something else now? Do you still even use Xd?

K

Kenneth Kawamoto

Community Expert

Yes the image quality is awful - but then you are showing a large image, which is not what XD is designed for. (Sketch was even worse back then, just render a preview with a big image took minutes not seconds - had it improved since, anyone...?)

I don't use huge screenshot for my work personally at the moment but I do understand this is a big issue when you do.

This is for Adobe to fix. Please chip in.

A

angelmerzdigital@gmail.com

Participant

Confirming that this issue is still happening despite being marked as resolved. The resolution is simply not a resolution. If images are going to be drastically altered at specific heights then why not just be upfront with us about it?

bbmm0nkey

Participant

I am glad I am not the only one seeing this, XD was working fine but everything is now fuzzy when rpeviewing and I am having to revert to send jpg files to my customers - crazy

U

Uroš98C6

Participant

Here's what I'm talking about:

This was sent to us by one of our testers. Apparently it happened to at least three people, we know one of them uses Chrome on Windows.

And here's what it's supposed to look like (and does look like when viewing locally):

Any ideas what could be the reason?

Joely10623436

Community Expert

Please Ask the user/tester to update his Browser or switch to another one. Looks like a rendering issue of the blurred shape.

R

Rene5e84

Participant

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?

Rishabh_Tiwari

Community Manager

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:

The version of XD and the OS.
Are the text and images blurry while previewing on the XD app?
Have you tested it on a different browser?
Do you use an external monitor along with the primary screen?
Please share a screenshot of how the preview looks at your end?
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

K

Kristina Celin

Participant

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!

HARSHIKA_VERMA

Community Manager

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

A

annat72027643Author

Participant

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.

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.

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

HARSHIKA_VERMA

Community Manager

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

Show more replies

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded