Adding Images

Complete HTML Course (Free)

About Lesson

This lesson will guide you on how to add images to your web pages using HTML. You will learn about the <img> tag, its attributes, and best practices for including and styling images.

1. Why Use Images in Web Pages?

Images enhance the visual appeal of a website, help convey information more effectively, and engage users. They can be used as illustrations, icons, backgrounds, or to complement text content.

2. The `<img>` Tag

The <img> tag is used to embed images in an HTML document. It is a self-closing tag, meaning it doesn’t require a closing tag.

Syntax:

<img src="image_path" alt="description" />

Key Attributes:

src (Source): Specifies the path to the image file.
alt (Alternative Text): Provides a text description for the image, which is essential for accessibility and is displayed if the image fails to load.

3. Adding Images to a Web Page

Embedding a Local Image:
- Place the image file in the same directory as your HTML file or specify the correct relative path.
```
<img src="image.jpg" alt="A sample image" />
```

Embedding an Online Image:

Use the full URL of the image as the src.

<img src="https://example.com/image.jpg" alt="A sample online image" />

4. Common `<img>` Attributes

width and height:
- Specify the dimensions of the image in pixels or percentage.
```
<img src="image.jpg" alt="A sample image" width="300" height="200" />
```

title:

Adds a tooltip that appears when the user hovers over the image.

<img src="image.jpg" alt="A sample image" title="Hover text example" />

loading:
- Optimizes performance by controlling how images load.
  - lazy: Loads the image only when it’s visible in the viewport.
```
<img src="image.jpg" alt="A sample image" loading="lazy" />
```

5. Example: Adding and Styling Images

<!DOCTYPE html>
<html>
<head>
    <title>Adding Images Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .responsive {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Adding Images in HTML</h1>
    <p>Here is an example of an embedded image:</p>
    <img src="example.jpg" alt="A beautiful landscape" width="500" />
    <p>This image is styled to be responsive:</p>
    <img src="example.jpg" alt="A responsive image example" class="responsive" />
</body>
</html>

6. Advanced Usage of Images

Using Images as Links:

Wrap an image inside an <a> tag to make it clickable.

<a href="https://example.com">
    <img src="image.jpg" alt="Click to visit example.com" />
</a>

Background Images (CSS):

Add images as background elements using CSS.

body {
    background-image: url('background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

Image Maps:

Create clickable areas within an image using the <map> tag and <area> elements.

<img src="map.jpg" alt="Clickable map" usemap="#imagemap" />
<map name="imagemap">
    <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1" />
    <area shape="circle" coords="337,300,44" href="link2.html" alt="Link 2" />
</map>

7. Best Practices for Adding Images

Use Optimized Images:
- Compress images to reduce file size and improve page load speed.
Provide Descriptive alt Text:
- Describe the image content clearly for accessibility and SEO.
Ensure Responsiveness:
- Use CSS or set max-width: 100% to ensure images adapt to various screen sizes.
Lazy Loading:
- Use the loading="lazy" attribute to delay image loading, improving performance on pages with many images.
Organize Images:
- Store images in a dedicated folder (e.g., /images) for better organization.

8. Hands-On Activity: Adding Images

Create a folder and include an HTML file (index.html) and an image file (landscape.jpg).

Add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Image Example</title>
</head>
<body>
    <h1>Adding Images</h1>
    <p>Here is an example of an embedded image:</p>
    <img src="landscape.jpg" alt="A beautiful landscape" />
</body>
</html>

Open the HTML file in your browser to see the image displayed.

9. Summary

Images are added using the <img> tag with attributes like src, alt, width, and height.
Images can be embedded from local directories or online sources.
Styling images with CSS ensures they adapt to various devices and layouts.
Following best practices like optimizing images and adding alt text improves performance and accessibility.