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.
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 self-closed (<img />).
Example of the HTML <img> tag:
An example of how to use an 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="https://www.w3docs.com/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:
How to style an HTML <img> tag using CSS vertical-align and padding properties?
<!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="https://www.w3docs.com/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 src 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, or if the image fails to load.
TIP
We recommend including 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:
Using "data:image/[type];base64,[base64-string]" for src attribute
<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:
An example of the img tag with the src and alt attributes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>The loading attribute
The loading attribute allows deferring image and iframe loading until they are close to being shown. It is now a standard HTML feature supported by all modern browsers.
Supported values for the loading attribute include:
lazywhich defers the load until the image or iframe reaches a distance threshold from the viewport.eagerwhich loads the resource immediately.
You can use the lazy value to take advantage of browser-native lazy loading:
HTML <img> Tag
<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 | anonymous | use-credentials | Defines whether CORS is used when loading the image. Images loaded via CORS can be used in the <canvas> element without limiting its functionality. |
| 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. |
Practice
Which attributes can be used with the HTML <img> tag?