Photo of Background-Image vs. Img Tag

It is widely known that using the image tag is better SEO practice than using background images because of the screen reader implications. But we know too well how difficult it can be sometimes using image tags within constrained proportions and responsive environments.

Benefits of the Image Tag

Images are crawled and indexed by search engines and provides your website with another search outlet. Because of this, SEO standards are to include a few images in your website’s content that is related, and including keywords in the alt attribute of the image. Doing this can help to better define the main keyword of a web page. The alt attribute is also used by screen readers to provide a description of the image to a visually impaired user.

Forward Thinking

Background images are great to use because of how easy it is to display it properly in any constrained proportions. But there is no alt tag for screen readers, or confirmation they are crawled and indexed. Right now it is speculated that Google can crawl CSS and theoretically could index background images. Google has yet to confirm this so right now it is only speculation. So we have this balance between, image tags being better for SEO, but background images being easier to control. How do we decide?

Well this is the internet, and website standards are constantly evolving and improving, and so are our best practices. This has sparked much conversation at the office recently and we feel we have come to a conclusion! The simple fact is, there is a time and place, to use either image format. It is always going to be necessary to have some image tags on your website to be crawled and indexed. But if your website’s content is very rich, with great headings, descriptive and informative paragraphs, and easy to read content, it will be understood by any user, with or without a screen reader. This makes using background images easier and can give peace of mind to anyone concerned about SEO. If the content is already strong, using image tags will add to the richness, but it won’t take anything away if you don’t use them, and opt for background images instead.

Summary

Google is the trend setter and SEO rule maker and therefore I always ask myself, “what would Google do?”. Looking through the code of their various websites I found they balance the use of both. Image tags inside content paragraphs, and background images being used in blocks, or parts of content where the image is not within the text.

2 Comments

  • salmankashfy says:

    Very usefull information. Thanks!

  • Jenny says:

    Google’s John Mueller said in google webmaster mark that Google Image search does not index and rank images from CSS background code. He said if you want your images to rank in Google Image search then you best use normal image tag with the source attribute pointing at the image.

    Check google webmasters for more details.

    My website seming lighting official page was once set the pictures in the background. It’s not good for the picttures index, i changed the code to img and it’s getting better now.