Introduction

To cater for retina displays, it is always necessary to export the XD images to 2x size. This article outlines the steps to export JPG and PNG with transparent background. The exported images are then compressed to smaller size using different tools.

Steps

JPG

• If the XD image has NO transparent background, export it in JPG format.
• Delete the x1 image.
• If the exported size > 150KB, use the software RIOT to compress it to smaller than 100K as far as possible :
  • Quality = 60 ~ 80
  • Subsampling = 4 : 2 : 2
  • Progressive = disable
  • append the term ‘-riot’ to the filename, (e.g., xxxx-riot.jpg)

PNG

• If the image has transparent background, export it in PNG format
• Delete the x1 image
• If the exported size > 200KB
• Compress the image with the below online tool.
  • compresspng.com
• If the compressed file size is still too big, the next attempt is to use GIMP to fill the transparent background with the section’s background color.
• In GIMP, export the image in JPG format and compress it to smaller than 100KB.
  • Quality = 60 ~ 80
  • Subsampling = 4 : 2 : 2
  • Progressive = disable
  • append the term ‘-gimp’ to the filename, (e.g., xxxx-gimp.jpg)