Images are HTTP requests that slow down rendering and should be minimized. Unless your HTML document is something as primitive as an HTML email, images should not be used for layout. Replace corners, single pixel spacer gifs, shadows, gradients…etc. with CSS3. Very complicated and detailed patterns can be created with CSS.

If the images cannot be replaced with CSS — that is, if it absolutely must be a graphic — collect images into image sprites or consider using using a font face as a library of icons.

PNG image format was created to improve upon and replace GIF images; they compress better in most cases.* Additionally, there are patent issues around using GIFs.

We suggest PNG-8 for non-transparent images, PNG-24 for transparent images, JPEG for photos, and GIF for animated web graphics.

*An image would need to be very small for GIF to be the better choice.