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?
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.
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.
@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.
I can imagine this behavior not per se being a bug – the triggered compression helps to bring down excessive image files, in order to speed up the downloading and rendering of a preview.
I have put up an XD file for previewing with Specs, so you can see the effect and also download the original images. https://xd.adobe.com/view/a7e1b3cf-ff65-4011-4198-40d089d56fd6-d1d0/
Can you work with what Peter supplied you with (below)? The images I was using are not something I can share publically as they were for a client I'm working with under NDA and are sensative material.
Here is my OS: Majave Version 10.14.6
Here is my XD version: 184.108.40.206 (Starter), Creative Cloud Sync 220.127.116.11
Sure. I will check and work with Peter to get the sense of what is happening.
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 ?
@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.