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:

css code 
<!DOCTYPE html>
<html>
<head>
<style>
body  {
    background-image: url(“flower.gif");
    background-color: green;
}
</style>
</head>
<body>

<h1>Welcome to Wikitechy</h1>

</body>
</html>
[ad type=”banner”]

Categorized in:

CSSHTML

Tagged in:

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