HTML Images – A Complete Guide with Examples & Best Practices

What Are HTML Images?

HTML images are added using the <img> tag, which embeds visual content into web pages. Unlike other elements, <img> is a self-closing tag and requires attributes to define the image source, alternative text, dimensions, and more.

✅ Common Uses of Images in HTML:
✔️ Displaying logos, banners, and product images.
✔️ Enhancing website design and user engagement.
✔️ Providing visual explanations for content.

Basic Image Syntax in HTML

The <img> tag requires the src attribute to specify the image location.

Example:

<img src="example.jpg" alt="Example Image">

Explanation:

src (Source) – Specifies the image file location.
alt (Alternative Text) – Provides a description for screen readers and SEO.

✅ Best Practice: Always include an alt attribute to improve accessibility and SEO.

Using Absolute vs. Relative Image Paths

There are two ways to specify image locations:

✅ Absolute Path (URL to an external image):

<img src="https://www.example.com/images/sample.jpg" alt="Sample Image">

✅ Relative Path (Image stored in your project folder):

<img src="images/sample.jpg" alt="Sample Image">

✅ Best Practice: Use relative paths for local images and absolute URLs for images from CDNs or external sources.

Setting Image Width and Height

You can control the size of images using width and height attributes.

Example:

<img src="example.jpg" alt="Example Image" width="300" height="200">

✅ Best Practice: Use CSS for styling instead of inline attributes.

<img src="example.jpg" alt="Example Image" class="responsive-img">
.responsive-img {
    width: 100%;
    height: auto;
}

Responsive Images in HTML

To make images responsive, use the max-width: 100% and height: auto properties in CSS.

Example:

<img src="example.jpg" alt="Responsive Image" style="max-width: 100%; height: auto;">

✅ Best Practice: Use responsive images to ensure they look good on all devices.

Adding a Border Around Images

Use the border attribute (deprecated) or CSS for styling.

Example (CSS preferred):

<img src="example.jpg" alt="Image with Border" style="border: 2px solid black;">

Using Image Links in HTML

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

Example:

<a href="https://www.example.com">
    <img src="example.jpg" alt="Clickable Image" width="200">
</a>

✅ Best Practice: Always use alt text to describe linked images for SEO and accessibility.

Using the figure and figcaption Tags

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

Example:

<figure>
    <img src="example.jpg" alt="Nature Image">
    <figcaption>This is a beautiful nature scene.</figcaption>
</figure>

✅ Best Practice: Use <figure> for images with captions to enhance readability.

Lazy Loading Images for Performance

Use the loading="lazy" attribute to defer offscreen image loading, improving page speed.

Example:

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

✅ Best Practice: Always enable lazy loading for non-critical images.

Image Formats and Best Use Cases

Format	Best For	Transparency Support?
JPEG	Photos, complex images	❌ No
PNG	Logos, images with transparency	✅ Yes
GIF	Simple animations	✅ Yes
SVG	Scalable graphics, icons	✅ Yes
WEBP	Modern, compressed images	✅ Yes

✅ Best Practice: Use JPEG for photos, PNG for transparency, and WEBP for better compression.

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.