The height and width attributes of the element should match the pixel dimensions of the graphic, or the graphic should be resized to match the height and width set in the HTML. If a graphic is bigger than the assigned image attributes, you’re showing the user less than they are downloading. If the graphic is smaller than what is assigned, then the image will scale up and look pixelated. In any case, when web browsers resize images, it does not look ideal.

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.