Something I use every day —
Bandwidth is a huge concern in modern web development. Many web designers are accustomed to designing sites responsively for smartphones and tablets, but the importance of file size and bandwidth usage often gets overlooked. When you’re designing a responsive site that’s going to be viewed on devices via a cellular data connection, load times and file sizes are big concern. ImageOptim is a fantastic addition to your optimization arsenal. It compresses images in an intelligent way, often reducing file sizes by more than 75% in my experience, and handles PNG, JPEG, and GIF animations.
But I already used “Save for Web”!
Image Optimization is a complex and often misunderstood subject (which I plan to address at length in a future post). Even experienced web designers often think that using Photoshop’s “Save for web” feature is enough, or think that an image cannot be compressed beyond Photoshop’s capabilities without sacrificing quality. In fact, a number of CLI applications exist to do just that, intelligently compressing images without any loss of quality or features (like transparency). The problem is that, for many designers, the command line is an off-putting, mysterious place. ImageOptim ties these CLI applications together in a GUI, allowing you to simply drop in a single image, a selection of images, or even an entire folder (with subfolders), and process each of them with the best tools for the job via a single mouse click. I have even developed a (possibly bad) habit of dropping entire web project folders in ImageOptim.
While ImageOptim isn’t everything you might need to minimize file sizes and bandwidth usage, adding it into your workflow will have a drastic effect on load times for your projects.
This post is the third in a series where I discuss a few of the tools I couldn’t work without.