Known Participant

Answered

Images become pixelated in browser when sharing prototype via link

Forum|Forum|5 years ago
April 29, 2020
6 replies
12500 views

What is going on with this? I've imported a PNG image from photoshop, and pasted it in XD, inorder to share the web design. When i preview the design in XD, it looks fine. When I click share, and click the share-link the image becomes all blurry and pixelated, when I view it in the browser. What can be done, this is not an acceptable way to share my design

Share or publish

This topic has been closed for replies.

Correct answer HARSHIKA_VERMA

I havn't zoomed in anywhere, the width and viewport height ratio just doesn't match optimally. It's one full picture that I've uimported into XD. I've decreased the viewport height now, so the prototype now has a better fit to the browser. The picture is still pixelated and in bad quality.

https://xd.adobe.com/view/aa323026-fded-49e1-629a-fb6ed11744a7-dc03/?fullscreen

Thanks for sharing the link. I have checked with the team regarding this "The reason it’s getting pixelated is because when we share we have to limit all bitmaps to being under WebGL’s max texture size. For the devices we support the common denominator is 4096x4096px. Because we export at 2x that becomes 2048px."

In order to avoid the situation it's suggested to don’t use images with an area larger than 2048x2048 in a design.

Hope it helps.

Thanks,

Harshika

F

Fazal3611789141t1

Participant

If you are adding an image, you should divide the section so that each part is under 2048px in height. Once divided, you can add each section to your artboard. I hope this resolves your issue!

PlanetFab

Participant

You USED TO BE ABLE TO include LONG IMAGES that would display correctly. Why the change?

Radgravy

Participant

@PlanetFab I also discovered that right-click on the long image allows us to Edit in Photoshop. There I split the image into sections, select a portion at a time, and copy and paste it over the long image in XD. So far this has been helping me.

@HARSHIKA_VERMA - Any update and is it possible to separate the portions of the long image in Photoshop in layers, then save in PS, so that it automatically updates the XD to replace the long image (versus having to manually do it)? Thank you in advance!

mariuszp11664469

Participant

I had that issue too, and the solution is simple. If you have large images, like “long” site projects, all you need to do is to cut your project to smaller pieces (in Photoshop for example), and then put them together in “design” section of Adobe XD (separate pieces of your project, one by one, they should look like complete site again). After that, everything should be less pixelated in preview mode on your browser.

Radgravy

Participant

I GOT IT TO WORK!

Thank you mariuszp11664469 and hello everyone!

I'm presenting before and after mockups of a webpage. For the current page, I took a screenshot using the Awesome Screenshot CHROME extension. In Photoshop I used the marquee tool to select sections of the original screenshot, and then piece them together in XD (as mariuszp11664469 mentions). Since my original screenshot is incredibly tall/long, I only did two sections, plus one long section. In the presentation/shared link, I could see how the smaller sections came out as good! Then the super tall section came out of course pixelated.

Design artboard width in XD: 1215px

When I brought my portions over from Photoshop, I had to downscale to fit the 1215px width.

My portions are taken from PS (using the marquee tool and selecting sections of the overall screenshot): size at about 1354px x 1244px. I figure we can eventually figure out how tall we go of sections that we can bring over to XD.

Hope this helps!
HARSHIKA_VERMA, Hopefully soon an update so we don't have to do this?

@keypromptninja

Participant

Thanks!

S

sunshineafterthejane

Participant

I love the mark-up capability from the browser and my team has been using it to get feedback from the team. However, it's unfortunate because this means we cannot get feedback for projects that are larger in size (i.e. visual merchandising projects). Does Adobe have plans to increase the max texture size?

V

Venca_p

Participating Frequently

Hello,

lately I have a problem with poor image quality during the presentation of the prototype. All images are blurred compared to vector graphics. It occurs to me that during export, the images are resampled.

For a better example, I attach a screenshot. The top highlighted text is the image, the bottom text is the text directly in the XD. The difference is really known.

https://monosnap.com/file/ok2wZSSwGlD73eUy0hylQ5SxI4NOTd

I use XD 28.8.12.1 and Windows 10

Thank you for any help

italosan

Community Expert

Hi, by chance this problem occurs only with a specific file or also with other files?

V

Venca_p

Participating Frequently

Hi italosan,

thanks for your reply. The problem occurs with all documents that I export.

I tried import bitmaps with @2x size and the quality is better. The problem occurs when I want to capture screen of website and I don't have retina resolution. Captured screens of websites that are in @1x resolution then look blurry.

So... I don't know how to solve this.

HARSHIKA_VERMA

Community Manager

Hi Milled,

We are sorry to hear you are having trouble with the images view in the prototype link. Would it be possible for you to share the link with us so that we can check at our end? Which operating system you are working on? What is the XD version you're using?

We will try our best to help.

Thanks,

Harshika