Images are an important part of modern websites. They can explain concepts visually, support branding, present products, illustrate tutorials, and make information easier to understand.
HTML provides the <img> element for displaying images on a webpage. The image element works with attributes such as src and alt to identify the image resource and provide a text alternative.
In this tutorial, you will learn how to add images to an HTML document, use image paths, write useful alternative text, control image dimensions, create responsive images, use the picture element and srcset, and optimize images for accessibility and website performance.
This HTML Images tutorial is part of the web development learning series by CSE Engineering Gyan, where computer science students and beginners can learn programming and web technologies through practical examples.
| Concept | Purpose |
|---|---|
| <img> | Displays an image on a webpage. |
| src | Specifies the image resource. |
| alt | Provides a text alternative for the image. |
| width / height | Specifies image dimensions. |
| srcset | Provides multiple image resources for responsive loading. |
| <picture> | Allows different image resources to be selected based on conditions. |
| loading="lazy" | Allows suitable images to be loaded lazily. |
An HTML image is a visual resource displayed inside a webpage using the <img> element. The browser obtains the image from the location specified by the src attribute.
The image element is a replaced element and does not contain normal text content between an opening and closing tag. Therefore, there is no separate closing </img> tag.
<img src="image.jpg" alt="Description of image">
<img src="computer.jpg"
alt="Desktop computer">
The src attribute specifies the resource that the browser should load for the image. It can contain a relative URL or an absolute URL.
<img src="images/computer.jpg"
alt="Computer">
Here, the browser looks for computer.jpg inside the images directory relative to the current webpage.
<img src="https://example.com/images/photo.jpg"
alt="Example photo">
For a production website, it is generally better to use images that you control and that are hosted reliably, rather than depending unnecessarily on third-party image URLs.
The alt attribute provides a text alternative for an image. It is particularly important when an image cannot be displayed and for users who access webpages with assistive technologies.
<img src="html-logo.png"
alt="HTML5 logo">
If an image is purely decorative and does not provide useful information, an empty alt value can be appropriate.
<img src="decorative-line.png" alt="">
The alternative text should describe the purpose or useful information conveyed by the image rather than simply repeating the image filename.
The following example demonstrates a simple HTML page containing an image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Example</title>
</head>
<body>
<h1>HTML Image Example</h1>
<p>
This webpage displays an image using the HTML img element.
</p>
<img src="images/computer.jpg"
alt="Desktop computer">
</body>
</html>
The path in the src attribute tells the browser where the image resource is located. Choosing the correct path is essential because an incorrect path can prevent the image from loading.
<img src="images/logo.png"
alt="Website logo">
<img src="../images/logo.png"
alt="Website logo">
<img src="https://example.com/images/logo.png"
alt="Website logo">
website/
│
├── index.php
├── html/
│ └── images.php
│
├── css/
│ └── style.css
│
└── assets/
└── images/
├── logo.png
└── computer.jpg
When using relative paths, always consider the location of the current HTML or PHP document.
The width and height attributes can provide intrinsic dimensions for an image.
<img src="computer.jpg"
alt="Computer"
width="400"
height="250">
Providing correct dimensions can help the browser reserve appropriate space for an image while the page loads.
For responsive layouts, CSS is normally used to control how an image fits within its container.
The <figure> element can be used when an image is a self-contained piece of content, such as an illustration, diagram, photograph, or code-related figure. The <figcaption> element can provide a visible caption.
<figure>
<img src="html-structure.png"
alt="Diagram showing the basic structure of an HTML document">
<figcaption>
Basic structure of an HTML document.
</figcaption>
</figure>
A figure caption is useful when users need additional context about the displayed image.
An image can be placed inside an anchor element to make the image clickable.
<a href="index.php">
<img src="images/logo.png"
alt="CSE Engineering Gyan Home">
</a>
This technique is commonly used for website logos and image-based navigation elements.
A responsive image adjusts to the available width of its container while maintaining its aspect ratio. This is important for websites that need to work on desktops, tablets, and mobile devices.
<img src="computer.jpg"
alt="Computer"
style="max-width:100%; height:auto;">
The max-width: 100% rule prevents the image from overflowing its container, while height: auto maintains its aspect ratio.
img {
max-width: 100%;
height: auto;
}
The srcset attribute allows developers to provide multiple image resources. The browser can select an appropriate resource according to factors such as the display size and device characteristics.
<img
src="images/course-medium.jpg"
srcset="
images/course-small.jpg 480w,
images/course-medium.jpg 800w,
images/course-large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Computer science course material">
This approach can help deliver an appropriate image resource instead of always downloading the largest available version.
The <picture> element allows developers to provide multiple image sources. It is useful when different image resources should be selected based on media conditions or image formats.
<picture>
<source
srcset="images/banner.webp"
type="image/webp">
<img
src="images/banner.jpg"
alt="Web development tutorial banner">
</picture>
The <img> element inside the picture element acts as the fallback image.
| Format | Typical Use | Important Characteristic |
|---|---|---|
| JPEG / JPG | Photographs and complex images | Lossy compression is commonly used. |
| PNG | Graphics requiring transparency or lossless quality | Supports transparency and lossless compression. |
| SVG | Logos, icons and vector illustrations | Scales without pixel-based quality loss. |
| WebP | Modern web images | Supports efficient compression and modern web delivery. |
| AVIF | Modern web image delivery | Can provide highly efficient compression for supported browsers. |
The best format depends on the image type, required quality, browser support, and performance requirements.
Large and unnecessarily high-resolution images can increase page weight and affect loading performance. Image optimization means choosing suitable dimensions, formats, compression, and loading strategies.
The loading="lazy" attribute can allow suitable images to be loaded later when they are closer to the user's viewport.
<img src="images/tutorial-diagram.jpg"
alt="HTML tutorial diagram"
loading="lazy">
Lazy loading can be useful for pages containing many images, especially images that are not immediately visible when the page first loads.
Images that are immediately visible to users may need a different loading strategy depending on the page design and performance requirements.
Accessible image usage ensures that meaningful visual information is also available to users who cannot see the image.
<img
src="network-topology.png"
alt="Star topology showing several computers connected to a central switch">
Search engines need textual and structural information to understand visual content. Proper image implementation can therefore contribute to a better-organized webpage.
<figure>
<img
src="html-document-structure.png"
alt="HTML document structure showing head and body elements">
<figcaption>
Basic structure of an HTML document.
</figcaption>
</figure>
HTML images and CSS background images serve different purposes. An HTML image is appropriate when the image is part of the page's meaningful content. A CSS background image is often appropriate for decorative presentation.
| HTML Image | CSS Background Image |
|---|---|
| Suitable for meaningful content. | Often used for decoration or visual presentation. |
| Can have alternative text. | Does not use the HTML alt attribute. |
| Can be part of document content. | Usually controlled through CSS. |
Beginners often face image-loading or accessibility problems because of incorrect paths, missing alternative text, or inappropriate image sizes.
<img src="wrong-folder/photo.jpg"
alt="Photo">
If the referenced resource does not exist at that location, the image cannot be loaded successfully.
<img src="computer.jpg">
For meaningful images, provide an appropriate text alternative.
Uploading a very large image and displaying it at a much smaller size can waste bandwidth. Preparing an appropriately sized image can improve efficiency.
img {
width: 300px;
height: 100px;
}
Using unrelated width and height values can change the image's original aspect ratio. Use responsive CSS or suitable dimensions to avoid unwanted distortion.
The following example combines several commonly used image techniques in one small webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Image Example</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>HTML Images</h1>
<figure>
<img
src="images/html.jpg"
alt="HTML programming tutorial illustration"
width="800"
height="450"
loading="lazy">
<figcaption>
HTML programming tutorial illustration.
</figcaption>
</figure>
</body>
</html>
| Concept | Remember |
|---|---|
| <img> | Used to display an image. |
| src | Specifies the image resource. |
| alt | Provides alternative text. |
| width | Specifies the image width. |
| height | Specifies the image height. |
| srcset | Provides multiple image candidates. |
| <picture> | Provides conditional image sources. |
| <figure> | Groups a self-contained visual item with related content. |
| <figcaption> | Provides a visible figure caption. |
| loading="lazy" | Enables lazy loading where appropriate. |
The <img> element is used to display an image in HTML.
The src attribute specifies the location or URL of the image resource that the browser should load.
The alt attribute provides a text alternative for an image. It is useful for accessibility and when the image cannot be displayed.
No. The <img> element does not contain normal child content and does not require a closing </img> tag.
The src attribute identifies the image resource, while alt provides a text alternative describing the image's useful content or purpose.
A common approach is to use CSS such as max-width: 100% with height: auto. For responsive resource selection, developers can also use srcset or the picture element.
The srcset attribute allows multiple image resources to be specified so that the browser can select a suitable candidate for the user's display conditions.
The <picture> element allows developers to provide different image sources based on conditions such as media queries or supported image formats.
Yes. An image can be placed inside an <a> element to make it clickable.
The <img> element displays the image, while <figure> can group a self-contained image or other visual content with related information such as a caption.
Image optimization reduces unnecessary page weight and can improve loading efficiency and the overall user experience.
Lazy loading allows suitable images to be deferred until they are closer to the user's viewport. It can be useful on pages containing many images.
HTML images allow developers to add meaningful visual content to webpages. The <img> element works primarily with attributes such as src and alt, while additional techniques such as srcset, <picture>, CSS responsiveness, and image optimization help create better websites.
For accessible and maintainable webpages, use meaningful alternative text for informative images, appropriate image dimensions, responsive techniques, and suitable image formats. Avoid using unnecessarily large image files or incorrect image paths.
Understanding HTML images is an important step in learning frontend development. After learning images, students can continue with HTML lists, tables, forms, multimedia, semantic elements, CSS, and JavaScript.
CSE Engineering Gyan provides computer science and engineering tutorials designed for students and beginners. The content covers programming, web development, data structures, databases, operating systems, computer networks, and other important computer science subjects.
If you are learning HTML and web development, follow the complete HTML tutorial series on the CSE Engineering Gyan YouTube channel for concept explanations and practical examples.