Optimize your assets (with plugins)

Photo of Christian Krammer

by Christian Krammer on

As you can imagine, writing The Sketch Handbook took a great deal of my spare time. Luckily the first draft is finished, and so I have more resources on hand again. That’s why I’m finally back with a new Sketch tip, with more coming along the way in the next weeks.

In times when websites grow bigger and bigger, it becomes more important than ever to keep the file sizes of your images as small as possible. Sketch can help you here: the two official plugins Sketch Image Compressor and SVGO Compressor take care that your assets are automatically optimized when exporting. You don’t need to do anything at all, except clicking on “Export”.

Screenshots of the git repositories of 'Sketch Image Compressor' and 'SVGO Compressor'

While the former deals with PNGs and JPGs, the latter makes sure that SVGs leave Sketch in a compressed state. These plugins do a great job out of the box, but there are more options available: you can export all assets at once with “Plugins › Sketch Image Compressor › Export All Assets” from the menu bar, or tweak the settings for SVGO Compressor with “Plugins › SVGO Compressor › About SVGO Compressor” and “Edit SVGO Settings…” Don’t be afraid that these little helpers alter the image quality in any way: all of that happens in a lossless manner.

Screenshot of ImageOptim with 'photo.jpg' already compressed

But that’s not all you can do: the external tool ImageOptim takes it even further and gives you the smallest possible file sizes. A neat trick for JPGs is to save them at a lowered quality, but at the double dimensions (your are doing that anyway for retina images, right?) Say you have a 800 x 600 px image: after you have defined “2x” at the “Size”, click on “Export” and set the ”JPG Quality” to a very low level – something between 30% and 50% – in the save dialog. This gives you an image with the dimensions of 1600 x 1200 px, but at a very small file size (and a poor quality, unfortunately). Now when you insert the image in your website, use the original dimensions 800 x 600 px. This makes sure that you won’t notice the decreased quality level at all.

Screenshot of Sketch, which a JPG set to '2x' for exporting and the save dialog with the quality slider set to '40%'.