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:
- Free (ie Tiny PNG was out)
- Compression to 20% - 40% of original file size (I was aiming for file size of 150-250kb for full size PNG images)
- Minimal degradation of images
Here’s the solution I settled on:
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
- 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.
- 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)
- Export from Sketch at following values 0.5x (default large image) and 0.2x (small version).
Image compression: Imageoptim
- Download & install Imageoptim - the image compression application.
- In settings: enable lossy minification then set PNG compression ~ 60%
- 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|
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.