Invariably, the average website gets heavier with each passing year, which results in slower page loads for visitors. Most of this increase in page weight is due to the large file sizes of images. Odds are, as a developer, you’re guilty of this slow creep too, so you should take care to optimize your images to be as lightweight as possible.
Online Tools
The following are available to use online, for free:
- JPEGmini: Per the docs, “Reduces the file size of JPEG photos by up to 5X”
- Smush.it: Process JPG, GIF, and PNG images that are up to one megabyte in size
- Compress PNG: Automatically converts BMP, ICO, GIF, and JPG to PNG
- Compress JPEG: Automatically converts BMP and PNG to JPG
- TinyPNG: In addition, has premium plugin for Photoshop
- b64.io: Optimizes PNG, JPG, GIF or SVG and then converts to Base64
Desktop Tools
These are my preferred applications when optimizing images. Also I can’t believe that ImageOptim and ImageAlpha are free because they’re that good.
- JPEGmini: An application, as well as an online tool
- ImageOptim: Losslessly optimizes PNG, JPG, and GIF
- ImageAlpha: Lossy compression of 24-bit PNG
Tooling with Grunt
If you’re using Grunt then check out Optimizing Images with Grunt and these plugins:
- grunt-contrib-imagemin: Minify PNG, JPG, and GIF
- ImageOptim-CLI: Uses ImageOptim, ImageAlpha, and JPEGmini
- grunt-imageoptim: A plugin for Grunt for ImageOptim-CLI