HTML Image

The HTML <img> element displays an image in a webpage. It is a void element, so it does not need a closing tag. The image file is specified with the src attribute, while the alt attribute provides a text alternative.

</>
Copy
<img src=""/>

A practical image element usually includes both src and alt.

</>
Copy
<img src="images/flower.jpg" alt="Pink flower in a garden">

Display an Image in HTML

The following is a basic example to display HTML Image in a webpage.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <img src="https://www.tutorialkart.com/img/dragonfly.jpg">
  
</body>
</html>

The browser reads the image address from src, downloads the file, and renders it at the position of the <img> element.

Use Alternative Text with the HTML Image Tag

When the image at the provided src is not available, browsers display a broken image symbol.

alt attribute helps to display an alternative text when image is not available. This increases readability of the webpage when the image is not available.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <h2>Image loaded</h2>
  <img src="https://www.tutorialkart.com/img/dragonfly.jpg">
  
  <br>
  <h2>Image not loaded</h2>
  <img src="https://www.tutorialkart.com/img/dragonfly_n.jpg">
  
  <br>
  <h2>Image not loaded, but alternate text is present</h2>
  <img src="https://www.tutorialkart.com/img/dragonfly_n.jpg" alt="Dragon Fly">
  
</body>
</html>

Alt attribute is very useful when you consider SEO for your website. alt attribute acts as a description to the images and let the search engines know what the image is about.

Write alternative text that communicates the image’s purpose in the current page. Avoid phrases such as “image of” unless they add useful meaning. For a decorative image that conveys no information, use an empty value: alt="".

HTML Image Source Paths

The src value can be an absolute URL or a relative file path. Use an absolute URL for an image hosted at a complete web address. Use a relative path for an image stored within the same website or project.

</>
Copy
<!-- Image in the same folder as index.html -->
<img src="logo.png" alt="Company logo">

<!-- Image inside an images folder -->
<img src="images/team.jpg" alt="Project team">

<!-- Image one folder above the current file -->
<img src="../images/banner.jpg" alt="Website banner">

<!-- Image from a complete URL -->
<img src="https://example.com/images/map.png" alt="Location map">

File paths are resolved from the location of the HTML document. Check spelling, folder names, filename extensions, and letter case when an HTML image is not showing.

Set HTML Image Width and Height

The width and height attributes define the rendered dimensions in CSS pixels. Providing both values also allows the browser to reserve space before the image loads, which reduces layout movement.

</>
Copy
<img
  src="images/product.jpg"
  alt="Blue ceramic coffee mug"
  width="640"
  height="480"
>

To make the image shrink on smaller screens while keeping its proportions, combine intrinsic dimensions with responsive CSS.

</>
Copy
img {
  max-width: 100%;
  height: auto;
}

Avoid changing the CSS width and height to values with a different aspect ratio, because that stretches or compresses the image.

Turn an HTML Image into a Link

Place the <img> element inside an anchor element to make the image clickable.

</>
Copy
<a href="product.html">
  <img
    src="images/product-thumbnail.jpg"
    alt="View details for the blue ceramic mug"
    width="240"
    height="180"
  >
</a>

The alternative text should describe the link’s destination or action when the image is the only content inside the link.

Add an HTML Image Caption with Figure and Figcaption

Use <figure> when an image and its caption form one self-contained item. Place the caption inside <figcaption>.

</>
Copy
<figure>
  <img
    src="images/rainfall-chart.png"
    alt="Monthly rainfall rises from January to July and then declines"
    width="720"
    height="420"
  >
  <figcaption>Monthly rainfall recorded during the year.</figcaption>
</figure>

Load Responsive HTML Images with Srcset and Sizes

The srcset attribute offers several image files at different widths. The sizes attribute tells the browser how much viewport width the image is expected to occupy, allowing it to choose a suitable file.

