9 Replies Latest reply on Jun 23, 2017 1:26 PM by perrybrus

    Image file size

    perrybrus Level 1

      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?

        • 1. Re: Image file size
          Preran Adobe Employee

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

           

          Thanks,

          Preran

          • 2. Re: Image file size
            Preran Adobe Employee

            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.

            • 3. Re: Image file size
              perrybrus Level 1

              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.

              • 4. Re: Image file size
                Colin Holgate MVP & Adobe Community Professional

                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.

                • 5. Re: Image file size
                  perrybrus Level 1

                  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.

                  • 6. Re: Image file size
                    elainecc Adobe Employee

                    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

                     

                    1 person found this helpful
                    • 7. Re: Image file size
                      perrybrus Level 1

                      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.

                      • 8. Re: Image file size
                        Colin Holgate MVP & Adobe Community Professional

                        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.

                        1 person found this helpful
                        • 9. Re: Image file size
                          perrybrus Level 1

                          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.