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.
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”]