Optimize bitmaps


Bitmap images often constitute most of the bytes downloaded, just ahead of the CSS and JavaScript libraries. Optimizing them thus has a considerable impact on the bandwidth consumed. The first step is to choose the correct format between bitmap (e.g. JPEG, PNG & GIF) and vector (SVG).
Bitmaps should really only be used for photos and interface elements that are not possible though icons or CSS styling.
The choice of bitmap format depends on the image’s characteristics: black and white or color, color palette, need for transparency, etc. For these characteristics, the ability to use lossy compression on the image is more suited to JPEG and WebP (Google); while the need for transparency and/or lossless compression is more suited to GIF or PNG.
Tools such as pngcrush, ImageMagick and jpegtran will help you reduce the size of images as much as possible.

Potential saving: At least 25% saved by fine-tuning the color palette and the compression ratio, and up to over 80% compared to a uncompressed bitmap. WebP is on average 30% smaller than JPEG.

This best practice should only be applied if it is coherent with your project's specifications.
Under CC-By-NX-SA license