When to use an img tag, when to use a CSS background image
<Img> tag vs CSS background image…This has caused much confusion to many web-developers I have met – many more developers don’t care. So, when should you use an <img> and when should you use a CSS background image on your element?
The answer is surprisingly simple…In nearly all cases, use <img> tags for contextually important images (e.g. images which convey information) and use CSS background images for all other images (e.g. images which simply make up part of the page design).
You can then use the “alt” attribute on your <img> tags to supply a brief description of the image – this will be used by both screen readers (which are often used by visitors with eyesight deficiencies) and by many search engines (to apply context/meaning to your image).
Proper usage of <img> tag vs CSS background images will greatly improve the accessibility of your website to users of screen readers and it is very easy so please take care to do it! Apart from being a caring thing to do, you never know who may use a screen reader. People with eyesight problems are in all walks of life, do not for one second assume that your customer has perfect eyesight! Imagine the frustration many screen reader users must face every day, if your website is accessible you could perhaps win the business of that person who may just turn out to give you a large order that you may not have otherwise received!
|This entry was posted by Neil Craig on November 3, 2010 at 10:05 pm, and is filed under (X)HTML, Accessibility, CSS, General Web-Development. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.|
about 2 years ago - 1 comment
Like it or hate it, the Apple iPhone has ushered in the age of the “Smartphone” which in turn has delivered mobile web-browsing to the masses. The mobile browser, whilst now broadly quite capable (at least on leading platforms), has introduced a slightly different set of requirements in terms of design and development of Websites.
Many, many designers, developers and others have written articles on how to design and/or develop for the mobile browser. I am aiming to summarise what I have learnt from several sources alongside my experience an opinion in a (hopefully) relatively quick and simple way
about 2 years ago - No comments
about 2 years ago - 9 comments
about 2 years ago - 3 comments
CSS outline and border are at a glance very similar but have a few important differences: Outline is effectively overlaid over the top of the element it is applied to and therefore outline does not add to the element width whereas border does add to the element width Outline (according to the official W3C specification More >
about 3 years ago - 7 comments
CSS Sprites can help to reduce web page download times and delays caused by downloading of hover/rollover background images. This article walks through the basics with an example of how you can use CSS sprites in a graphical HTML menu.
about 3 years ago - 2 comments
Web-fonts, for those who don’t know, are a method of using a custom font in your web page(s). Unlike the more traditional method of specifying the font using the CSS “font-family” (or the shorthand “font”) which relies on the user having the relevant font installed on their computer, web-fonts allow the developer to use fonts More >