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!