Image file size

[perrybrus]

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?

[Preran]

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

Thanks,

Preran

[Preran]

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.

[perrybrus]

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]

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.

[perrybrus]

Hi, thanks for the input. That's interesting but I'm trying to find out if Xd compresses the original file when it's placed into a smaller container. I'm not talking about the visual size of things, cause that's obviously automated but I'm talking about the data content and the page load in itself. In other words, the process that takes place when you place a large highres image file measuring in at lot's of megabytes into a small container and publishing this as a shared prototype. Will the automated rescaling also remove image data and make the total data load less? If I only use highres images in a prototype that load would be pretty large quite fast if there are no image compression going on. If Xd defines every image as the original I mean.

[elainecc]

The answer to your question is: we flatten out the images, so we do resample and publish at 2x the size of the artboard.

-Elaine

[perrybrus]

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.

[Colin Holgate · Accepted solution]

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.

[perrybrus]

That's some good points. I'm a tad skeptical when all the Xd demo's shows people slapping large image files into small image containers in their UI, surely that must add loads to the prototype and I believe it does if every bitmap file is converted to lossless format - even if the original was lossy. And the compression algorithm is still a mystery. Thanks for sharing your experiences. Seems to me that Adobe has a lot of ground to cover.

[Soumyadip]

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]

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.