HTML Images - Complete Guide with Syntax and Examples

Images are an important part of modern websites because they make webpages attractive, informative, and easier to understand. HTML provides the ability to add images using the image tag.

The HTML image tag is used to display pictures, graphics, icons, and visual content on webpages. Images can be used in websites for banners, logos, tutorials, product displays, and educational content.

In HTML, images are added using the <img> tag. This tag tells the browser where the image file is located and how it should be displayed.

Understanding HTML images is an important skill for beginners because visual content is a major part of website design.

What are HTML Images?

HTML images are visual elements added to webpages using the image tag. They allow developers to display pictures and graphics along with text content.

Unlike text elements, images help users understand information quickly and improve the overall appearance of websites.

Examples of Website Images:

Website logos
Profile pictures
Product images
Educational diagrams
Background graphics
Icons and illustrations

HTML itself does not store image files. It only provides instructions to the browser about where the image file exists and how it should be displayed.

HTML Image Tag (<img>)

The HTML image tag is used to insert images into a webpage. It is represented by the <img> tag.

The image tag is an empty or self-closing element because it does not contain any closing tag.

Syntax:

<img src="image-path">

The src attribute specifies the location of the image file.

Example:

<img src="logo.jpg">

In this example, the browser searches for the file named html-logo.png and displays it on the webpage.

Basic HTML Image Example

The following example demonstrates how to add an image using HTML.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<h1>
HTML Image Example
</h1>
<img src="logo.jpg">
</body>
</html>

Output:

HTML Image Example

Image will be displayed here by the browser.

The browser loads the image file specified in the src attribute.

src Attribute in HTML Images

The src attribute is the most important attribute of the image tag. It defines the location of the image file that needs to be displayed.

Syntax:

<img src="image-location">

Example:

<img src="images/logo.png">

Here, the browser searches for the logo.png file inside the images folder.

Importance of src Attribute:

Specifies image location.
Loads the required image file.
Connects HTML page with image resources.

alt Attribute in HTML Images

The alt attribute provides alternative text for an image. This text appears when the image cannot be loaded.

The alt attribute is also important for accessibility because screen readers use it to describe images to users.

Syntax:

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

Example:

<img src="computer.jpg"
alt="Computer Image">

Benefits of alt Attribute:

Improves accessibility.
Helps search engines understand images.
Displays information when images fail to load.
Improves image SEO.

Width and Height Attributes in HTML Images

The width and height attributes are used to control the size of images on webpages.

Syntax:

<img src="image.jpg"
width="300"
height="200">

Example:

<img src="logo.png"
width="200"
height="100">

The width attribute controls horizontal size, while the height attribute controls vertical size.

title Attribute in HTML Images

The title attribute provides additional information about an image. When users move the mouse pointer over the image, the title text appears.

Example:

<img src="html.png"
alt="HTML Logo"
title="HTML Logo Image">

The title attribute improves user understanding by providing extra details.

Common HTML Image Attributes

Attribute	Description
src	Defines image location.
alt	Provides alternative text.
width	Sets image width.
height	Sets image height.
title	Displays extra image information.

How Browser Displays HTML Images?

When a browser finds an image tag, it follows a simple process to display the image.

Working Process:

Browser reads the HTML image tag.
Browser identifies the src attribute.
Browser searches for the image file.
Image is loaded and displayed on the webpage.

If the image file is unavailable, the browser displays the alternative text provided in the alt attribute.

Conclusion

HTML images help create attractive and informative webpages. The img tag allows developers to add visual content by using attributes such as src, alt, width, and height.

In this part, we learned about HTML images, image tag, syntax, basic examples, and important image attributes.

Image Paths in HTML

An image path defines the location of an image file that needs to be displayed on a webpage. The browser uses this path from the src attribute to find and load the image.

Choosing the correct image path is important because an incorrect path will prevent the image from appearing on the webpage.

Types of Image Paths:

Absolute Image Path
Relative Image Path

Absolute Image Path

An absolute image path contains the complete address of an image file, including the website URL and file location.

Absolute paths are generally used when loading images from external websites or online resources.

Syntax:

<img src="https://www.example.com/images/photo.jpg">

