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.
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?
Hi Spas, How do I PM you?
I am using - iMac (Retina 5K, 27-inch, 2019)
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.
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.
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?
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!
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 🙂
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