Introduction

HTML Images 2025 : A Complete Guide for Beginners – Images make web pages more attractive and informative. Imagine a webpage without pictures—it would look boring and lifeless. HTML allows us to add images easily, making content more engaging and visually appealing.

---

What is the <img> Tag?

HTML uses the <img> tag to display images on a webpage. This tag does not need a closing tag.

Example:

<img src="image.jpg" alt="A beautiful sunset">

• src (source): Specifies the path to the image.
• alt (alternative text): Provides a text description if the image does not load.

---

How to Add Images in HTML

1. Using Local Images

You can add images stored on your computer. Ensure the image is in the same folder as your HTML file or provide the correct file path.

Example:

<img src="images/picture.jpg" alt="A cute cat">

2. Using Online Images

You can use images directly from the internet by providing their URL.

Example:

<img src="https://example.com/picture.jpg" alt="A scenic landscape">

3. Using Absolute and Relative Paths

• Absolute Path: Specifies the full URL of an image.
• Relative Path: Specifies the image location relative to the HTML file.

Example of Absolute Path:

<img src="https://mywebsite.com/images/pic.jpg" alt="Mountain view">

Example of Relative Path:

<img src="images/pic.jpg" alt="Lake view">

---

HTML Image Attributes

1. alt Attribute

The alt attribute is used for accessibility and SEO. It helps describe the image when it cannot be displayed.

Example:

<img src="dog.jpg" alt="A happy dog playing in the park">

2. width and height Attributes

These attributes control the size of the image.

Example:

<img src="car.jpg" width="500" height="300" alt="A red car">

3. title Attribute

Displays a tooltip when the user hovers over the image.

Example:

<img src="bird.jpg" title="A flying bird" alt="A bird in the sky">

4. loading Attribute

This attribute helps improve page speed by loading images only when needed.

Example:

<img src="forest.jpg" loading="lazy" alt="A dense forest">

---

How to Link an Image

You can make an image clickable by placing it inside an <a> (anchor) tag.

Example:

<a href="https://example.com">
  <img src="logo.png" alt="Company Logo">
</a>

---

Image Formats in HTML

1. JPEG (JPG)

• Best for photographs.
• Supports millions of colors.
• Small file size but loses quality with compression.

2. PNG

• Supports transparency.
• Higher quality than JPEG.
• Larger file size.

3. GIF

• Used for animations.
• Supports transparency.
• Limited to 256 colors.

4. SVG

• Best for logos and icons.
• Can be resized without losing quality.

5. WebP

• Modern format with smaller file size and high quality.
• Supported in most browsers.

---

Responsive Images

1. Using CSS

You can make images responsive using CSS.

Example:

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

2. Using the picture Tag

You can use the <picture> tag to provide different image versions for different screen sizes.

Example:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="A city skyline">
</picture>

---

Common Issues and Solutions

1. Why is my image not displaying?

• Check if the src path is correct.
• Ensure the file extension matches (e.g., .jpg, .png).
• Check for typos in the filename.

2. Why is my image too large?

• Use width and height attributes or CSS to resize it.
• Compress the image using online tools.

3. Why is my image not responsive?

• Add max-width: 100% in CSS.
• Use the <picture> tag for different screen sizes.

4. Why is the image overlapping other elements?

• Use CSS properties like float: left or display: block to position it correctly.

5. Why is my alt text not showing?

• Alt text only appears when the image cannot load.
• Check if the alt attribute is correctly written.

---

How to Position an Image in HTML

Basic Image Positioning in HTML

To display an image in HTML, we use the <img> tag. Here’s a basic example:

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

This will display the image, but by default, it appears in the top-left corner of the page. Let’s explore ways to change its position.

---

How to Position an Image in HTML

1. Using the align Attribute (Old Method)

In older HTML versions, the align attribute was used to position an image. However, this is now outdated and not recommended.

<img src="image.jpg" alt="Sample Image" align="right">

2. Using CSS for Image Positioning

The best way to position an image is by using CSS.

Centering an Image

To center an image, use the following CSS:

<img src="image.jpg" alt="Centered Image" class="center">

.center {
  display: block;
  margin: auto;
}

Moving an Image to the Left or Right

.left-image {
  float: left;
}
.right-image {
  float: right;
}

<img src="image.jpg" alt="Left Image" class="left-image">
<img src="image.jpg" alt="Right Image" class="right-image">

Positioning an Image with Absolute Positioning

If you want to place an image at a specific position on the page:

.positioned-image {
  position: absolute;
  top: 50px;
  left: 100px;
}

<img src="image.jpg" alt="Positioned Image" class="positioned-image">

This places the image 50px from the top and 100px from the left of the page.

---

How to Wrap Text Around an Image

To wrap text around an image, use the float property in CSS.

.float-left {
  float: left;
  margin-right: 10px;
}

<img src="image.jpg" alt="Floating Image" class="float-left">
<p>This text wraps around the image.</p>

This makes the text flow around the image.

---

How to Put an Image Below Another Image

To stack images one below another, simply add them in order inside the HTML:

<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">

Use CSS for spacing:

img {
  display: block;
  margin-bottom: 10px;
}

---

How to Put Text Next to an Image

To place text beside an image:

<div style="display: flex; align-items: center;">
  <img src="image.jpg" alt="Side Image" width="100">
  <p>This text is next to the image.</p>
</div>

This method ensures text appears beside the image.

---

How to Make an Image a Button

To turn an image into a clickable button:

<a href="https://example.com">
  <img src="button.jpg" alt="Clickable Button">
</a>

Clicking the image will open the linked webpage.

---

How to Change the Background Color of an Image

If you want to add a background color behind an image:

.image-container {
  background-color: lightgray;
  display: inline-block;
  padding: 10px;
}

<div class="image-container">
  <img src="image.jpg" alt="Colored Background Image">
</div>

---

How to Crop an Image in HTML

Cropping an image can be done using CSS:

.crop {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

<img src="image.jpg" alt="Cropped Image" class="crop">

This will crop the image to 100×100 pixels and remove excess parts.

---

How to Make an Image Clickable

To make an image a clickable link:

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

This will take users to the given URL when they click on the image.

---

FAQs

---

Summary

• Avoid broken images by checking the file path and format.
• Use the <img> tag to add images.
• Always include the alt attribute for accessibility.
• Resize images using width and height.
• Use modern formats like WebP for better performance.
• Make images responsive with CSS or the <picture> tag.

HTML Headers 2025: A Complete Guide for Beginners

HTML Tags 2025: A Complete Guide with Questions and Answers