</>
Copy
<img
  src="images/city-800.jpg"
  srcset="
    images/city-480.jpg 480w,
    images/city-800.jpg 800w,
    images/city-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="City skyline at sunset"
  width="1200"
  height="800"
>

The src file remains a fallback. Use srcset when the same image is available at multiple resolutions.

Choose Different HTML Image Crops with Picture

The <picture> element can supply different image files for different conditions, such as a narrow crop for mobile screens. The nested <img> element is required as the fallback and carries the alternative text.

</>
Copy
<picture>
  <source
    media="(max-width: 600px)"
    srcset="images/landscape-mobile.jpg"
  >
  <source
    media="(min-width: 601px)"
    srcset="images/landscape-wide.jpg"
  >
  <img
    src="images/landscape-wide.jpg"
    alt="Mountain landscape beside a lake"
    width="1200"
    height="700"
  >
</picture>

Position Text over an HTML Image

To write text on an image, place both elements inside a positioned container. Keep sufficient contrast between the text and the image.

</>
Copy
<div class="image-card">
  <img src="images/forest.jpg" alt="Forest path in morning light">
  <p class="image-card__text">Morning Walk</p>
</div>
</>
Copy
.image-card {
  position: relative;
  max-width: 640px;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
}

.image-card__text {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.65);
  color: white;
}

Improve HTML Image Loading

Use loading="lazy" for images that begin outside the initial viewport. This lets the browser postpone downloading them until they are near the visible area.

</>
Copy
<img
  src="images/gallery-photo.jpg"
  alt="Stone bridge over a river"
  width="900"
  height="600"
  loading="lazy"
>

Do not automatically apply lazy loading to a prominent image that appears immediately at the top of the page, because that image should normally load without delay.

Why an HTML Image Is Not Showing

  • Incorrect path: Confirm the path is relative to the HTML file.
  • Filename mismatch: Check spelling, extension, spaces, and letter case.
  • File not uploaded: Verify that the image exists at the expected server location.
  • Unsupported or damaged file: Open the image directly to confirm that it is valid.
  • Blocked remote image: The external server may reject requests or prevent embedding.
  • Mixed content: An HTTPS page may block an image requested over HTTP.
  • CSS hides the image: Inspect rules such as display: none, zero dimensions, or hidden overflow.

Open the browser developer tools and check the Network and Console panels. A 404 response usually means the file path is incorrect or the file is missing.

HTML Image Attribute Reference

AttributePurpose
srcSpecifies the image file URL or path.
altProvides a text alternative for accessibility and failed loading.
widthDefines the intrinsic rendered width in CSS pixels.
heightDefines the intrinsic rendered height in CSS pixels.
srcsetLists alternative image resources and their widths or pixel densities.
sizesDescribes the expected display size used with width-based srcset.
loadingControls eager or lazy loading behavior.
decodingProvides a browser hint for image decoding.

HTML Image Editorial QA Checklist

  • Confirm every informative image has specific and useful alt text.
  • Use alt="" only for images that are purely decorative.
  • Verify every local image path from the location of the HTML document.
  • Include accurate width and height values where practical.
  • Test responsive images at narrow and wide viewport sizes.
  • Check that linked images clearly describe their destination.
  • Verify that text placed over images remains readable.

HTML Image FAQs

What is the HTML code to display an image?

Use <img src="image.jpg" alt="Description of the image">. Replace image.jpg with the correct URL or file path.

How do I insert an image from a folder in HTML?

Use a relative path such as <img src="images/photo.jpg" alt="Description"> when the folder named images is beside the HTML file.

Why is my HTML image not showing?

The usual causes are an incorrect path, a misspelled filename, a case mismatch, a missing file, or a blocked remote URL. Check the browser’s Network panel for the request status.

How do I make an HTML image responsive?

Set max-width: 100% and height: auto in CSS. This allows the image to shrink with its container while preserving its aspect ratio.

Can I make an image clickable in HTML?

Yes. Place the <img> element inside an <a> element and set the link destination with href.