How to Work with Images in HTML?

Last Updated : 18 Oct, 2024

Adding images to your web pages is crucial for enhancing visual appeal and user engagement. In HTML, there are different methods to embed images, and this guide will cover two common approaches with syntax and examples.

These are the following ways to Work with Images in HTML:

Table of Content

Adding Static Images
Responsive Images for Modern Websites

Adding Static Images

In many cases, you’ll want to include static images that have fixed sizes. This is useful for simple web pages where the layout is constant across all devices. Let’s take a look at a basic example.

Syntax:

<img src="image_path" alt="image_description" width="400" height="250">

Where:

src: Refers to the image file landscape.jpg located in the same directory as the HTML file.
alt: Describes the image as “A scenic view of mountains and a lake.”
width and height: Define the image size as 400x250 pixels.

Example: This example shows the use of static images.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <title>Static Image Example</title>
</head>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911162743/GeeksforGeeks-Logo.png"
        alt="GFG logo" width="400" height="250" />
</body>

</html>

Output:

Responsive Images for Modern Websites

In today's digital landscape, it's crucial for web pages to look great on all devices, from desktops to smartphones. To accomplish this, images must be responsive, adjusting automatically to fit different screen sizes.

Syntax:

<img src="image_path" alt="image_description" width="400" height="250">

Example: The max-width: 100% property ensures the image never exceeds the width of its container, while height: auto maintains the aspect ratio of the image.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <title>Responsive Image Example</title>
    <style>
        img {
            max-width: 80%;
            height: auto;
        }
    </style>
</head>

<body>
    <h1>Responsive Image Demo</h1>
    <p>The image below will resize to fit the screen:</p>

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911162743/GeeksforGeeks-Logo.png"
         alt="GFG logo" />
</body>

</html>

Output:

Conclusion

Working with images in HTML is essential for web design, and there are different approaches depending on your project’s needs. Static images with fixed dimensions are simple and reliable for basic web pages. However, responsive images ensure that your content looks good on any device, providing a better user experience for a wider audience.