Proper uses of IMG :

<img> is a HTML tag. It has a purpose that is to display images on a web document.

Purpose:

  • Accessibility. When text based user agent renders the page alt attribute will be use.
  • By default, browsers are not always set to print background image, so you can using img tag will be beneficial.
  • 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 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. Note, this is no longer true with CSS3 background-size.
  • Using img instead of background-image can dramatically improve performance of animations over a background.
[ad type=”banner”]

CSS background-image :

  • Use CSS background images if the image is not part of the content.
  • Use CSS background images when doing image-replacement of text e.g. paragraphs/headers.
  • Use background-image if you intend to have people print your page and you do not want the image to be included by default.
  • Use background-image if you want 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.
  • Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

When to use <img />

  • When Your Image need to be indexed by search engine
  • If it has relation to content not to design.
  • If your image is not too small.
  • Images anywhere you can add alt and title attribute.
  • Images from a webpage which you want to print using print media css

When to use CSS background-image

  • Images Purely Used to Design.
  • No Relation With Content.
  • Small Images which we can play with CSS3.
  • Repeating Images (author icon , date icon will be repeated for each article etc.,).

CSS background-image Example Program:

[pastacode lang=”css” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cstyle%3E%0Abody%20%20%7B%0A%20%20%20%20background-image%3A%20url(%E2%80%9Cflower.gif%22)%3B%0A%20%20%20%20background-color%3A%20green%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Ch1%3EWelcome%20to%20Wikitechy%3C%2Fh1%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , , , ,