2

I wonder that, is there any differences between using image with IMG tag or using as DIV Background? Does it effect website performance, Google Search or etc.?

iravul
  • 408
  • 9
  • 15

3 Answers3

4

There is no real performance difference or SEO difference (although I suppose an img element with alt attribute specified may be ever so slightly better for SEO than a background image, only because it's more text to crawl).

The difference is mainly semantic. IMG elements should be used for images / photos etc (like if you put photos in a blog post, or news post, or whatever, as well as usually things like icons, etc that are not strictly visual layout elements) whereas background-image is for things that are, well, backgrounds. The idea is that background-images are not important to understanding the content of the page, and images are. Crawlers don't care about background images or other purely visual elements (they care about the content inside them), but they do care about images that add meaning to the content, whether as a link graphic, content supplement, whatever.

There are also some usage considerations - for example, you can scale IMG elements easily by setting them at a percentage width of their parent container element, which is important in responsive design and 144 dpi alternatives for retina displays (in which you have a media query that, for example, puts a 300px square image inside a 150px square container on retina displays), which is not as simple or widely supported on background-image due to reliance on a lot of newer CSS3 features.

In general though unless there is a functional concern that supports using one or the other, go with the choice that is the most semantic. Tying in with that is the fact that in general the more semantic your site is, the more accessible it is and the more readily crawlers and indexers will be able to interpret your content accurately.

Ennui
  • 10,102
  • 3
  • 35
  • 42
2

The 3 differences I can think of:

  • The div has to be the exact size of the image. Resizing images in HTML/CSS is bad for performance
  • Users can't right-click > Save Image
  • You have no alt text
Community
  • 1
  • 1
  • 1
    :p, yea, they can copy your image if they want even though its possible to copy div'style but thats more advance. – Ligth Jun 13 '13 at 15:23
  • Because the image is a background image, not it's own image element @j08691 –  Jun 13 '13 at 15:23
  • In Firefox you can right click a background image and open it in a new tab. – j08691 Jun 13 '13 at 15:25
  • I was unaware. Apparently background images are easier to save than they have been in the past. @j08691 –  Jun 13 '13 at 15:29
  • And I'm sure that there are extension for other browsers that will allow you to do the same or even save with a click. – j08691 Jun 13 '13 at 15:33
  • Probably. One tactic I've seen (that's not necessarily good or true anymore) is that it makes the image harder to save for people who don't know how to work their web browser. Other than that, it's just a true statement with no real effect. –  Jun 13 '13 at 15:35
  • 1
    So semantic considerations aren't "real"? What about accessibility? – Ennui Jun 13 '13 at 15:54
1

Yes, there are differences. You can not put a text over an IMG tag - you would have to cheat ;-) DIVs with a background-image allows you to do that.

The performance should be pretty much the same. Depending on the browser-engine, the IMG or DIV could be prefered due the loading process.

There are also differnces regarding Google search. Your IMG would be hard to find, if it's 'hidden' as a background-image in a DIV.

If it is an image -> treat it as an IMG if it is a background -> treat it as a background.

Kody
  • 1,154
  • 3
  • 14
  • 31