Questions about pre-flighting and getting sharper images from XD to the Browser

[daniel@cast-soft.com]

Hello!

I'm trying to get sharper raster images for retina and responsive in XD.

A couple of questions:

1-Let's say I want to import an image that is 1000 x 1000 PNG in XD and you want to export to 1x and 2x web (for retina).

My understanding from this article: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703 is that you need to prepare the image in 2000x 2000, import into XD, resize to 1000, then export 2x, which will give you a sharp image for Retina. However, what if your layout changes and you create a circle and clipping mask? If your circle is 300x300, then the 2x size will be 600x600. Do I need to go back to photoshop and prepare the original image again to be exact 600 and re-import to XD and replace it into my mask?

2-Does the aspect ratio of the image affect the quality when the browser resizes the image in responsive? Should I avoid images that are not divisible by 16 or 8?  I know that when creating videos for the web in mp4 format H264 codec) if your web video is not following a common aspect ratio to resize, chrome will render the video in a fuzzy way. You need to chose common aspect ratios of 16:9 aspect ratios 1920x1080 1600x900 1440x810 1280x720 1024x576 768x432 512x288 so the resized size will be a multiple of 16 (because that's how the H264 algorithm stores the data and to avoid pixels getting cut in half). That means you should never create a video that is 1280x199, but if you need to create something that looks smaller you need to use a trick such as using a background in the video that matches the website background. I understand this might be a web design question and might be outside the scope, but I'm trying to understand how to prepare these raster images in XD a proper way to my final product is not fuzzy but as sharp as possible when you are doing responsive web.

[Kenneth Kawamoto]

If you save a XD file with a 2,000px image, then resize the image to 20px and save as another XD file, the file size gets smaller. This means the XD file with scaled image hasn't got all the pixel data from the original image. Having said that, I don't think XD discards all the unused pixel data - when you scale up the said 20px image back to 2,000px you won't see a pixelated image but something closer to the original. So, I think it's safe to export @2x image as long as it's not exceeding the original image size - but Adobe needs to confirm here!

[elainecc · Accepted solution]

I'm glad the article was helpful! To answer your questions:

1. You can reuse the same image. Preflighting for bitmaps is useful for file size, but not required. We actually optimize under the hood for repeated use of the same image, so if you have the same image in multiple locations at different sizes, it's actually to your advantage to just reuse the highest res bitmap all over the place, since we only save the bitmap once and reference it multiple times.
2. Aspect ratio doesn't affect web the same way as it does for video, but you do need to think about whether or not your image is going to scale or simply change location when it resizes. For the latter, you can have a large logo that simply changes its relationship to the page when you resize down, and then switches to the smaller logo when it goes to mobile.
   For the most part, images on the web scale down fairly well from higher resolution to smaller size, so unless you really need the crispness, you can go ahead and use images. If you have smaller elements like icons, you should see if you can export as SVG to ensure it's crisp at all screen sizes.

Hope that helps!