DEV Community

Dan Bamikiya
Dan Bamikiya

Posted on

5 2

The real image tag: <image> vs <img>

The image tag is used to tell the web browser to display an image.
It is usually written as <img /> and can have attributes such as (but not limited to) src - used to specify the path to the image, alt - holds a text description of the image, important for accessibility, width - the intrinsic width of the image(in pixels).

Now you're wondering what about the <image /> tag right? Well the image tag is (or was) used to display images also! But its infact not an HTML element!(as written in the spec):
an image of the html parsing spec about the image tag not being an html element

Browsers alias it to the <img> element but differently;

  • Firefox aliases it during parse time;
  • Chrome & Safari aliases it during element-creation time;
  • IE (Internet Explorer) aliases it throughout runtime;

as seen in the html parsing spec:
an image of the html parsing spec about how browsers should handle the image tag
https://html.spec.whatwg.org/multipage/parsing.html

So you can use it in your code and the browser will do what needs to be done(convert it to <img>) and process your code but is it valid HTML? No.

Well what about its behaviour during DOM manipulation?

Assigning its src value the path to an image:



document.querySelector('image').scr  = 'https://source.unsplash.com/random/150*150';


Enter fullscreen mode Exit fullscreen mode

doesn't work in Edge, Chrome, & Firefox but works in IE.

Creating the element and appending it to the DOM:



const image = document.createElement('image');
image.src = 'https://source.unsplash.com/random/150*150';
document.body.appendChild(image);


Enter fullscreen mode Exit fullscreen mode

Edge & Chrome & Firefox treats it as an unknown element and doesn't load the image but it works in IE.

So the real image tag is the <img> tag and the <image> tag is a tag that browsers aliases to <img> element.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up