Display text over background image, rather than making the text part of the image

When displaying text and images on your website (and why wouldn’t you?) then you should consider keeping the image, and the text that you want to place on the image, separate. Consider the following banner header that goes across the top of one of my [old] website pages…

The blue banner heading at the top of the page is in fact just an image containing the 3 letters (D, M, and J) over a blue background. The text is then added dynamically when the page is loaded by the browser.

The reason for doing this, and for applying the same logic elsewhere on your website for images that contain text, is two-fold:

1. The image will generally be a much smaller file size (a few kb) without the text, meaning that your web pages will load much faster for your readers. Although most people now use broadband connections, some don’t and will appreciate websites that load faster. Even broadband users may notice a difference;
2. Search engines will be able to read the text that you place dynamically onto your images. This can have a great optimising effect. In the example above, the ‘COMPLETE WEBSITE SOLUTIONS…‘ text is actually a <h1> tag (meaning that search engines should consider it a very good guide to what the page is about), and the ‘Hosting, managing, optimising…‘ sub-heading is in fact a <h2> tag. I think this is a pretty cool way of incorporating these tags into your page without necessarily taking up valuable page space;

Find out more on how to use images on websites here.