Skip to main content

Exporting rules

We need to think about the loading speed, and the image's quality. so, we need to think what format is the best for each image.

For supporting high resolution display​

  • We should export SVG image for Logo, Icon and such as simple path images
    • If those images are not created by Vector images, please let designers to know
    • If there is no Vector images, we should export 2x images of JPG/PNG
  • Smaller than 600px in design data, we should export 2x images of JPG/PNG
  • If the images are same ratio with PC and SP designs, we should use same image
  • If we need to use separated image for PC/SP, we should use <picture> tag for it

Image format​

JPEG (.jpg)​

  • JPEG format is using a lossy compression method, and not support transparency color.
  • If the image has a lot of colors, JPG compression makes it smaller than PNG compression, so you should choose JPG format.
  • You should export JPG images with quality 80% (0.8), unless you have special reason.

PNG (.png)​

You should choose PNG format when you need translucent expression.

  • PNG format is using lossless compression method, and support transparency color.
  • Recently, PNG format supported animation also (APNG), but several browsers are not supporting APNG format yet.

SVG (.svg)​

You should use SVG format for the graphics made by combination of simple paths (e.g. Logo, Icon)

  • SVG format is vector-based graphics unlike other format, so SVG format does NOT lose any quality if they are zoomed or resized
  • SVG has gradation functions but it's not supported on some of browser yet
  • When SVG file has complex paths data, there is a possibility to effect to browser performance
warning

When you export SVG image, be careful about "text" element. If it's included, convert to path before exporting.

Webp (.webp)​

  • WebP format is modern format that provides lossless and lossy compression for images on the web.
  • Can't export from XD directly, so please convert JPEG/PNG/GIF to WebP through convert:webp task runner.
info

We will support WebP format by using .htaccess file, so you don't need to implement <picture> tag for WebP format.

Other format​

warning

We won't use the following format.

GIF (.gif)​

  • GIF format is also using lossless compression method.
  • GIF format is able to include only transparent color, not translucent color.