Skip to main content
P
perrybrus
Inspiring
June 17, 2017
Answered

Image file size

  • June 17, 2017
  • 3 replies
  • 11063 views

In Xd demo's images are directly placed into containers from its original size to be automatically resized in the container when you place it, but how much image size does this add to the project file? Does Xd compress or "redraw" images so they don't carry the original weight? If I throw a bunch of large highres images into thumbnail sized containers in my layout, does this add the original file size and does it slow down the prototype when its published and shared on the Adobe server?

Correct answer Colin Holgate

That still doesn't tell me much. If I place a 2mb image file into a thumbnail container, will that image be subject for data compression so it weighs less? All I see is an image getting auto rescaled into the container, but I don't know if the image data is identical. My prototypes feels load heavy.


There was an update today that changed things slightly. This morning images were published at 1X, and with the update it publishes at 2X as Elaine said.

It's PNG by the time XD is finished with it, even if the source images were JPEG. Whether that then is bigger depends on the nature of the image. In my test I placed a 1.3 MB JPEG and tested the link again. The shared image was a 300k PNG. If I made the 1.3 MB JPEG fill the iPhone 6/7 screen, the PNG was over 900k. So in my cases the files were smaller, but if it had been a photographic image it would no doubt be bigger as PNG than JPEG.

Something I haven't worked out yet is how to download your whole prototype for offline viewing. If that is possible to do you could do further image optimizing on the published files, then upload them again.

3 replies

S
Soumyadip
Participating Frequently
November 30, 2021

When I am exporting the assets and generating a link for developement, the developers are coming back to us saying the images are too large for web pupose. So we ar downloading all the assets and reducing the file size with the help of Tiny PNG. Is there any solution for this?

    Jared Eddy
    Jared Eddy
    Participant
    February 8, 2022

    Dev here, working with my designers to resolve this issue as well. It appears that Adobe XD does not in any way shape or form optimize images on import or export by default. Even when using the "Web" size option on export. This simply gives you a 1x and 2x version of the original image size. We noticed that a 40 page web prototype with images can take a literal 5 minutes to open due to the importated image files original size being multiple MBs. Exporting images as JPGs with a reduced quality percentage, such as 80%, does seem to improve compression but PNG's are still impractically large for web use. Short of optimizing all images for web before placing them into Adobe XD there's no solution for the performance hit you'll see importing high-res imagery. Consequently this also effects export file sizes. Since XD is Adobe's answer to the demand for better UI/UX prototyping software, this feels like a dissappointing oversight to the product in my opinion.

      Preran
      Community Manager
      PreranCommunity Manager
      Community Manager
      June 21, 2017

      Copying from Elaine's blog post https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703 that provides insights to your question.

      The solution to this is something called preflighting — editing your bitmap to be the maximum size you need before you import into XD. In the case of a web hero image, if your image spans the entire width of a 1920 x 1080 artboard, you’ll want to ensure that your image is exactly 3840 pixels across.

      If you’re designing for iOS, and designing at 1x, you’ll want to make sure that you bring your images at 3x, and for Android, 400% (or 4x).

      What about designing at the larger size, though? In this case, you’ll be worrying about your vector artwork. You have to ensure that every one of your lines and shapes can be displayed properly at each export size if you’re exporting bitmap images like PNG. If you have a line that has a width of 1, XD has to guess if it displays when you take export at a third or a quarter of the size.

      If you don’t want your vectors to be fuzzy on export to bitmap due to anti-aliasing, you’ll need to ensure that all your border widths correspond correctly to the export sizes, but you won’t need to worry about your bitmap sizes, because scaling an image down is always more accurate than scaling up. And of course, your vectors will remain crisp if you export as SVG.

      P
      perrybrusAuthor
      Inspiring
      June 23, 2017

      Hi, this is not addressing my post I'm afraid. I'm talking about image compression and algorithms that removes image data to reduce page load. Please read my explenation again.

        Colin Holgate
        Colin Holgate
        Inspiring
        June 23, 2017

        I did a test where I placed a large image, and did an export as well as create a link. In both cases the image was published at the device size, a lot smaller than the original picture. I could go back to the XD file and resize the image to be large again, the quality was still there. Any of the image off the edges did not appear in the published files.

        So, it seems to only save the pasteboard visible part of the image, and at the pasteboard size, not the original image size.

          Preran
          Community Manager
          PreranCommunity Manager
          Community Manager
          June 21, 2017

          I am checking with the team. Will get back as soon as I have an update.

          Thanks,

          Preran

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