HTML Images

HTML images are used to display pictures, graphics, logos, icons, illustrations, and other visual content on a web page. Images can make a website more attractive and help users understand information more easily.

In HTML, images are added using the <img> element. The src attribute specifies the image location, while the alt attribute provides alternative text for the image.

In this tutorial, you will learn how to add images in HTML, use the src and alt attributes, control image size, create image links, use responsive images, and follow image SEO and accessibility best practices.

What Are HTML Images?

An HTML image is an image displayed on a web page using the <img> element.

The basic syntax is: <img src=”image.jpg” alt=”Description of the image”>

Here:

• <img> is the HTML image element.
• src specifies the image file or URL.
• alt provides alternative text describing the image.

For example: <img src=”html-logo.png” alt=”HTML logo”>

HTML <img> Element

The <img> element is used to embed an image into a web page.

Unlike elements such as <p> and <h1>, the <img> element does not have a closing tag.

Correct: <img src=”photo.jpg” alt=”A beautiful landscape”>

You do not need to write: <img src=”photo.jpg” alt=”A beautiful landscape”></img>

The <img> element is an empty element.

The HTML src Attribute

The src attribute specifies the path or URL of the image. <img src=”flower.jpg” alt=”A flower”>

If the image is located inside an images folder: <img src=”images/flower.jpg” alt=”A flower”>

You can also use an absolute URL: <img src=”https://example.com/images/flower.jpg” alt=”A flower”>

For images hosted on your own website, relative paths are often convenient.

The HTML alt Attribute

The alt attribute provides alternative text for an image.

<img src=”laptop.jpg” alt=”Laptop on a desk”>

The alternative text can be useful when:

• The image cannot be loaded.
• A user uses a screen reader.
• The image provides meaningful information.
• Search engines need to understand the image context.

The alt text should accurately describe the image when the image conveys information.

Decorative Images and Empty alt

If an image is purely decorative and does not provide useful information, an empty alt attribute can be appropriate.

<img src=”decorative-line.png” alt=””>

This tells assistive technologies that the image does not need to be announced as meaningful content.

HTML Image Width and Height

You can specify the dimensions of an image using the width and height attributes.

<img src=”laptop.jpg” alt=”Laptop on a desk” width=”500″ height=”300″>

These attributes can help the browser reserve space for the image while the page loads.

However, responsive designs often use CSS to control the final displayed size.

img {
    max-width: 100%;
    height: auto;
}

This allows images to shrink within smaller containers while maintaining their proportions.

HTML Images with CSS

CSS can be used to style images.

<img class="tutorial-image" src="html.jpg" alt="HTML tutorial">

.tutorial-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

You can use CSS to control:

• Width
• Height
• Borders
• Border radius
• Margins
• Alignment
• Shadows
• Object fitting

HTML Image Formats

Different image formats are suitable for different situations.

Format	Common Use
JPEG/JPG	Photographs and complex images
PNG	Images requiring transparency
GIF	Simple animations
SVG	Logos, icons, and scalable graphics
WebP	Modern compressed web images
AVIF	Modern high-efficiency web images

For websites, modern formats such as WebP and AVIF can often provide smaller file sizes while maintaining good visual quality.

HTML Image Links

You can make an image clickable by placing the <img> element inside an <a> element.

<a href="/html/html-images/">
    <img src="html-image.jpg" alt="Learn HTML Images">
</a>

When the user clicks the image, the browser navigates to the specified page.

HTML Image Titles

You can add a title attribute to an image.

<img src=”html-logo.png” alt=”HTML logo” title=”HTML Logo”>

However, the alt attribute should be used for meaningful alternative text. Do not use title as a replacement for alt.

HTML Images with Captions

The <figure> and <figcaption> elements can be used when an image needs a visible caption.

<figure>
    <img src="html-structure.jpg" alt="Basic HTML document structure">
    <figcaption>Basic structure of an HTML document.</figcaption>
</figure>

The <figure> element groups the image and its caption, while <figcaption> provides the visible caption.

HTML Responsive Images

Responsive images adjust to different screen sizes.

A simple CSS approach is:

img {
    max-width: 100%;
    height: auto;
}

For example:

<img src=”website.jpg” alt=”Responsive website design”>

On smaller screens, the image can shrink to fit its container.

HTML Lazy Loading

The loading attribute can be used to provide a loading hint to the browser.

<img src=”large-image.jpg” alt=”Large landscape” loading=”lazy”>

loading="lazy" can be useful for images that are initially outside the visible area of the page.

For important images near the top of the page, you should consider whether lazy loading is appropriate rather than applying it to every image.

HTML Image Links and Accessibility

When an image is used as a link, its alt text should describe the purpose of the link.

For example:

<a href="/html/html-images/">
    <img src="images-course.jpg" alt="Learn HTML Images">
</a>

The alternative text communicates what the linked image represents.

HTML Images and SEO

Images can contribute to a well-structured and useful web page.

For better image SEO:

• Use descriptive file names.
• Write useful alt text for meaningful images.
• Use appropriate image formats.
• Compress large images.
• Use responsive images.
• Avoid unnecessarily large image dimensions.
• Place images near relevant content.
• Use captions when they provide useful context.

For example, instead of:

IMG001.jpg

a descriptive filename could be:

html-image-element.jpg

Common Mistakes with HTML Images

Forgetting the alt Attribute

Avoid: <img src=”html.jpg”>

Prefer: <img src=”html.jpg” alt=”HTML tutorial example”>

Using Incorrect Image Paths

If the image is inside an images folder, the path should match its actual location.

<img src=”images/html.jpg” alt=”HTML example”>

Using Very Large Images

Uploading a very large image when a smaller version is sufficient can increase page loading time.

Resize and compress images appropriately before using them.

Using alt Text for Keyword Stuffing

Do not fill alt text with unnecessary keywords.

Bad: <img src=”html.jpg” alt=”HTML HTML tutorial HTML course HTML images HTML”>

Better: <img src=”html.jpg” alt=”HTML image element example”>

HTML Images Best Practices

Follow these practices when working with HTML images:

• Always use meaningful alt text for informative images.
• Use alt="" for purely decorative images when appropriate.
• Use descriptive image filenames.
• Optimize image file sizes.
• Use modern image formats when suitable.
• Make images responsive.
• Use width and height appropriately.
• Use <figure> and <figcaption> when an image needs a caption.
• Use loading="lazy" where appropriate.
• Do not use images when normal HTML text would be more appropriate.

Complete HTML Images Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>

    <style>
        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
    </style>
</head>
<body>

    <h1>HTML Images</h1>

    <p>
        Images can make web pages more attractive and informative.
    </p>

    <figure>
        <img
            src="images/html-tutorial.jpg"
            alt="HTML tutorial displayed on a computer screen"
            width="800"
            height="450"
            loading="lazy"
        >
        <figcaption>Learn HTML with practical examples.</figcaption>
    </figure>

</body>
</html>

HTML Images Cheat Sheet

Code	Purpose
<img>	Displays an image
src	Specifies the image location
alt	Provides alternative text
width	Specifies the image width
height	Specifies the image height
loading="lazy"	Provides a lazy-loading hint
<figure>	Groups an image with related content
<figcaption>	Adds a caption to an image