HTML Images – A Complete Guide with Examples & Best Practices

Introduction: Why Images Are Important in HTML

Images make webpages:

  • Visually attractive

  • Easier to understand

  • More engaging

  • More professional

From logos and banners to product photos and illustrations, images are a core part of modern web design.

HTML allows you to display images using the <img> tag.
This guide explains HTML images step by step, in a clear, beginner-friendly, teacher-style way.

What Are HTML Images?

HTML images are visual elements added to a webpage using the <img> tag.

👉 In simple words:
The <img> tag tells the browser where the image file is and how it should be displayed.

Basic Syntax of HTML Image Tag

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

Key Parts

AttributePurpose
srcPath to the image file
altAlternative text (very important)

👉 <img> is a self-closing (empty) tag.

Example 1: Display a Simple Image

<img src="photo.jpg" alt="A beautiful landscape">

Output Explanation

  • Browser loads photo.jpg

  • If image fails to load, alt text is shown

  • Screen readers read the alt text

Image Source (src) Attribute

The src attribute specifies the location of the image.

Types of Image Paths

1. Relative Path (Most Common)

<img src="images/logo.png" alt="Company Logo">

✔ Best for internal images
✔ Portable and clean

2. Absolute Path

<img src="https://example.com/images/logo.png" alt="Company Logo">
  • Used for external images
  • Depends on external server

The alt Attribute (Very Important)

The alt attribute provides alternative text for the image.

<img src="logo.png" alt="W3 HTML School Logo">

Why alt Matters

  • Improves accessibility

  • Helps screen readers

  • Shown when image fails to load

  • Supports SEO

⚠️ Never skip the alt attribute.

Setting Image Width and Height

Using HTML Attributes

<img src="photo.jpg" alt="Nature" width="300" height="200">

Using CSS (Recommended)

 
<img src="photo.jpg" alt="Nature" class="img-style">
 
.img-style { width: 300px; height: auto; }
  • Better
  • Control Responsive-friendly

Responsive Images in HTML

You can use an image as a clickable link by wrapping it inside an <a> tag.

Example:

Make Image Responsive Using CSS
img {
  max-width: 100%;
  height: auto;
}

Image scales automatically on smaller screens.

Using Images as Links

For better semantic HTML, use the <figure> and <figcaption> tags to group images with captions.

Example:

 
<a href="https://example.com">
  <img src="logo.png" alt="Visit Website">
</a>
  • Common for logos
  •  Improves navigation

HTML Image Formats

FormatExtensionUse Case
JPEG.jpgPhotos
PNG.pngTransparent images
GIF.gifSimple animations
SVG.svgIcons, logos
WebP.webpModern, optimized

WebP is recommended for performance.

Image Title Attribute (Optional)

<img src="photo.jpg" alt="Sunset" title="Beautiful Sunset">

Shows tooltip on hover

Aligning Images with CSS

img {
display: block;
margin: auto;
}


 Centers image horizontally

 

HTML figure and figcaption (Semantic Images)

<figure>
  <img src="mountain.jpg" alt="Mountain View">
  <figcaption>Mountain during sunrise</figcaption>
</figure>
  • Semantic
  •  Accessible
  •  SEO-friendly

Full Example – Image Optimization in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Images Example</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <h1>HTML Images Example</h1>

    <p>Basic Image:</p>
    <img src="example.jpg" alt="Sample Image" width="300">

    <p>Responsive Image:</p>
    <img src="example.jpg" alt="Responsive Image" class="responsive-img">

    <p>Lazy Loaded Image:</p>
    <img src="example.jpg" alt="Lazy Loaded Image" loading="lazy">

    <p>Image with Caption:</p>
    <figure>
        <img src="example.jpg" alt="Nature Scene">
        <figcaption>A beautiful nature scene.</figcaption>
    </figure>

</body>
</html>

Best Practices for Using Images in HTML

  •  Use alt text for accessibility and SEO.
  •  Prefer relative paths for local images.
  •  Optimize images using WebP format for better performance.
  •  Use CSS for responsive design instead of fixed widths.
  •  Enable lazy loading for offscreen images.

Common Beginner Mistakes

  • Missing alt attribute
  •  Wrong image path
  •  Using huge image sizes
  •  Stretching images using width/height
  •  Using images instead of text for content

HTML Images and SEO

Image SEO Tips

  • Use descriptive alt text

  • Use meaningful file names (html-tutorial.png)

  • Compress images

  • Use modern formats

  • Avoid text inside images

Accessibility Best Practices

  • Always include alt

  • Avoid decorative images without alt=""

  • Use <figure> for captions

  • Ensure sufficient contrast

FAQs: HTML Images

Which tag is used for images in HTML?

<img> tag.

Is <img> a container tag?

No, it is an empty tag.

Why is alt important?

For accessibility and SEO.

Can images be responsive?

Yes, using CSS.

Can I use images as links?

Yes.