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="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Try it Yourself »

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="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
    </div>
  </body>
</html>

Try it Yourself »

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.

Decorative vs. meaningful images

Whether alt should hold text depends on the image's purpose:

Meaningful images (a product photo, a chart, a logo that conveys information) need a short, descriptive alt that communicates the same information the image does. Describe what it shows, not "image of".
Decorative images (borders, spacers, background flourishes that add nothing to the content) must use an empty alt="". This tells screen readers to skip the image. Do not omit the alt attribute entirely — a missing alt makes some screen readers announce the file name instead.

<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />

<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />

Tip

For meaningful images, include relevant keywords in the alternate text where they fit naturally. Accurate alt text helps both accessibility and how the image ranks 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,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Tiny base64-encoded sample image"
  width="5"
  height="5">

In this example, image/png specifies the MIME type of the image, and the long string after base64, is the actual image data encoded as base64. The string above is a complete (if tiny) 5×5 PNG.

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="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
  </body>
</html>

Try it Yourself »

Why set width and height

Always set the width and height attributes (in pixels, without units) to match the image's intrinsic size. Doing so lets the browser compute the image's aspect ratio and reserve the correct amount of space before the file finishes downloading. Without these attributes, the page first renders with no room for the image, then jumps as the image arrives — a poor experience that hurts your Cumulative Layout Shift (CLS), one of Google's Core Web Vitals.

<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">

You can still resize the image with CSS. A common, safe pattern is to set width and height attributes for the aspect ratio, then let CSS make it fluid:

img {
  height: auto;   /* preserve aspect ratio */
  max-width: 100%; /* never overflow its container */
}

The loading and decoding attributes

The loading attribute defers image (and iframe) loading until the resource is close to being shown. It is a standard feature supported by all modern browsers.

Supported values for the loading attribute:

lazy — defers the load until the image reaches a distance threshold from the viewport. Use it for offscreen / below-the-fold images.
eager (the default) — loads the resource immediately.

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

Warning

Do not lazy-load your most important above-the-fold image (often the Largest Contentful Paint, or LCP, element). Lazy loading delays its request and makes the page feel slower. For that image use loading="eager" or simply omit the attribute.

The related decoding attribute hints how the browser should decode the image. decoding="async" lets the browser decode the image off the main thread, so it doesn't block rendering of surrounding content:

<img src="photo.jpg" alt="Landscape" width="800" height="600"
     loading="lazy" decoding="async">

Lazy loading defers the loading of resources until they are needed instead of loading everything upfront. This improves performance and reduces unnecessary data usage on the user's device.

Responsive images with srcset and sizes

A single fixed image either wastes bandwidth on small screens or looks blurry on large ones. The srcset and sizes attributes let the browser pick the best file for the device's screen size and pixel density, while you keep one <img> element.

srcset lists candidate image files, each tagged with a width descriptor (the image's real width in pixels, e.g. 480w).
sizes tells the browser how wide the image will be displayed at different breakpoints, so it can choose before layout is computed.

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         800px"
  alt="Coastline at sunset"
  width="800" height="600">

Here the browser reads sizes, works out how many CSS pixels the image needs, multiplies by the device pixel ratio, and downloads the closest match from srcset. The plain src stays as a fallback for browsers that don't support srcset.

When you need to serve different crops for different layouts (art direction) or offer modern formats with a fallback (such as AVIF/WebP with a JPEG backup), reach for the <picture> element instead.

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
AVIF	AV1 Image File Format	image/avif	.avif	Chrome 85+, Firefox 93+, Safari 16+, Opera
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
WebP	Web Picture format	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari 14+

JPEG and PNG are universally supported and remain the safest defaults. WebP and AVIF are modern formats that produce noticeably smaller files at similar quality — AVIF usually compresses best, WebP has the widest support. Because a few older browsers still lack AVIF, serve these formats through the <picture> element with a JPEG or PNG fallback rather than putting them in a bare <img src>.

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.

You can listen for that error event with the onerror attribute and swap in a fallback image, so users see a placeholder instead of a broken-image icon:

<img
  src="profile.jpg"
  alt="User profile photo"
  width="200" height="200"
  onerror="this.onerror=null; this.src='fallback.png';">

Setting this.onerror=null first is important: it removes the handler before changing src, so that if the fallback image also fails to load, you don't trigger the handler again and cause an infinite loop.

Attributes

These are the current, standard attributes of the <img> element. Deprecated attributes are listed separately below.

Attribute	Value	Description
alt	text	Defines the alternate text for the image. Use `alt=""` for purely decorative images.
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.
decoding	`sync` \| `async` \| `auto`	Hints how the browser should decode the image. `async` decodes off the main thread.
height	pixels	Defines the height of the image. Set it together with `width` to reserve space and avoid layout shift.
ismap	ismap	Specifies that the contents of the tag is a server-side image map.
loading	`eager` \| `lazy`	Controls whether the image loads immediately or is deferred until near the viewport.
sizes	media conditions + lengths	Tells the browser the image's displayed width per breakpoint, used together with `srcset`.
src	URL	Defines the source of the image.
srcset	URL + descriptors	A comma-separated list of candidate images and their width (`w`) or density (`x`) descriptors.
usemap	#mapname	Specifies a link to the `<map>` element, which contains the coordinates for the client map image.
width	pixels	Defines the width of the image. Set it together with `height` to reserve space and avoid layout shift.

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

Deprecated Attributes

These attributes are obsolete in HTML5. Use the CSS alternatives instead.

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

What is the correct way to mark up a purely decorative image so screen readers skip it?

Give it an empty alt attribute: alt='' .Omit the alt attribute entirely.Set alt to the image file name.Use the title attribute instead of alt.

Syntax

Example of the HTML <img> tag:

Example of the <img> tag styled with CSS:

Src and Alt Attributes

Decorative vs. meaningful images

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

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

Why set width and height

The loading and decoding attributes

Responsive images with srcset and sizes

Supported Image Formats

Image Loading Errors

Attributes

Deprecated Attributes

Practice

Example of the HTML `<img>` tag:

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

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