?️ HTML Image Tag

? Quick Overview

The HTML <img> tag is used to embed images like photos, illustrations, or icons in a webpage. It is a self-closing tag (no separate closing tag) and can display images from your local project folders or from online URLs.

In addition to the basic <img> tag, you can also use CSS to apply images as backgrounds on elements, and use extra attributes like loading and decoding to improve performance.

? Key Concepts

<img> tag: Embeds an image directly in the HTML document.
src: Path or URL to the image file.
alt: Alternative text shown if the image fails to load and used by screen readers.
width / height: Controls rendered dimensions of the image (usually in pixels).
title: Tooltip text shown on mouse hover.
Local vs Online: Images can come from local folders (e.g. images/photo.jpg) or an external URL.
CSS background-image: Sets an image as decorative background on any element.
loading="lazy": Delays loading of off-screen images until they are needed.
decoding="async": Decodes image data asynchronously to improve perceived performance.
usemap: Links an image to an image map with clickable regions.

? Syntax and Structure

A basic <img> element must include at least the src and alt attributes. Width and height are recommended to help the browser reserve layout space.

? Basic <img> Tag Syntax

<img src="path-or-url" alt="Short description of the image" width="300" height="200" />

To use images as decoration, you can apply them via CSS using background-image. This is useful for cards, banners, or sections where the image is not core content.

? CSS Background Image Syntax

<div style="
  width:300px;
  height:200px;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
">
</div>

? Code Examples

?️ Example – Image with src, alt, size, and title

<!-- Embedding an image with source and alt text -->
<img 
  src="https://via.placeholder.com/300"   <span class="comment"><!-- Image URL --></span>
  alt="Placeholder Image"                 <span class="comment"><!-- Alt text --></span>
  width="300"                             <span class="comment"><!-- Width (optional) --></span>
  height="200"                            <span class="comment"><!-- Height (optional) --></span>
  title="Sample Image"                    <span class="comment"><!-- Tooltip text --></span>
/>

? Example – Div with CSS background image

<!-- Div with a background image -->
<div 
  style="width:300px; height:200px;
         background-image: url('https://via.placeholder.com/300x200');
         background-size: cover;
         background-position: center;
         border-radius: 8px;">
</div>

⚙️ Example – Lazy loading and async decoding

<img 
  src="https://via.placeholder.com/300" 
  alt="Placeholder Image" 
  loading="lazy"              <span class="comment"><!-- Loads when needed --></span>
  decoding="async"            <span class="comment"><!-- Decodes asynchronously --></span>
  width="300" 
  height="200" 
/>

? Live Output / Explanation

?️ Output – Basic Image with Attributes

The following image is loaded from an external URL. The browser knows its width and height in advance, and hovering shows the title as a tooltip.

? Output – Div with Background Image

Here, the image is purely decorative. It is set as a background of a <div>, stretched to cover the full area and centered.

⚙️ Output – Lazy Loading Image

This image uses loading="lazy" and decoding="async". On long pages, it will only start loading when you scroll near it, improving performance.

? Tips & Best Practices

Always provide meaningful alt text for accessibility and SEO.
Specify width and height to reduce layout shifts while the image loads.
Optimize file size (compression, correct format) to improve loading speed.
Use relative paths like images/logo.png for project images.
Prefer background-image for decorative visuals, not for important content.
Use loading="lazy" for below-the-fold images to boost performance.

? Try It Yourself

Create a simple web page that embeds a local image with proper alt, width, and height.
Build a card layout where the image is applied via background-image on a <div>.
Add two images to a long page and set loading="lazy". Inspect network requests to see when they load.
Experiment with different background-size values: cover, contain, and specific pixel sizes.

? Summary

The <img> tag embeds images directly into your HTML.
Key attributes include src, alt, width, height, and title.
Use CSS background-image for decorative images and visual styling.
Performance attributes like loading="lazy" and decoding="async" help optimize page speed.
Always think about accessibility, performance, and layout when working with images.

Images in HTML