The img tag allows you to easily add images to your website. It supports numerous formats and a variety of at­trib­ut­es can enhance the img tag in HTML even further.

Be secure. Buy an SSL cer­tifi­cate.
  • Secures data transfers
  • Avoids browser warnings
  • Improves your Google ranking

What is the img tag needed for?

The HTML tag “img” inserts images and graphics into websites. The img tag functions as a place­hold­er, whereby the stored src attribute links to the actual storage location of the graphic when a website is accessed. The image is then embedded into the website. An alt attribute is required in addition to the src attribute. This will store an al­ter­na­tive text in case the image cannot be displayed. JPEG, GIF, PNG, and several others are supported by the img tag in HTML.

What is the img tag syntax?

The img tag syntax is straight­for­ward and only requires a few com­po­nents. The simplest variant is:

<img src="redcar.png" alt="small red car at a traffic light">

To ensure the graphic is displayed correctly, it is a good idea to include the image’s height and width on the website when using the img tag. These settings can be found in HTML at­trib­ut­es width and height. The code should look like this:

<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light">

The loading attribute is also rec­om­mend­ed when using the img tag in HTML. This ensures that the cor­re­spond­ing graphic is only loaded when users scroll to the cor­re­spond­ing position. Set the value of the loading attribute to lazy for this feature. This is how it should look in code:

<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light" loading="lazy">

Which at­trib­ut­es can be used in the img tag in HTML?

In addition to the width, height, and loading at­trib­ut­es, there are several other at­trib­ut­es which are supported by the img tag in HTML. These include all global, event, and other specific at­trib­ut­es. Below is an overview of the at­trib­ut­es which can be used with the img tag:

Attribute Value De­scrip­tion
old "Text" Mandatory; specifies an al­ter­na­tive text for the image.
crosso­ri­gin anonymous, use-cre­den­tials Specifies which third-party websites can access the cor­re­spond­ing image with a script.
decoding auto, sync, async Defines how and whether an image can be decoded.
height Pixel or percent Sets the image’s height on the website.
ismap true, false Controls image’s access to a server-side image map.
loading car, eager, lazy De­ter­mines when an image should load.
re­fer­rerpol­i­cy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url States whether the image comes from an unsafe source.
sizes sizes Defines image sizes for different page layouts.
src URL Mandatory; specifies the image’s URI address.
srcset URL lists Stores a list of images for different purposes, e.g. different devices and sizes.
usemap #mapname Links the element to a specific image map.
width Pixel or percent Specifies the image’s width.

While the above at­trib­ut­es are commonly used in img tag, there are other at­trib­ut­es which have become outdated since HTML5 and HTML 5.1, such as align, border, hspace, longdesk, and vspace.

Tip

The Website Builde from IONOS is the ideal tool to design an in­di­vid­ual and pro­fes­sion­al website. It allows you to cultivate your online presence with your ideas in mind ⁠— without much prior knowledge. Our ex­pe­ri­enced experts will also be happy to help you if you would prefer to leave this task to the pro­fes­sion­als.

Go to Main Menu