Example:

<img src="https://csegyan.com/images/logo.png"
alt="CSE Gyan Logo">

The browser directly accesses the image from the provided web address.

Relative Image Path

A relative image path specifies the location of an image file relative to the current HTML file.

Relative paths are commonly used in website development because images are usually stored inside project folders.

Example:

<img src="images/computer.jpg"
alt="Computer Image">

In this example, the browser searches for the image inside the images folder.

Common Folder Structure:

Website

│

├── index.html

│

└── images

    └── logo.png

HTML Code:

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

Adding Images from Folder

In professional websites, images are usually stored in separate folders to maintain proper project organization.

Example Folder Structure:

project

│

├── index.html

│

├── css

│   └── style.css

│

└── images

    ├── logo.png

    └── banner.jpg

Adding Image:

<img src="images/banner.jpg"
alt="Website Banner">

Organizing images into folders makes websites easier to manage and maintain.

Creating Image Links in HTML

HTML allows developers to convert images into clickable links. When users click on the image, they are redirected to another webpage.

Syntax:

<a href="URL">
<img src="image.jpg"
alt="Image Link">
</a>

Example:

<a href="https://csegyan.com">
<img src="logo.png"
alt="CSE Gyan">
</a>

Image links are commonly used for logos, advertisements, and navigation buttons.

HTML Figure Tag

The figure tag is used to group images with related content. It helps organize images and their descriptions in a meaningful way.

Syntax:

<figure>
<img src="image.jpg"
alt="Description">
</figure>

Example:

<figure>
<img src="computer.jpg"
alt="Computer">
</figure>

The figure element improves the structure and readability of webpage content.

HTML Figcaption Tag

The figcaption tag is used to add a caption or description for an image inside the figure element.

Syntax:

<figure>
<img src="image.jpg"
alt="Image">
<figcaption>
Image Description
</figcaption>
</figure>

Example:

<figure>
<img src="html.jpg"
alt="HTML Logo">
<figcaption>
HTML Programming Language
</figcaption>
</figure>

Output:

HTML Programming Language

Aligning Images in HTML

Image alignment controls the position of an image on a webpage. Modern websites use CSS for image alignment instead of old HTML attributes.

Center Align Image Using CSS:

<style>
img{
display:block;
margin:auto;
}
</style>
<img src="photo.jpg"
alt="Photo">

The CSS margin property automatically places the image at the center of the webpage.

Adding Border to HTML Images

CSS can be used to add borders around images and improve their appearance.

Example:

<style>
img{
border:2px solid black;
}
</style>
<img src="image.jpg"
alt="Image">

Borders help highlight important images on webpages.

Creating Rounded Images

CSS border-radius property is used to create rounded or circular images.

Example:

<style>
img{
border-radius:50%;
}
</style>
<img src="profile.jpg"
alt="Profile Image">

Rounded images are commonly used for profile pictures and user avatars.

Controlling Image Size Using CSS

CSS provides better control over image size compared to HTML width and height attributes.

Example:

<style>
img{
width:300px;
height:auto;
}
</style>

Using height:auto keeps the original image proportion and prevents distortion.

Summary of HTML Images Part 2

Image paths define image locations.
Absolute paths contain complete URLs.
Relative paths are used for website folders.
Images can be converted into clickable links.
Figure and figcaption organize image content.
CSS improves image appearance and positioning.
Images can have borders and rounded shapes.
CSS provides better image size control.

Responsive Images in HTML

Responsive images are images that automatically adjust their size according to different screen sizes such as desktops, tablets, and mobile devices.

Modern websites must support multiple devices. If an image is too large, it can slow down webpage loading and create a poor user experience on mobile devices.

HTML and CSS provide different techniques to create responsive images.

Creating Responsive Images Using CSS

The most common method for making images responsive is using CSS with the max-width property.

Syntax:

<style>
img{
max-width:100%;
height:auto;
}
</style>

Example:

<style>
img{
max-width:100%;
height:auto;
}
</style>
<img src="nature.jpg"
alt="Nature Image">

The max-width property prevents the image from becoming larger than its original container. The height:auto property maintains the original image ratio.

