Menu
How to
Optimise your images
Fast loading pages are an essential part of a good user experience, making for a lag-free journey as well as reducing the user’s data costs. Images are often the heaviest part of the page in terms of file size, so it’s crucial that we ensure they are as lightweight as possible.
Optimisation can be done in a number of ways, both lossy and lossless. Lossy refers to decreasing the file size by reducing the quality of the image, whereas lossless uses alternative, more elaborate methods to maintain the quality and restructure the file to compress it and strip out non-required data.
Image file types
Web images can be either bitmaps, such as JPEG, PNG and GIF, or vectors in the case of SVG. Bitmaps are essentially a collage of different coloured pixels whereas vectors contain code that describes how to draw an image. For example, for the flag of France a 300px × 200px bitmap would contain a table stating that for the top row of pixels in the image, pixels 1 to 100 should be blue, 101 to 200 should be white, and 201 to 300 should be red. This is the repeated for each row.
With a vector, the file contains information saying “create a rectangle with an aspect ratio of 3:2, within this create another three rectangles, each one the height of the parent rectangle and one third of the width. Make the first one blue, the second white, and the last one red”.
For basic shapes and illustrations or icons, vector formats are smaller and have the benefit of scaling without becoming blurred, but the more complex the image, the more code is required and the file size can quickly overtake that of a bitmap, which is why SVGs are not used for photographs.
Optimising bitmaps
For PNG and GIF files, ImageOptim is our preferred tool of choice. This is super simple to use - just install the app then drag and drop your image file.
For JPEGs, the most important aspect is to make a good compromise between image quality and file size when exporting. JPEGs have a variable quality option which is usually either a scale of 1 to 10, or a percentage. 10 or 100% is maximum quality but largest file size, 0 is the worst quality but smallest size. An appropriate quality setting will vary depending on the image, but around 60% is a good start. Some reduction in quality won’t be noticeable to most people.
As a secondary step use JPEGmini. While ImageOptim is capable of processing JPEGs, JPEGmini is much more effective.
Example, 2500px × 1667px photograph 100% quality
| Original | 1.7 MB |
|---|---|
| ImageOptim | 1.6 MB |
| JPEGmini | 1.1 MB |
Example, 2500px × 1667px photograph 60% quality
| Original | 383 KB |
|---|---|
| ImageOptim | 364 KB |
| JPEGmini | 334 KB |
Optimising SVGs
The first thing to be aware of here is that Sketch is not very capable when it comes to generating lightweight SVGs. Adobe Illustrator is much more efficient in this respect so SVGs should be either created in Illustrator, or opened and re-saved in Illustrator when created in Sketch. Be aware that Sketch can use some unusual methods when saving SVGs and they might not look as intended when opened in Illustrator so some clean up may be required.
After exporting from Illustrator, they should be optimised with ImageOptim. Note also that SVGs directly exported from Sketch then ran through ImageOptim may show the same glitches as described above.
Example, Surfer scene
| Regular export from Sketch | 1 MB |
|---|---|
| Sketch then ImageOptim | 674 KB |
| Sketch then opened and saved in Illustrator | 386 KB |
| Sketch then Illustrator, then ImageOptim | 214 KB |
Large savings can be made even with small files.
Example, calendar icon
| Regular export from Sketch | 2 KB |
|---|---|
| Sketch then opened and saved in Illustrator | 1 KB |
| Sketch then Illustrator, then ImageOptim | 671 bytes |