Unfortunately, optimizing images for web use is not always a walk in the park, especially if you have to deal with lots of them regularly. If you are a Mac user, there are several free tools that can help you minimize the trouble of preparing web images.
Acquiring The Images
I won’t go too far here since the topic has been discussed several times already. There are many ways you can acquire images for the web, from taking your own pictures using a digital camera, using Creative Commons licensed images, to screen capturing images on your desktop.
Resize & Rename Using ResizeMe
Most of the time, you won’t get the size of the images right the first time – either the image size (pixels) or the file size (bytes).
The limitation for the image size usually comes from the design point of view. You shouldn’t put a 600 pixel-wide image on a 500 pixel-wide blog column. It will go out of the border and make the appearance ugly.
To solve the pixel problem, you can either crop or resize the oversized images. I found a great tool called ResizeMe that can help you do those tasks – and a lot more – in bulk.
Using ResizeMe is as easy as dragging and dropping images that you want to modify into the file list.
Pick the action(s) that you want to apply to those images. In the image below I set the action to scale down any image wider than 580 pixels without modifying the height. I also set the action not to modify any image with a width smaller than the maximum width.
The app also allows users to crop images to their desired size. Cropping very large images into several smaller ones is favorable than resizing, because most of the times resizing will degrade the quality of the image and make the picture unclear.
If you use several images for every blog article that you write, it would be better if you organize the set by adding similar key words to their names. For example, images for an article about screenshot tools could be renamed into “scrnsht – image1“, “scrnsht – image2“, and so on.
You could use the help of Automator to batch rename images on your Mac, or for a more flexible renaming system you could try a utility like NameChanger. If you don’t want to use other applications, ResizeMe also comes with a file renaming ability. Just choose a function from the list, check the “Rename” button, and write down the instances that you want to be renamed.
Another Resize Using ImageOptim
Another size factor that we have to deal with is the file size. We need smaller image sizes while maintaining the picture quality. Most giant image manipulators come with the ability to make images web ready. But if all you need is to compress the size, you could use ImageOptim.
Similar to ResizeMe, using ImageOptim is also drag and drop simple. All the images that you drop into the app will automatically be optimized to the smallest size possible without sacrificing the quality. It does the magic by finding the best compression parameters and by removing unnecessary comments and color profiles.
The percent column will tell you how much bloat the app can eliminate from the images. The perfectionist can use the “Again” button to help them squeeze a few more percent out of the image size. You can push the button several times until the percentage column shows 0%.
By comparing the results, we can see that ImageOptim does its job well. Sometimes it can eliminate more than 50% of the image weight.
This is before using ImageOptim.
And this is after.
Although the figure equals to only a few kilobytes loss of image size each, when you add everything up, those tiny kilobytes could mean something to the overall site size and bandwidth.
What I like about this app is that it comes with a workflow. If you open the workflow with Automator and save it, it will be transformed into a Mac service. Since you can assign shortcuts to services, you can use the app faster simply by selecting images to optimize and hit the shortcut combination.
From my own personal experience, I can say that the combination of ResizeMe and ImageOptim has helped me save much of my time in preparing images for web use. But don’t take my word for it, try them yourself and share what you think in the comments below. And if you have your own favorites, fell free to share them also.