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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)