Optimizing Images: A Lazy Web Designer’s Guide

Choose your image optimization wisely

illustration of speed
© Sean MacEntee https://www.flickr.com/photos/smemon/5183175462/ Creativecommons.org 2

Look at your image. Does it have millions of colors like a photograph does? Use JPEG.

Does it have flat color, as in a vector-based drawing with flat colored fills? Use PNG (or GIF).

Avoid using GIF. Use PNG instead. It is the open source equivalent (and even better) that was made to offer an alternative to the proprietary GIF image format.

Wikipedia article

TLDR? Look at this table instead

File Format Image type
JPEG Photographic imagery
GIF Flat color, limited color palette, simple transparency.
PNG-8 Flat color, limited color palette, simple transparency.
PNG-24 Complex transparency
Continue reading “Optimizing Images: A Lazy Web Designer’s Guide”