• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Problem with blurry looking images from XD

New Here ,
Aug 14, 2022 Aug 14, 2022

Copy link to clipboard

Copied

Hi. I have always had issues with the quality of the exported image from XD but now my Client has suggested I use a better prototyping software.

It seems that whatever the quality of object and images I use in XD, when I export to Jpeg or PNG the quality of the image dramatically drops.

In my example the pdf contains 3 images as described in the PDF. In frustratiom I had to export my design to photoshop at twice the size, then re-size and re-export frpm photoshop to png (see C).

The objects in my image are a either bitmaps or vectors. The top left logo is a vector and perfect quality within XD (see the screen grab A). On export (B) its terrible.

Is it me or is there a function within XD that allows me to export clean images.

Views

339

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

Community Expert , Aug 15, 2022 Aug 15, 2022

Okay, so the forum blurs it a bit, but when I download it, it is the same as the 1x I exported. So I'd say you don't have a problem with exporting, it's just that your display is high-res, and you need to export bigger resolutions so you can see a sharp image.

 

When exporting raster images for a website, it's a good idea to also serve at least 2x assets for retina displays. This 350x230 image is almost too small to read on regular displays, and for high-res screens (retina, mobile) it's definit

...

Likes

Translate

Translate
Community Expert ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Hey there! I don't remember having such issues with Xd's export. I tried replicating the issue just now, but I see no difference between a screenshot from Xd and the .png exported from the same artboard. See example here.

 

It's strange to see such a difference in the screenshots you provided. Could you upload the .xd file somewhere and link it here (the forum doesn't allow uploading .xd files)? You can send it to me via PM as well if you don't want to post it here, so I can try to export and see if the issue is something with the file, or we should look elsewhere.

 

Could you please share whether you're using Mac or Windows?

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 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Hi Spas, How do I PM 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
New Here ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

I am using - iMac (Retina 5K, 27-inch, 2019)

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 Expert ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Okay, so I made some exports off the file and there were no issues with bad quality. Could you post a screenshot of the export settings you're using?

 

I should also note I'm on Windows, so it might be some Mac-specific issue I wouldn't be able to replicate.

 

Keep in mind on retina screens you will need to export at bigger resolutions to see things at the same physical size. When you capture a screenshot from Xd it's already at a big (~3x) resolution, since it's also applying the scaling from your OS, but when you export from Xd you will need to export a PNG at 3x to see it clearly at the same physical size. The pixel size in Xd assumes a 72dpi screen, and your iMac display is at 218.

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 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

martinw82732796_0-1660568009879.pngmartinw82732796_1-1660568045020.png

Two screen shots here. I choose x1 size as the IT team don't want to change sizes! Ultimately this image in XD will sit on the website at 350 x 230px so that is what I have been exporting as.

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 Expert ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

I see. Then it's just the case that it's blurry for you at this size, but not for people who're not on retina displays. Could you just export the 1x and upload it here directly, without any editing?

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 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Png attached

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 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Just saw your last paragraph. All my images will be viewed on PCs/Mac/browsers/mobiles and everything known to mankind around the world. The poor resolution was originally pointed out by my manager, on her Macbook Pro, backed up by her P.A. on a low end PC screen.

I always assumed the fuzzyness was normal. Maybe it is!

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 Expert ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

Okay, so the forum blurs it a bit, but when I download it, it is the same as the 1x I exported. So I'd say you don't have a problem with exporting, it's just that your display is high-res, and you need to export bigger resolutions so you can see a sharp image.

 

When exporting raster images for a website, it's a good idea to also serve at least 2x assets for retina displays. This 350x230 image is almost too small to read on regular displays, and for high-res screens (retina, mobile) it's definitely going to be problematic.

 

There are ways to declare 1x and 2x assets on websites, so the browser checks whether the user has a retina display and loads the bigger resolution image.

 

And generally, it's best if you can avoid raster formats and use .SVGs where possible, so you don't have to worry about resolutions and such 🙂

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 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

LATEST

Mmmmmm OK. My original thought was ANY image reproduced small as pixels will be 'fuzzy'. I was hoping though I had missed a setting or not done some hidden process.

XD remains one of my favorite platforms and I appreciate you help. Now just stop 'Command S' saving to the cloud and ill be happy.

Thanks for your help...M

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