When it comes to page performance, the file size of the images we use is one area to keep a close eye on. Images can enhance a page, bringing it life. But they also weigh it down if we’re not diligent about watching how large our files are.
The trick is to keep the images at high enough quality that they look good, but no higher. For instance, if the quality of a JPG compressed at 60% isn’t much different than one compressed at 80%, but it saves us a 100k, than it would be worth compressing the image to the lower number.
Here’s a list of a few apps I use on a regular basis to help optimize images. (Note: Since I typically use a Mac, a couple of these will be Mac only apps).
-
Although not as popular as its cousin Photoshop, Fireworks does a great job when it comes to exporting files for the web. In a recent test, I opened the exact same file in both programs, and found that the Fireworks was far superior in saving the same file with the same settings. For instance, Photoshop reduced the file size to 79k and Fireworks reduced it to 39k for the exact same image saved as a JPG at 60%.
Using the ‘Image Preview’ option, you can adjust the format of the saved file, as well as the quality. Since there is a preview, you can see what the resulting file would look like in real-time, which is helpful in deciding how much to compress an image.
-
ImageOptim is a great all around tool for doing quick optimization. You simply drag and drop the images into the app and it will optimize them. By default, its compression setting is set to lossless, meaning it will optimize the images without changing a pixel. This can be changed to lossy, which provides even greater savings, but the quality will also be affected.
I’ve found this a great tool for running images through before they get uploaded, just to ensure that any quick optimizations are performed without affecting the quality.
-
ImageAlpha is a tool for getting optimizing transparent png files. It does an incredible job of minimizing the size of a file while maintaining the transparency. Unlike the other programs above, this tool has a very specific niche – transparent png file. But if you’re working with these kind of files, it can be super helpful.
There are countless other tools out there. These are just a few that I use on a regular basis. Ultimately, the goal is to reduce file size without sacrificing too much quality. And these tools have been helpful to me in achieving that goal.
Are there any tools that you use on a regular basis?