HTML Picture Element

The HTML picture element allows developers to display different images based on screen size or browser conditions.

It is useful for responsive web design because different image files can be loaded for different devices.

Syntax:

<picture>
<source srcset="mobile.jpg"
media="(max-width:600px)">
<img src="desktop.jpg"
alt="Image">
</picture>

Example:

<picture>
<source srcset="small.jpg"
media="(max-width:600px)">
<img src="large.jpg"
alt="Responsive Image">
</picture>

In this example, mobile users can receive a smaller image while desktop users receive a larger image.

Common Image Formats Used in Websites

Different image formats are used in web development depending on quality, size, and purpose.

Format	Description	Common Uses
JPG / JPEG	A compressed image format suitable for photographs.	Photos, banners, background images
PNG	Supports transparency and provides high-quality images.	Logos, icons, graphics
SVG	A vector-based format that can scale without losing quality.	Icons, logos, illustrations
WebP	A modern format that provides good quality with smaller file size.	Web optimization and fast loading websites

JPG Image Format

JPG is one of the most commonly used image formats on websites. It uses compression to reduce file size while maintaining acceptable image quality.

Advantages:

Small file size.
Suitable for photographs.
Supported by all browsers.

Example:

<img src="photo.jpg"
alt="Photo">

PNG Image Format

PNG is used when image quality and transparency are important. It maintains better quality compared to JPG.

Common Uses:

Website logos.
Transparent icons.
Digital graphics.

Example:

<img src="logo.png"
alt="Logo">

SVG Image Format

SVG stands for Scalable Vector Graphics. It uses mathematical shapes instead of pixels, which allows images to be resized without losing quality.

Advantages:

High quality at any size.
Small file size.
Easy to modify using CSS and JavaScript.

Example:

<img src="icon.svg"
alt="Website Icon">

WebP Image Format

WebP is a modern image format developed for better web performance. It provides high-quality images with smaller file sizes.

Benefits:

Faster webpage loading.
Reduced bandwidth usage.
Better performance for websites.

Image SEO Optimization

Image SEO means optimizing images so that search engines can understand them and webpages can load faster.

Important Image SEO Techniques:

Use descriptive file names.
Add meaningful alt text.
Compress images before uploading.
Use modern formats like WebP.
Choose correct image dimensions.
Avoid unnecessarily large image files.

Example:

Incorrect:
<img src="img123.jpg">
Correct:
<img src="html-tutorial-image.jpg"
alt="HTML Tutorial Image">

Lazy Loading Images in HTML

Lazy loading improves website speed by loading images only when they are needed.

Syntax:

<img src="image.jpg"
alt="Image"
loading="lazy">

This technique reduces initial page loading time, especially on pages containing many images.

Common Mistakes While Using HTML Images

Using incorrect image paths.
Ignoring the alt attribute.
Uploading very large image files.
Using poor quality images.
Not making images responsive.
Using wrong image formats.
Forgetting image accessibility.

Complete Responsive Image Example

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
img{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<h1>
Responsive Image Example
</h1>
<img src="computer.jpg"
alt="Computer Image">
</body>
</html>

Output:

The image automatically adjusts according to screen size.

Advantages of HTML Images

Makes webpages visually attractive.
Improves user understanding.
Supports better content presentation.
Helps in branding through logos and graphics.
Improves user engagement.
Supports responsive website design.
Provides better communication through visuals.

Complete Summary of HTML Images

Topic	Description
img Tag	Used to insert images into webpages.
src Attribute	Defines image location.
alt Attribute	Provides alternative image description.
Image Path	Specifies image file location.
Responsive Images	Adjust images according to screen size.
Picture Element	Displays different images for different devices.

Conclusion

HTML images are an important part of web development because they improve the visual appearance and communication ability of websites. The img tag allows developers to add images using different attributes and image paths.

By understanding image formats, responsive techniques, SEO optimization, and accessibility practices, developers can create faster and more user-friendly websites.

A proper understanding of HTML images provides a strong foundation for learning advanced frontend technologies such as CSS, JavaScript, and modern web frameworks.

← Previous: HTML Links Next: HTML Lists →