File Formats

You can export images from Sketch to a wide variety of file formats including bitmap, and vector filetypes. Each have their own benefits, depending on where they are used.

Sketch documents are saved as their own SKETCH file format, and can only be opened in Sketch itself. But when you only want to share certain areas of a document—that can be viewed in virtually any application that can display images, then you must export from Sketch to one of the filetypes below.

Bitmap

Bitmaps, (or raster) images are made up of pixels on a grid and are the most common type of image due to their wide support. These are ‘flattened’ meaning when opening them up in an app like Sketch, they display as one layer.

  • PNG: Outputs a high-quality image and supports transparency.
  • JPG: A common file format associated with large images and photos. The quality can be adjusted on save, but does not support transparent pixels.
  • TIFF: Similar to PNG in many ways, but used by some operating systems. As these images are not compressed, they tend to have large file sizes.
  • WebP: A new image format created for images on the web that are smaller, and richer. Transparency is supported, and file sizes can be 3× smaller than PNGs.

When exporting images in a bitmap format, you will have further export options in the system Save dialog depending on the file format. Adjusting any of these options will decrease the file size of the saved image, but may also decrease its quality.

  • Save for web: This will strip out additional file data that is contained on some images, such as EXIF metadata, and color profiles.
  • Interlace PNG: When used on the web, an interlaced image will load at its intended size, as soon as possible, whilst successively downloading more data until it is at its full quality.
  • Progressive JPG: Similar to an interlaced PNG, when loading on the web, a JPG will progressively load at its full size from a low-quality, blurry image becoming sharper on each successive load.
  • Quality: Found on JPG, and WebP images, you can adjust the exported image’s quality to make the file size smaller, but this will impact the look of the image.

Vector

Vector images have existed for a long time, but are becoming more common place in web, and mobile design due to the number of screen resolutions that are available today. Layers and paths are preserved, meaning they can be freely edited and scale to any size without losing quality.

  • SVG: Stands for “Scalable Vector Graphic”, a format most commonly found on the web as the image is generated in code. Code which can also be copied straight from Sketch.
  • PDF: The most common type of vector format typically associated with documents. Applications now tend to use PDF images for assets and simple icons.
  • EPS: Commonly used for print design with some additional features, but a filetype that has mostly been superseded by PDF.

Note: Some effects you can perform in Sketch are not supported by all vector file formats, including transparent gradients in PDFs, and inner and outer borders in SVGs.