With the size of pages on the web steadily growing over time, you can do your part by optimizing images for your users.
If you were to hike up Mount Everest, it would help to keep your load light. Not only would your body thank you, but you would go farther, and you would be less likely to stop and turn around if the trail gets too difficult. Without excess weight to carry, it opens up opportunities that were once closed off.
Same thing goes for page weight.
When you optimize your images, you’re providing a better and lighter experience for all your users. Even though internet speeds are increasing on average, the reliability of those connections are increasingly varying as cellular service continues to expand.
Other than reducing wait time and respecting users’ data allowances, keeping an eye on file sizes can have another effect: reducing bounce rates.
Lara Hogan on the Path to Performance Podcast:
…we just dumped a bunch of hidden images onto the page and increased page weight by 160 kilobytes. It triggered a 12% increase in bounce rate. Insane. Twelve percent is a lot of percent.
Crazy! So how do we go about optimizing images?
Tools to Reduce Image File Sizes
Depending on what operating system you’re running, there are different tools for available to you. Here are online image optimizers that are available to everybody:
- Kraken.io (can do GIFs, JPEGs, PNGs, and SVGs)
- SVGOMG (can only do SVGs)
One thing to note! It’s not always a good idea to optimize SVGs. If you plan to script or animate the SVG, don’t optimize it. Visually, the SVG will look the same, but the resulting code will not. The optimizer will delete and change parts to squeeze out every byte it can.
If you’re on Windows, you’ll be best off taking suggestions from a blog post by Addy Somani, a Google Engineer.
I do have experience with tools available on Mac OS X though, and here’s my suggested setup for image optimization.
For rasterized images, use a combination of:
The order you use these tools matters. ImageOptim should always be used last in your workflow, because it uses lossless compression. If you run an image through ImageOptim before ImageAlpha or JPEGmini, you’re losing out on bytes saved.
Why these three particular tools? Because for a majority of use cases, they are consistently the best at optimizing file sizes while maintaining image quality.
If you’re comfortable with using a command line tool, ImageOptim CLI leverages all three apps in the correct order. It’s magical.