Skip to main content
M
martinw82732796
Participating Frequently
August 15, 2022
Answered

Problem with blurry looking images from XD

  • August 15, 2022
  • 1 reply
  • 4076 views

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.

    This topic has been closed for replies.
    Correct answer Spas K.

    Png attached


    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 🙂

    1 reply

    Spas K.
    Spas K.
    Inspiring
    August 15, 2022

    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?

      M
      martinw82732796Author
      Participating Frequently
      August 15, 2022

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

      M
      martinw82732796Author
      Participating Frequently
      August 15, 2022

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices