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.

Font files can be very large — commonly 1MB. If your custom font does not compress well, and you do not use it much on your site, you might decide it’s not worth slowing down your page. For example, if you use a bold version of a font in only one place, consider if the cost of loading it is worth it.

Some external services can help with managing font file size sizes, and may possibly serve cached fonts. Two to consider are Google Web Fonts and Typekit.

It is not a good idea to load a custom font to make your logo — it is much more efficient to use a graphic instead. Also, you can’t really control how or if a web font is displayed.

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.