Web page image optimization tools and usage tips sharing

As a basic element of a web page, images are one of the key factors affecting page loading speed. Website optimization techniques related to images include CSS Sprites (image merging), lazy loading, progressive image enhancement, and so on. Here are some excellent tools and techniques for optimizing web images.

TinyPNG

TinyPNG uses smart lossy compression techniques to reduce the size of PNG files.

Smush.it

Smush.it reduces image size by removing unnecessary bytes from image files.

OptiPNG

OptiPNG is a PNG image compression tool without losing information.

ImageOptim

PNG, JPEG and animated GIF images can be processed by finding the best compression parameters and eliminating unnecessary comments and color profiles.

CodeKit

CodeKit can help you build faster, better websites, and it can help you optimize images, too.

imgo

imgo is a lossless automatic image optimization tool. Able to optimize the images in a folder to the greatest extent.

jQuery Lazyload

A jQuery plugin for lazy loading of images.

Image optimization article recommendation

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