<img>

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 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	leftrighttopbottommiddle	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.

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

Deprecated Attributes

Attribute	Values	Description	Alternate
align	leftrighttopbottommiddle	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.

请遵守《互联网环境法规》文明发言，欢迎讨论问题

<img>

Syntax

Example of the HTML <img> tag:

Example of the <img> tag styled with CSS:

Src and Alt Attributes

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

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

The new loading attribute

Supported Image Formats

Image Loading Errors

Attributes

Deprecated Attributes

人工客服

工单服务

投诉建议

<img>

Syntax #

Example of the HTML <img> tag: #

Example of the <img> tag styled with CSS: #

Src and Alt Attributes #

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

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

The new loading attribute #

Supported Image Formats #

Image Loading Errors #

Attributes #

Deprecated Attributes #

人工客服

工单服务

投诉建议

Syntax

Example of the HTML <img> tag:

Example of the <img> tag styled with CSS:

Src and Alt Attributes

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

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

The new loading attribute

Supported Image Formats

Image Loading Errors

Attributes

Deprecated Attributes