HTML Image Tag

January 7, 2022, Learn eTutorial

In this HTML tutorial, you will learn all about the Image Tag in HTML. We will also discuss the most commonly used image tag attributes in HTML.

What is the use of the image tag in HTML?

The <img> tag in HTML is used to show an image on a web page. Images make websites more visually appealing by making them more fascinating and vibrant. The HTML <img> tag is an empty tag with just attributes; closing tags are not used in the HTML image element.

<img src="url" alt="some_text">

Each tag must have at least two properties: the src and alt attributes. The src property instructs the browser where to look for the image. Its value is the picture file's URL. The alt property, on the other hand, provides replacement text for the picture if it is unavailable or cannot be shown for whatever reason. It’s worth should be a significant replacement for the image.

Example for Image Tag

<img src="smile.jpg" alt="Smiling Face">
<img src="kid.jpg" alt="Kids Playing">
<img src="garden.jpg" alt="Garden">

Which all are the mostly used HTML <img> tag attributes?

Attributes Description
src It is a required property that describes the image's source or route. It tells the browser where to look on the server for the picture. The picture might be in the same directory or on a different server.
alt If the picture cannot be shown, the alt property specifies an alternate text. The alt attribute's value describes the image in words. The alt attribute is seen to be beneficial in terms of SEO.
width It is an optional property that specifies the width at which the picture will be displayed. It is no longer advised. CSS should be used instead of the width property.
height It specifies the image's height. The HTML height property accepts image, and object components as well. It is no longer advised. In place of the height property, you should use CSS.

Using the HTML5 Picture Element

Scaling a picture up or down to adjust different devices (or screen sizes) may not always function as planned. Likewise, utilizing the width and height attributes or properties to lower the picture dimension does not lessen the original file size. To resolve these issues, The <picture> element in HTML5 allows you to declare several copies of an image to target different sorts of devices.

The <picture> element has zero or more <source> elements, each of which refers to a separate image source, and one <img> element at the conclusion. In addition, each <source> element includes a media property that sets a media condition (like a media query) that the browser uses to decide when a certain source should be utilized.

HTML picture Tag

    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">