X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML <img> Tag

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

There are two required attributes for <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. The <img> is an empty element, which means that the closing tag isn’t required.

Example of the usage of the <img> element in HTML:

<!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 a styled image <img> 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 indicates the path to the image. The href attribute value 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 including keywords in alternate text. It will improve the ranking of the website in search engines.

Example of 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, eagerly load 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 up front. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

Supported Image Formats

Image file formats are standardized means of organizing and storing 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, Internet Explorer, Opera, Safari
GIF Graphics Interchange Format image/gif .gif Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICO Microsoft Icon image/x-icon .ico, .cur Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG Joint Photographic Expert Group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG Portable Network Graphics image/png .png Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG Scalable Vector Graphics image/svg+xml .svg Chrome, Edge, Firefox, Internet Explorer, 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 it 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



Do you find this helpful?

Related articles