That is, don’t create graphics of text that your users will read.

Images make pages slow; by using them you are adding http requests and files that need to be downloaded. Avoid using graphics for menu list items, for example.

Logos that include text are the exception to this rule because the rendering of a logo needs to be precise for branding. The FrontendTest logo is a graphic, for example.

While you may have a good reason to write styles inline using the “style” attribute, generally it is not a good practice. In this case styles are not reusable, too specific, and the code becomes bloated and difficult to maintain. We suggest identifying common styles and including them with a style sheet.

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.

This is an important and loaded checklist item. If the site is HTML5 (first line is <!DOCTYPE html>), tags like <header>, <footer> and <nav> should be used. Menu items should be marked up as an ordered list.

Common things that should be avoided are using the <br> tag for formatting, using <b> when you mean <strong>, or worse, using <b> when the content is a heading.