Use ImageOptim For Fast Images
When wrapping up a web development project optimizing page load time is a top priority.
With modern web apps, optimizing for ‘Time to Interactive’ and ‘First Meaningful Paint’ can be even more important but that’s more complex and I’ll write about that in a future post.
It’s a well-known fact that having a fast loading page will increase conversions and promote users’ spending more time on your site [1]. Which is obviously important. The king of speed optimization, Google, stated that the majority of (mobile) users will abandon a site if a page takes longer than 3 seconds [2]. You don’t want your visitors to abandon you, right!?
One of the simplest things to do to help with page load is to optimize your image file sizes. There are a ton of ways to do it, but my favorite is to use a tool called ImageOptim. It can be used as a GUI app, or as a CLI version that is a pleasure to use and can be incorporated into your build & deploy processes. Some alternatives are using ‘save-as for web’ in Adobe products, or another web-based tool like Optimizilla.
Once you have your images optimized you can then attack more fine-grained optimizations like concatenating scripts, minimizing requests, etc.
Below is an example of the loading of an image that was optimized using ImageOptim — I stole this from their website.
As an additional note: I recorded this image with Giphy (my favorite way to quickly capture gifs) and then optimized it using ImageOptim so it would load fast for you here in this post. The screenshot below to show that using lossy compression (set at 90%) I shrunk the filesize a ton!
It really excels when working with multiple images
Faced with a folder of images it can be a real pain to optimize them. In the past I’ve opened every image, one-by-one, to tune it as best I can and save it out in Photoshop, then use a tool to strip metadata. Now with ImageOptim I can just drag an entire folder into the app, and it will use my settings to automagically use the most efficient compression tool to get the best file size, and then strip all metadata so when it’s all done you have the smallest possible file for your now production-ready image file. At this point this tool has saved be HOURS of monotonous work.
Some Details
ImageOptim is available for mac or as a web app and supports all of your standard image formats. There are also plugins for Wordpress and other CMS. It has simple preferences that allow you to fine-tune exactly what you want (see screenshot below). It’s a powerful tool that, if incorporated into your workflow, will help you handle the awfulness that is optimizing your image assets. For more technical details, check out their API documention.
