HTML Image Tag: Display Images with <img>

Use the HTML <img> element to embed an image in a web page. The essential attributes are src, which identifies the image resource, and alt, which provides a text alternative when the image needs one.

<img
  src="map.jpg"
  alt="Map showing the route from City A to City B"
>

<img> is a void element, so it does not use a separate closing tag.

Basic img Syntax Top ↑

<img src="photo.jpg" alt="Description of the image">

The browser requests the resource named by src and displays it at the location of the <img> element.

src: Image Source Top ↑

src specifies the image URL.

Image in the same directory Top ↑

<img src="photo.jpg" alt="Portrait photograph">

Image inside a subdirectory Top ↑

<img src="images/photo.jpg" alt="Portrait photograph">

Image in the parent directory Top ↑

<img src="../photo.jpg" alt="Portrait photograph">

alt: Text Alternative Top ↑

The alt attribute supplies alternative text for users who cannot see the image or when the image cannot be loaded.

Informative image Top ↑

<img
  src="chart.png"
  alt="Sales increased from January through March"
>

Describe the information or purpose the image contributes in its context. Avoid stuffing keywords into alt text.

Decorative image Top ↑

<img src="divider.png" alt="">

An empty alt value tells assistive technologies that the image does not add meaningful content.

width and height Top ↑

Use the HTML width and height attributes to provide the image's intrinsic dimensions.

<img
  src="photo.jpg"
  alt="Portrait photograph"
  width="800"
  height="600"
>

Providing the correct width and height helps the browser reserve space before the image finishes loading, which can reduce layout movement.

Responsive Images with CSS Top ↑

A common responsive pattern lets a large image shrink inside a narrow container while preserving its aspect ratio.

<img
  src="photo.jpg"
  alt="Portrait photograph"
  width="800"
  height="600"
  class="responsive-image"
>

.responsive-image {
  max-width: 100%;
  height: auto;
}

Bootstrap pages can use the existing img-fluid class for this behavior.

loading and decoding Top ↑

For images that begin outside the initial viewport, loading="lazy" can defer loading until the image is closer to being needed.

<img
  src="gallery-photo.jpg"
  alt="Mountain landscape"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

srcset and sizes Top ↑

srcset lets the browser choose from multiple image files. sizes describes how much page width the image is expected to occupy.

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

The browser can choose an appropriate source according to the layout and device characteristics instead of downloading one oversized file for every visitor.

figure and figcaption Top ↑

When an image has a visible caption that belongs with it, group them with <figure> and <figcaption>.

<figure>
  <img
    src="route-map.jpg"
    alt="Route from Station A to Station B"
    width="900"
    height="600"
  >
  <figcaption>Driving route from Station A to Station B.</figcaption>
</figure>

Replace Obsolete Image Attributes with CSS Top ↑

Older HTML tutorials often used hspace, vspace, border and align directly on <img>. These presentational attributes are obsolete in modern HTML. Use CSS instead.

Old HTML - do not use for new pages Top ↑

<!-- Obsolete presentational attributes -->
<img
  width="400"
  height="50"
  border="0"
  hspace="10"
  vspace="10"
  align="right"
  src="image.gif"
  alt="Example image"
>

Modern HTML and CSS Top ↑

<img
  src="image.gif"
  alt="Example image"
  width="400"
  height="50"
  class="example-image"
>

.example-image {
  border: 2px solid #444;
  margin: 0 0 1rem 1rem;
  float: right;
  max-width: 100%;
  height: auto;
}

Float an Image to the Right with CSS Top ↑

The old page used align="right". The modern equivalent can be implemented with CSS:

<img
  src="photo.jpg"
  alt="Portrait photograph"
  width="300"
  height="300"
  class="photo-right"
>

.photo-right {
  float: right;
  margin: 0 0 1rem 1rem;
}

For larger page layouts, Flexbox or Grid is often easier to maintain than floats. Floats remain useful when text should wrap around an image.

Image Paths Top ↑

If the path contains only a file name, such as photo.jpg, the browser resolves it relative to the document URL.

<img src="photo.jpg" alt="Portrait photograph">

If the image is inside an images folder:

<img src="images/photo.jpg" alt="Portrait photograph">

Using a Base URL Top ↑

The <base> element can change how relative URLs are resolved for the document.

See HTML BASE URL before using it, because it affects relative links and other relative resource URLs across the page.

Remote Images and Hotlinking Top ↑

An image URL can point to another website:

<img
  src="https://example.com/images/photo.jpg"
  alt="Example remote image"
>

This is sometimes called hotlinking when your page embeds an image hosted by another site.

• The remote owner controls the file and can change or remove it.
• The image request uses the remote site's bandwidth.
• You must have the right or permission to use the image.
• A dependency on another server can affect reliability and privacy expectations.

For assets you control, hosting an appropriately licensed image on your own site is usually more reliable.

Use an Image as a Link Top ↑

Place an image inside an anchor element to make it clickable:

<a href="destination.php">
  <img
    src="thumbnail.jpg"
    alt="Open the full tutorial"
    width="200"
    height="120"
  >
</a>

See image as hyperlink and image maps.

Image Submit Buttons Top ↑

An image can also be used as a form submit control with input type="image".

See image submit button in an HTML form.

Exercise Top ↑

Common Image Mistakes Top ↑

Using alt as tooltip text Top ↑

Alt is a text alternative for the image. It should describe the image's information or purpose in context.

Leaving useful images without alt Top ↑

Informative images need meaningful alternative text. Decorative images should normally use alt="".

Using obsolete hspace, vspace, border or align attributes Top ↑

Use CSS for margins, borders and layout.

Changing width and height to the wrong aspect ratio Top ↑

Keep dimensions proportional unless you intentionally crop the image with CSS.

Omitting intrinsic dimensions on content images Top ↑

Providing correct width and height lets the browser reserve space and can reduce layout shifts.

Lazy-loading an important first-screen image Top ↑

Lazy loading is best suited to images that begin outside the initial viewport.

Hotlinking without permission Top ↑

Use images you are permitted to publish and consider hosting controlled assets locally for reliability.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: