HTML <img> Tag

The <img> tag is used to insert an image into an HTML document. The image itself isn’t inserted directly into the document, the browser inserts an HTML image from the source specified in the <img> tag.

HTML img tag

There are two required attributes for an <img> element: src which is used to show the image source, and alt which defines an alternate text for the image.

To make HTML images clickable, you should place the <img> tag inside the <a> tag, which is used for inserting an HTML image link.

Syntax

The <img> tag is empty, which means that the closing tag isn’t required. It contains only attributes. But in XHTML, the (<img>) tag must be closed (<img/>).

Example of the HTML <img> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

We can use CSS to change the initial appearance of an image.

Example of the <img> tag styled with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      border-radius: 50%;
      border: 4px dashed #077cb9;
      width: 300px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div>
     <img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256">
    </div>
  </body>
</html>

Src and Alt Attributes

The src (source) attribute shows the image source. It is required, as it defines the path to the image. The value of the href attribute can be either the file name or its URL.

The alt attribute defines an alternate name for the image. It is required for the <img> tag too. Its value is a descriptive text displayed in the browser before the image is loaded. The browser also shows this text when you hover over the image.

We recommend to include keywords in alternate text. It will improve the ranking of the website in search engines.

Using "data:image/[type];base64,[base64-string]" for src attribute

The data:image/[type];base64,[base64-string] format can be used as the value of the src attribute of an img tag to display an image directly from the HTML code, without having to load it from an external file.

Here's an example of how to use this format to display an image in an img tag:

<img src="data:image/png;base64,iVBORw0KG..." alt="Base64 encoded image">

In this example, image/png specifies the MIME type of the image, and iVBORw0KG... represents the base64-encoded image data.

Note that using base64-encoded images can increase the size of the HTML file, and can slow down the loading of the page. It's generally recommended to use this format for small images or icons, and to use external files for larger images.

Example of the HTML <img> tag with the src and alt attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256">
  </body>
</html>

The new loading attribute

There is a new HTML loading attribute that allows deferring image and iframe loading until they are close to being shown. The WHATWG has a pull request for this feature, and it is already a part of Chromium (as of v76).

Supported values for the loading attribute include:

  • "lazy" which defers the load until the image or iframe reaches a distance threshold from the viewport.
  • "eager" which loads the resource immediately.
  • "auto" which is the default behavior, loads the resource.

You can use the lazy value to take advantage of browser-native lazy loading:

<img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400">

Lazy loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time when those resources are needed instead of loading them upfront. These techniques help improve performance and utilization of the device’s resources reducing associated costs.

Supported Image Formats

Image file formats are standardized means to organize and store digital images. An image file format may store data in an uncompressed format, a compressed format (which may be lossless or lossy), or a vector format. (Wikipedia).

Each user agent supports different image formats. Here is the list of common image formats:

Abbreviation File format MIME type File extension(s) Browser compatibility
APNG Animated Portable Network Graphics image/apng .apng Chrome, Edge, Firefox, Opera, Safari
BMP Bitmap file image/bmp .bmp Chrome, Edge, Firefox, Opera, Safari
GIF Graphics Interchange Format image/gif .gif Chrome, Edge, Firefox, Opera, Safari
ICO Microsoft Icon image/x-icon .ico, .cur Chrome, Edge, Firefox, Opera, Safari
JPEG Joint Photographic Expert Group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp Chrome, Edge, Firefox, Opera, Safari
PNG Portable Network Graphics image/png .png Chrome, Edge, Firefox, Opera, Safari
SVG Scalable Vector Graphics image/svg+xml .svg Chrome, Edge, Firefox, Opera, Safari
TIFF Tagged Image File Format image/tiff .tif, .tiff None built-in; add-ons required
WebP Web Picture format image/webp .webp Chrome, Edge, Firefox, Opera

Image Loading Errors

There may occur some errors while loading an image. If an onerror event handler has been set on the error event, that event handler will get called. Here you can find the situations when this can happen:

  • The src attribute is empty ("") or null.
  • The src URL and the URL of the page the user is currently on are the same.
  • Some corruption of the image prevents it from being loaded.
  • The metadata of the image is corrupted in such a way that makes it impossible to retrieve its dimensions, and there are no dimensions specified in the attributes of the <img> tag.
  • The format is not supported by the user agent.

Attributes

Attribute Value Description
align left
right
top
bottom
middle
Defines the alignment of the image in reference to surrounding elements.
Not supported in HTML5.
alt text Defines the alternate text for the image.
border pixels Defines the width of the border around the image.
Not supported in HTML5.
crossorigin
Defines, whether the CORS (a technology, that allows a web page to access resources from another domain) is used when loading the image. Images, uploaded via CORS, can be used in the <canvas> element without limiting the functionality of the latter.
anonymous CORS requests from this element will not pass credentials.
use-credentials CORS requests from this element will pass credentials.
New attribute in HTML5.
height pixels Defines the height of the image.
hspace pixels Defines spaces at the left and right sides of the image.
Not supported in HTML5.
ismap ismap Specifies that the contents of the tag is a server-side image map.
longdesc URL Specifies the URL address with a detailed description of the image (For a short description of the image, use the alt attribute.
Not supported in HTML5.
src URL Defines the source of the image.
usemap #mapname Specifies a link to the <map> element, which contains the coordinates for the client map image.
vspace pixels Defines spaces at the top and bottom of the image.
Not supported in HTML5.
width pixels Defines the width of the image.

The <img> tag supports the Global Attributes and the Event Attributes.

Deprecated Attributes

Attribute Values Description Alternate
align left
right
top
bottom
middle
Defines the alignment of the image in reference to surrounding elements.Centers the HTML image of the image in reference to surrounding elements. The float and/or vertical-align CSS properties.
border pixels Defines the width of the border around the image. The border CSS property.
hspace The margin CSS property instead.
name Specifies a name for the element The id attribute.
vspace pixels Defines spaces at the top and bottom of the image. Use the margin CSS property instead.

Browser support

chrome edge firefox safari opera

Practice Your Knowledge

Which attributes can be used with the HTML <img> tag?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?