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.
    Community Expert
    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

      Hi Spas, How do I PM you?

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