Skip to main content
K
katiem68572435
Participant
March 20, 2020
Answered

[Import & Export]-Importing images for XD prototyping

  • March 20, 2020
  • 2 replies
  • 1039 views

Hi,

 

I'm trying to import high res mobile comp images (exported from photoshop as PNG) purely for the purpose of mobile prototyping within XD. When I do this the prototype on my desktop looks fine but once I open the link on my mobile device it's slightly pixelated. The image size is 375x13000 and I know the the resolution is high enough etc. 

 

The only way around this issue that I've found is to cut the image up and save out (via photoshop as multiple PNGs) then stack them in XD...then the prototype looks fine. I've read a few support posts that suggest the file size height needs to be under 16000 ... which mine is. So I'm not quite sure why I can't just upload the single image into XD and get a clear graphic prototype.

 

Are there limitations with aspect ratio? Or am I doing something wrong?

This topic has been closed for replies.
Correct answer HARSHIKA_VERMA

@Harshika - any advise or guidance on your end?


Thank you for sharing the additional information and thank you Peter for testing and confirming that this an issue. I will share your feedback with the team. I would request you to please share a sample file with me so that I can log a bug for the issue. I'd also request you to please share the OS and XD version of your machine for more information on the bug.

 

Thanks,

Harshika

2 replies

Peter Villevoye
Community Expert
Peter VillevoyeCommunity Expert
Community Expert
March 24, 2020

I just tested importing a rich-detailed PNG of 375 pixels wide and over 18,000 pixels high. The resulting image is a whopping 16 MB, so that should bring it down and really push some limits (saving the file and creating the link already took quite a while).

 

The preview was in deed horribly blurred, as you can see below. So my first guess (wrong) was that the file needed to be limited/compressed to a certain internal maximum file size, causing such a large image to look really bad.

 

 

As I cropped it to a few hundred pixels high, resulting in a much smaller file size, the result also immediately improved:

 

 

Then I changed the content of the 18,000 pixels high image to a very easy to compress painting (only 320 K file size), but the result became blurry again:

 

 

So my final verdict is that the height of the image counts, and will be scaled down (internally) to a certain maximum height, and scaled up again in the preview. How high that maximum is, could be detected by probing. But maybe some one from the team can simply report the exact number...

 

Judging by the enlarged comparison, I'd say it was scaled down to and up from less than a fourth, so maybe 4000 is the maximum ?

 

    K
    katiem68572435Author
    Participant
    March 25, 2020

    @Peter - thanks! this validates what I was running into as well. I second your comment about getting confirmation from Adobe of that pixel height if that's a limitation.

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    March 24, 2020

    Hi there,

     

    We are sorry to hear you are having trouble importing images in XD which got pixelated when opened the link on browser. Would you mind telling if it's happening with this specific file or with all the files? Have you tried it on a different mobile device? Which mobile device are you using? Have you tried to open the link on a different browser on mobile?

     

    The above asked information will help us in investigating more about the issue so that we can check at our end.

     

    Thanks,

    Harshika

    K
    katiem68572435Author
    Participant
    March 24, 2020

    Hi,

     

    Thank you for the response! Here are the responses to your questions:

     

    Would you mind telling if it's happening with this specific file or with all the files?

    This happened with all the files myself and a collague tried (different files for each project). I exported JPGs as well as PNGs from my photoshop file and imported them into XD where I then clicked the prototype link to share a faux mobile preview of a page of the site we're building. With JPGs and PNGs' the prototype was pixelated. 

     

    Have you tried it on a different mobile device?

    Yes, we've tried this on 3 different devices...all iphones from different models. Iphone 7 & 8.

     

    Which mobile device are you using?

    I'm personally using the iphone 7 plus.

     

    Have you tried to open the link on a different browser on mobile?

    No, we're all using the native safari browser from our Iphones. However, I tried chrome on my desktop and the issue persisted there as well.

     

    Best,

    Katie

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity ManagerCorrect answer
    Community Manager
    March 26, 2020

    @Harshika - any advise or guidance on your end?


    Thank you for sharing the additional information and thank you Peter for testing and confirming that this an issue. I will share your feedback with the team. I would request you to please share a sample file with me so that I can log a bug for the issue. I'd also request you to please share the OS and XD version of your machine for more information on the bug.

     

    Thanks,

    Harshika

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