How to Insert Images in HTML-How HTML

How to Insert Images in HTML

When creating a website, it is important to include images to make your content more visually appealing and engaging. In HTML, you can easily insert images using the <img> element. In this article, we will discuss various methods to insert images in your HTML documents.

1. Inserting an Image from a URL

You can easily insert an image from a URL by specifying the src attribute of the <img> element.

<!DOCTYPE html>
<html>
<head>
    <title>Insert Image from URL</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image">
</body>
</html>

Output:

How to Insert Images in HTML

In this example, the image located at the URL “https://how2html.com/wp-content/themes/dux/img/logo.png” will be displayed in the document.

2. Inserting an Image from a Local File

To insert an image from a local file on your computer, you need to specify the file path in the src attribute of the <img> element.

<!DOCTYPE html>
<html>
<head>
    <title>Insert Image from Local File</title>
</head>
<body>
    <img src="file:///C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="Example Image">
</body>
</html>

Output:

How to Insert Images in HTML

Make sure to provide the absolute file path to the image on your local machine. Keep in mind that when you upload your HTML document to a web server, the file path may need to be adjusted.

3. Specifying Image Width and Height

You can control the size of the image by specifying the width and height attributes of the <img> element.

<!DOCTYPE html>
<html>
<head>
    <title>Image Size</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image" width="300" height="200">
</body>
</html>

Output:

How to Insert Images in HTML

In this example, the image will be displayed with a width of 300 pixels and a height of 200 pixels.

4. Adding Alternative Text

It is important to include alternative text for an image using the alt attribute. This text will be displayed if the image fails to load or for accessibility purposes.

<!DOCTYPE html>
<html>
<head>
    <title>Alternative Text</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="This is an example image">
</body>
</html>

Output:

How to Insert Images in HTML

The text “This is an example image” will be displayed if the image cannot be loaded.

5. Aligning Images

You can align images to the left, right, or center using the align attribute.

<!DOCTYPE html>
<html>
<head>
    <title>Align Image</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image" align="left">
</body>
</html>

Output:

How to Insert Images in HTML

The image will be aligned to the left of the document.

6. Adding Borders to Images

You can add borders to images using the border attribute.

<!DOCTYPE html>
<html>
<head>
    <title>Image Border</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image" border="1">
</body>
</html>

Output:

How to Insert Images in HTML

This will add a border with a thickness of 1 pixel around the image.

7. Image Links

You can turn an image into a link by wrapping the <img> element inside an <a> (anchor) element.

<!DOCTYPE html>
<html>
<head>
    <title>Image Link</title>
</head>
<body>
    <a href="https://www.how2html.com/">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image">
    </a>
</body>
</html>

Output:

How to Insert Images in HTML

Clicking on the image will now redirect the user to the specified URL.

8. Adding Image Captions

To add a caption below an image, you can use the <figure> and <figcaption> elements.

<!DOCTYPE html>
<html>
<head>
    <title>Image Caption</title>
</head>
<body>
    <figure>
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image">
        <figcaption>This is an example image</figcaption>
    </figure>
</body>
</html>

Output:

How to Insert Images in HTML

The caption “This is an example image” will be displayed below the image.

9. Responsive Images

To make images responsive and adapt to different screen sizes, you can use the max-width style property.

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Image</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image">
</body>
</html>

Output:

How to Insert Images in HTML

The max-width: 100%; property ensures that the image will not exceed the width of its container.

10. Lazy Loading Images

Lazy loading is a technique that delays the loading of offscreen images until the user scrolls to them. This can improve page load times.

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Loading Image</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Example Image" loading="lazy">
</body>
</html>

Output:

How to Insert Images in HTML

By adding the loading="lazy" attribute to the <img> element, the browser will lazily load the image.

Conclusion

In this article, we have explored various ways to insert images in HTML documents. Whether you are linking to external images, embedding local files, or customizing image properties, HTML provides a straightforward way to enhance the visual appeal of your web content. Experiment with different techniques and effectively incorporate images into your web pages.

How to Insert Images in HTML