Skip to main content
beibeian
beibeian
Participating Frequently
May 14, 2020
Answered

Help! XD is Exporting Super Low-res JPEGs and PNGs

  • May 14, 2020
  • 3 replies
  • 18119 views

Hi Guys,

 

I'm working on exporting design assets for the web developer as I normally do. For the images, I uaually use JEPGs. Recently, all the photos I've been exporting just look very blurry and low quality, tried both PNG and JPEG, just not acceptable. I designed them at the 1x size. And I have checked this article: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703 It's pretty dated, and nothing really helps. 

 

I attached a screen shot of the comparation between design view in XD (Left) and an image (Right) I exported. You can see that not only it became pixelated, the color also changed and look duller...Both views are at 100%. 

 

I already designed and cropped every image the way I wanted in XD, and I don't want to go back to photoshop to crop and resize them one by one. (Tired)

 

Please let me know if this is a software bug or a set up I can change on my end. (The "Preferences" button in my XD is also greyed out...)

Thanks a lot!
Beibei

      This topic has been closed for replies.
      Correct answer Dan Rodney

      #1 My guess is you're working on an iMac or MacBook with a monitor that uses the Display P3 color space. XD is not color mananged, which is why you're seeing the color shift. Please upvote this feature request to tell Adobe this is important to you XD User Voice - Color Management (set color profiles) 

       

      #2 Within XD you'll see the full resolution of the image you imported. If you export at 1x (Design) it will look pixelated because it has lowered the resolution (that's the expected behavior). Export for Web to get 1x and 2x and you'll see the 2x has much information than the 1x.

       

       

      3 replies

      Dan Rodney
      Community Expert
      Dan RodneyCommunity ExpertCorrect answer
      Community Expert
      May 18, 2020

      #1 My guess is you're working on an iMac or MacBook with a monitor that uses the Display P3 color space. XD is not color mananged, which is why you're seeing the color shift. Please upvote this feature request to tell Adobe this is important to you XD User Voice - Color Management (set color profiles) 

       

      #2 Within XD you'll see the full resolution of the image you imported. If you export at 1x (Design) it will look pixelated because it has lowered the resolution (that's the expected behavior). Export for Web to get 1x and 2x and you'll see the 2x has much information than the 1x.

       

       

      — Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
        beibeian
        beibeianAuthor
        Participating Frequently
        May 21, 2020

        To #1: Yes! I do use MacBook Pro when using XD, as all of our staff in our company. Thanks for letting me know the color management issue, I upvoted the request! So you mean that XD is not managing the color between XD software display and the image it exported? Basically what I get is not what I see? That's a huge setback... If Photoshop, Illustrator and InDesign can do that, I wonder why not XD. 

         

        To #2: Just tried the Export for Web 2x, similar result as the image I show in the beginning tho. I think it's the #1 issue.

         

         

         

         

          Dan Rodney
          Community Expert
          Dan RodneyCommunity Expert
          Community Expert
          May 21, 2020

          Photoshop, Illustrator, and InDesign are all color managed programs that have been around for many more years than XD. XD is still a young developing app and color management is something Adobe still needs to add. 

           

          Until XD becomes a color managed app, try using an sRGB profile for your monitor.

          — Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
            Peter Villevoye
            Community Expert
            Peter VillevoyeCommunity Expert
            Community Expert
            May 17, 2020

            I just made a test with imported PSDs and JPEGs, having them exported as JPEGs at x1 size and 100% quality, and they visually look exactly the same, as crisp and colorful as the original. Are you sure you have set the Quality at 100% when exporting the assets ? This blur and loss of color brilliance are typical compression effects, in order to fit the bandwith of a low-quality JPEG...

             

             

            Note: imported PSDs stay at 72 dpi (their original pixel size), but dragging in JPEGs will automatically scale them down to 50%, to keep them sharp at the often required 2x pixel size. But since you're explicitly using the 1x output, this shouldn't pose a problem.

             

            BTW: The Preference setting (in the Mac version) is an Apple-obligated menu command. But it's grayed out, because XD has no preferences. So you're mot missing out on something. There's just a Language setting, available from the Help menu.

              beibeian
              beibeianAuthor
              Participating Frequently
              May 21, 2020

              I did export with 100% quality for sure. 

               

              I didn't know that the way you import the image could affect the quality. I usually just drag in the photos. Can you give me a recommended importing method for the best quality image export?

               

              Here's the setting I have when exporting (same as yours):

               

               

              Dan Rodney
              Community Expert
              Dan RodneyCommunity Expert
              Community Expert
              May 21, 2020

              You always design at 1x size in XD, but if you're viewing on a 2x (Retina) display... you're still seeing the 2x quality when looking at XD. If you export for Design (1x) it will look pixelated when compared to what you see in XD. If you export for Web (1x and 2) it will export an image as both 1x and 2x. The 2x will be sharper.

               

              Both 1x and 2x are meant to be viewed at the same size... but the extra pixels that make up the 2x will create a sharper more detailed image when viewed on a 2x monitor that is capable of showing the additional information.

               

              For importing images, what matters is how much they are scaled after importing them.

              • JPEGs dragged in from the desktop (or imported using File > Import) will automatically be scaled down (by XD) to 50% size, which makes them Retina (2x) quality. 
              • All other formats PNG, GIF, PSD, etc. will NOT be scaled down to 50% automatically so they start only as 1x. You must scale them down to 50% size to make them 2x. 
              • I wish XD didn't apply different scaling to various file types. I think everything should be automatically scaled to 50% so it's 2x (Retina), but for now the above is just a quirk you need to be aware of.
              — Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
                Ares Hovhannesyan
                Community Expert
                Ares HovhannesyanCommunity Expert
                Community Expert
                May 17, 2020

                It depends how XD renders original images that depends on image size.

                Please review this convertion https://community.adobe.com/t5/adobe-xd/adobe-xd-showing-up-blurry-when-sharing-for-review/td-p/10563541?page=1 

                 

                Hope this will help

                beibeian
                beibeianAuthor
                Participating Frequently
                May 21, 2020

                Thanks for linking. But the images I brought in are actually not that big, within the normal range. They're not exported from the photoshop either. The thing is: this problem happens with all the images I exported with XD.

                E
                Engr Abdul Rehman5E2F
                Participant
                June 30, 2021

                Hello Everyone,

                I want to ask a question regarding product image size. I am new to adobe photoshop. I want to resize my product images. Kindly tell me the easy way to do this

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