HTML img tag vs CSS background-image


background image patterns

Use an <img> tag:

  1. If it is related to the content – not just design element
  2. If your need – to be indexed by search engine. Google does not automatically index background images, otherwise the image search results would be filled with image sprites.
  3. Image tags have the ability to add alt text and a title attribute, which can be picked up by screen readers and search engines.
  4. If you have a bunch of large background images declared in your CSS, the browser is going to take longer to parse the CSS file and pull down the images, which will delay the loading of the entire page. With <img> tags, the requests are made as the HTML is parsed, so any content coming before the tag in the document will be information users can begin to read, this is a good point for performance.
  5. Inline images ( img or picture ) can take advantage of tools like picturefill and lazy loading for even more performance benefits.
  6. If you intend to have people print your page and you want the image to be included by default.
  7. If you rely on browser scaling to render an image in proportion to text size.

When to use CSS background-image :

  1. If it’s purely used to design.
  2. If the image is not part of the content.
  3. For small images, if you need to improve download times, as with CSS sprites.
  4. If you intend to have people print your page and you do not want the image to be included by default.
  5. Repeating images ( In blog author icon , date icon will be repeated for each article etc.,).

What to do if you need to use <img> tag, but depending design or other circumstances you are forced to use background image

Depending on the situation and project requirements you can use one of this methods or both of them together.

Example 1

Use div tag with role and aria-label attributes:


<div role=”img” aria-label=”Description of the image” title=”Tooltip for users not using assistive technologies”  style=”background-image: url(image.jpg);”></div>


Example 2

Use background image, but also have visually hidden <img> tag:


<div style=”background-image: url(image.jpg);”><img class=”hidden” src=”” alt=””></div>


Example 3
Use microdatas, for example:


<div itemscope itemtype=”http://schema.org/Article”>

     <meta itemprop=”image” content=”bg.jpg”></meta>

     <div style=”background-image:url(‘bg.jpg’)”></div>

</div>


Conclusion

HTML <img> tags should be used when it is a critical piece of accessible content, and consider speed, performance, and manipulation when deciding on what to do with an image used as a visual design enhancement.

If you need to choose between using an HTML <img> tag or a CSS background-image – just ask yourself a question: does this image help people in understanding my content better?  If the answer is yes – use img tag. If – no – set it as a background image. After all – if both ways can provide you with the same visual result – you just need to define what has more sense in your situation.

 

What's Your Reaction?

Cry Cry
1
Cry
Cute Cute
0
Cute
Damn Damn
0
Damn
Dislike Dislike
1
Dislike
Like Like
2
Like
Lol Lol
0
Lol
Love Love
0
Love
Win Win
0
Win
Ani A

An experienced HTML developer. Front End Tech Lead in Px-lab and Novembit.

Comments 0

Your email address will not be published. Required fields are marked *

HTML img tag vs CSS background-image

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format