Tools and Tips on how to Optimize Images for the Web
The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue. Even if you are a pro at “saving as better quality jpg” it is always nice to check out some tools (old or new) to have you covered when it is time to optimize images.
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files.
OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information.
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.
CodeKit helps you build websites faster and better. And it also helps you optimizing images.
Image optimization tool.
jQuery plugin for lazy loading images.
- Smashing Magazine – Optimize Images With HTML5 Canvas
- Smashing Magazine – Clever JPEG Optimization Techniques
- Smashing Magazine – Clever PNG Optimization Techniques
- The Smashing Book – Performance Optimization for Websites
- A List Apart – Responsive Images and Web Standards at the Turning Point
- A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
- A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part I
- Six Revisions – The Comprehensive Guide to Saving Images for the Web
- Six Revisions – JPEG 101: A Crash Course Guide on JPEG