4 Replies - 637 Views - Last Post: 05 February 2013 - 09:56 PM

#1 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

HTML Image Element vs CSS Background-Image

Posted 03 February 2013 - 02:13 PM

Hi!

I'm pretty new to web development but I have managed to find a question I can't seem to find an answer to. After browsing many websites to get a better idea of design I have noticed some sites tend to use more CSS background-image and some sites use more HTML <img>. I do know the technical difference between the two (not being able to right click background-image etc etc). I see some sites using background-image for all pictures, and some sites use <img> for all images, but how should I determine where to use one or the other?

Are picture rankings on Google Images better when using <img> for example? Does it affect SEO?

Thanks,
Joel

Is This A Good Question/Topic? 0
  • +

Replies To: HTML Image Element vs CSS Background-Image

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,721
  • Joined: 12-December 12

Re: HTML Image Element vs CSS Background-Image

Posted 03 February 2013 - 02:24 PM

Quote

Proper uses of IMG

Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG

Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
Use IMG if you rely on browser scaling to render an image in proportion to text size.
Use IMG for multiple overlay images in IE6.
Use IMG with a z-index in order to stretch a background image to fill its entire window.
Using img instead of background-image can dramatically improve performance of animations over a background.
When to use CSS background-image

Use CSS background images if the image is not part of the content. —sanchothefat
Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
Use background-image if you need to improve download times, as with CSS sprites.
Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.

SO Link
Images have an influence on SEO - discussion here.

[The wonders of Google!]

Essentially,
use IMG if the images are integral to the page content and
always include ALT attributes with IMG tags.

Was This Post Helpful? 1
  • +
  • -

#3 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

Re: HTML Image Element vs CSS Background-Image

Posted 03 February 2013 - 02:25 PM

Thanks very much Andrew!
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,721
  • Joined: 12-December 12

Re: HTML Image Element vs CSS Background-Image

Posted 03 February 2013 - 02:39 PM

View Postjskidd3, on 03 February 2013 - 02:25 PM, said:

Thanks very much Andrew!

Not a problem.

That quote was originally from 2009 and it is now possible to stretch a background image using CSS, background-size: cover;. However, this rule is not supported by all browsers. [Stretching an image is not generally a good idea anyway!]
Was This Post Helpful? 1
  • +
  • -

#5 fiddydips  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 20
  • Joined: 02-January 13

Re: HTML Image Element vs CSS Background-Image

Posted 05 February 2013 - 09:56 PM

Andrewsw pretty much covered all of it, but I'd like to add that you should use IMG tag whenever you want it to serve as a link to another page or to expand into a lightbox. Backgrounds are also good for anything that repeats and is automatically on a layer behind the content. Using IMG tags are also much faster and can be indexed by search engines.

This post has been edited by fiddydips: 05 February 2013 - 10:03 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1