<Img> Vs <Image> Tag in HTML

<img> vs <image> tag in HTML

Yes and no. As you point out <image> has been a synonym for <img> for a long time. I believe it was an early Netscape browser that first did this, possibly to compensate for user error, or possibly because there was dispute at the time whether the element should actually be called <image> or <img>.

Anyway, as pst points out, once it was implemented in a browser that dominated the market of the time, web pages came to rely on it. Its persistence is then down to commercial pressure on the browser manufacturers. If all the major browsers support it, then Browser A decides that although it supported it in Version V, it won't support it in version V+1, as soon as version V+1 is released, they get lots of messages saying "Site S is broken in your latest browser. You browser is rubbish. I'm going to switch to browser B".

The HTML5 parsing spec requires that the <image> tag is mapped to the img element at the tree construction stage, so there can never be any justification for using it.

I would be less concerned about browsers, than other HTML consumers, such as the lesser known search engines. I believe that the image for img synonym is not widely known, and the many such tools would therefore fail to pick up <image> as referencing an image resource.

html tag <img> and <image>

See MDN:

The obsolete HTML Image element (<image>) is an obsolete remnant of an ancient version of HTML lost in the mists of time; use the standard <img> element instead. Seriously, the specification even literally uses the words "Don't ask" when describing this element.

When to use IMG vs. CSS background-image?

Proper uses of IMG

1. Use IMG if you intend to have
   people print your page and you want the image to be included by default.
   —JayTee
2. 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

1. Use IMG plus alt attribute if the image
   is part of the content such as a logo or diagram or person (real person, not stock photo people).
   —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG
   for multiple overlay images in IE6.
4. 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; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

1. Use CSS background images if the
   image is not part of the content.
   —sanchothefat
2. Use CSS background images when
   doing image-replacement of text eg. paragraphs/headers.
   —sanchothefat
3. 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
4. Use background-image if you need to improve download times, as
   with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

What is the difference between using img tag src attribute in HTML to display image and styling it in CSS?

Let us see by comparison.

It isn't enough to simply supply a background-image property, because the img element has no inherent height or width and the background-image property can't provide that automatically in the same way that setting the src attribute does. So, without declared dimensions, the CSS-applied image doesn't show.

#my-pic {    background-image: url(//placehold.it/150);}

<img src="//placehold.it/150" /><img id="my-pic" src="" />

Do I need a / at the end of an <img> or <br> tag, etc.?

The / is only required for XHTML & XML.

If you're using a HTML5 doctype, then there's no need to terminate self-closing tags in this way.

This applies to <img src="img.png" />, <br />, <hr /> etc.

I.e. Just use <img src="img.png">, <br> and <hr>.

If you need an empty element (like a div), don't use <div />, instead use <div></div>. This is important since in HTML5, the slash is ignored and <div /> is interpreted as <div> without a closing tag.

What is the difference between <img> tag and new Image().src?

You can create DOM nodes mainly in two ways:

• You put them in the HTML using tags like <img src="foo.jpg">
• You create them dynamically from Javascript using for example document.createElement

If the nodes are fixed then static creation is better because allows a designer to create and edit a page directly without having to know Javascript. If however they're created dynamically depending on the user actions on the page then you cannot place them in the HTML and you're forced to use Javascript.

Somethings you may need to just act on an existing DOM element and you may see code like

<img id="pic" src="foo.jpg">

in the HTML (note the id= part)

and then you can access it from code using for example

document.getElementById("pic").src = "bar.jpg";

Is it better to use an IMG element for a header logo or a background image, why?

Why do this instead of an img element with alt text? Is there some semantic reason? Some accessibility reason? SEO reason?

It's useful when you want to use CSS media queries and display a different logo size depending on the screen resolution.

Regarding accessibility, that would be reasons like permitting users to view alternative text when images are disabled.

---

Related Topics