In this article we’ll discuss the best way of optimizing your images for the web. Poorly optimized images can slow page load time, hindering user experience.
Page load time is also factored into Googles search algorithm, so heavy images can also negatively effect your search engine rankings, making it more difficult for your site to be found by those who need it most.
Before you start compressing every image on your website, make sure you fully understand the image types and editing process. If you go overboard with optimization, image quality can suffer. Image optimization is important but you still need to maintain reasonable image quality.
ImageOptim (Mac OS X)
ImageOptim optimizes images so they take up less disk space and load faster by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
ImageOptim seamlessly integrates best optimisation tools: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
Its excellent for publishing images on the web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone/iPad applications smaller (if you configure Xcode).
ImageAlpha (Mac OS X)
ImageAlpha greatly reduces file sizes of 24-bit PNG files (including alpha transparency) by applying lossy compression and conversion to a more efficient PNG8+alpha format. Such images are compatible with iOS, all browsers, and even degrade well in IE6.
SuperPNG (Mac OS X)
SuperPNG is a free Adobe Photoshop plug-in for using PNG (ping) files. It has more comprehensive support for the format than Photoshops included plug-in and provides control over alpha channel handling.
RIOT has an easy to use interface to compare the original with the optimized image in real time and instantly see the resulting file size. The image optimizer is lightweight, fast and simple to use, yet powerful for advanced users.
Reduce the file size of your photos by up to 5x, while keeping their original quality and JPEG format.
PNG is an open source file format that supports tight lossless compression. It can be read on any platform by most graphics applications and is fully supported by all modern web browsers.
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a lossless tool, which means it optimizes the images without changing their look or visual quality.
After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the pages images and provides a downloadable zip file with the minimized image files.