Highlighted

Images become pixelated in browser when sharing prototype via link

Community Beginner ,
Apr 29, 2020

Copy link to clipboard

Copied

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

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

Topics

Share or publish

Views

695

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Images become pixelated in browser when sharing prototype via link

Community Beginner ,
Apr 29, 2020

Copy link to clipboard

Copied

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

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

Topics

Share or publish

Views

696

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Apr 29, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 29, 2020

Copy link to clipboard

Copied

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

This is how it looks on my screen: Skærmbillede 2020-04-29 kl. 17.37.07.png

I'm working on macOS High Sierra v. 10.13.6
The XD version is 

Version: 28.7.12.4

Creative cloud syn 4.3.36.1

 

Thank you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Apr 29, 2020

Copy link to clipboard

Copied

Thanks for sharing the link and the additional information. Would you mind zooming out the link to 100 % and see if that helps?

 

Thanks,

Harshika

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 30, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
May 01, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
May 05, 2020

Copy link to clipboard

Copied

Hi Milled,

 

The team would like to further investigate on this. Is it possible for you to share the XD file with me over a private message? You may upload the file to a shared location such as Creative Cloud or Dropbox and share the url with me over a PM.

 

Note: Please share the link of this post for reference.

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
May 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
May 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
May 07, 2020

Copy link to clipboard

Copied

Hi Venca,

 

We are sorry for the trouble. 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.

 

We request you to please don't use the images with an area larger than 2048x2048 in a design.

 

Hope it helps.

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...