When it came time to refresh my site, I decided to redo all the images so that I had fresh, crisp shots of the sites and products I’ve been working on. Though I struggled to get what I needed from Sketch in terms of compression.

Most of the resources I could find were for Photoshop while the official image compression plugin I tried was slow and didn’t reduce file sizes sufficiently. After trying a whole bunch of things, I’ve found something I’m happy with.

Here was my criteria for image export and compression:

Here’s the solution I settled on:

Device frames

Facebook http://facebook.design/devices. They’ve got more devices here than I’ll ever need. Top job.

Hot tip: skip faffing around with the sketch files, layering your shots inside the device, and just use the PNGs of the device frames they exported for you. Much easier.

Sketch export settings

  1. If you’re working with large screens, export your screen shots at 1x (assuming you’re designing at 1x, which seems most sensible approach for now). If you’re working on mobile stuff, export at 2x. You’re looking for image dimensions where the long edge is 1200 - 2000px. Anything bigger and it become difficult to compress the image down to a sensible size without losing quality.
  2. If you need to, scale the Facebook device frame to fit your screen exports Tip: You can do calculations in the size field. (See below)
  3. Export from Sketch at following values 0.5x (default large image) and 0.2x (small version).
sketch calculations
sketch calculations
Sketch export Settings
Sketch export Settings

Image compression: Imageoptim

  1. Download & install Imageoptim - the image compression application.
  2. In settings: enable lossy minification then set PNG compression ~ 60%
  3. Then just drag and drop images you want to compress in to ImageOptim and you’re off.

Here are the results I’ve been getting

Image size Pre compression Post compression
Large 247KB 52KB
Small 16kb 5kb
demonstration of Imageoptim compression
demonstration of Imageoptim compression

For more representative results, where the screen shots are more detailed and the PNG size in larger, these are the results I’ve been getting.

typical results from imgoptim
typical results from imgoptim

Happy exporting 🤓 !