HTML img Tag: The Image Element

The <img> tag is an HTML element to add images web pages. The image element is fundamental for adding visual content to websites.

How to Use the HTML img Tag

Adding an image in HTML with the <img> tag requires the src attribute to specify the path to the image file. When using a local image, the src attribute should specify the path relative to the HTML file. To add an image to an HTML web page from an external resource, src needs to contain the full URL.

Additionally, image elements often use an alt attribute to provide alternative text for accessibility.

As an empty tag, <img> only has an opening tag and no closing tag.

<img src="images/local-image.jpg" alt="Description of the local image">
<img src="https://example.com/images/remote-image.jpg" alt="Description of the remote image">

• <img>: The empty tag in HTML to add an image to a web page.
• src: The HTML attribute that defines the path to the image file, either as a relative path or a full URL.
• alt: The attribute to provide an alternative text-based description of the image.

When to Use the HTML img Tag

Images make web pages more engaging and visually appealing. Whether it’s for an article, a blog post, or a product description, using the <img> tag is the simplest way to add images.

<img src="example.jpg" alt="Descriptive text for the image">

Examples of Using the HTML Image Tag

Countless websites use the input element to accept different types of input from users. Here are some simplified examples:

Educational Content

On educational websites, images might illustrate complex concepts or accompany tutorials.

<img src="solarsystem.jpg" alt="Diagram of the Solar System">

Real Estate Listings

Real estate websites might use images extensively to showcase properties. Each listing typically features multiple images of the property.

<img src="house.jpg" alt="Front view of a beautiful family home">

Recipe Websites

Images are also common for cooking websites. On a recipe page, they might show both the finished dish and the steps of the preparation process.

<img src="pasta.jpg" alt="Step-by-step preparation of pasta">

Learn More About the HTML Image Tag

Changing Image Size Using Width and Height Attributes

You can control the size of images directly by setting the width and height attributes of the <img> tag. These attributes accept values in pixels.

<img src="photo.jpg" alt="A photograph of a mountain" width="300" height="200">

• width: The attribute to specify the width of the image in pixels.
• height: The attribute to specify the height of the image in pixels.

If only width or height has a value, the browser resizes the image based on the original aspect ratio.

<!-- Only sets width; the height will adjust proportionally -->
<img src="photo.jpg" alt="A photograph of a mountain" width="300">

<!-- Only sets height; the width will adjust proportionally -->
<img src="photo.jpg" alt="A photograph of a mountain" height="200">

To maintain the original aspect ratio while allowing images to resize, you can use percentages instead of pixel values.

<img src="photo.jpg" alt="A photograph of a mountain" style="width:50%; height:auto;">

You can also use the max-width and max-height properties to limit the maximum size of an image. Doing so can be particularly useful for responsive designs.

<img src="photo.jpg" alt="A photograph of a mountain" style="max-width:100%; height:auto;">

Changing Image Size with HTML and CSS

You can also control the display size of images using CSS. As an example, consider responsive resizing. You can set the width attribute to 100% and the height attribute to auto.

<img src="photo.jpg" alt="Landscape Photo" style="width:100%; height:auto;">

To maintain consistency across multiple images, use a separate stylesheet.

/* Stylesheet (styles.css) */
.responsive-img {
    width: 100%;
    height: auto;
}

<img src="photo.jpg" alt="Landscape Photo" class="responsive-img">

Centering Images with HTML and CSS

To center an image horizontally on a web page, you can wrap it in a div with text-align: center.

<div style="text-align:center;">
    <img src="centered.jpg" alt="Centered Image">
</div>

To center an HTML image element vertically, you can use CSS properties like position, top, and transform.

<div style="position: relative; height: 500px;">
    <img src="vertical-centered.jpg" alt="Vertically Centered Image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div>

Background Images

Instead of using the <img> tag, you can apply images as a background to elements using CSS. Background images can go behind other elements and give you better control over their positioning and size. With CSS, you can specify properties like background-size, background-position, and background-repeat.

For instance, background-size: cover scales the image to cover the entire container while maintaining its aspect ratio. background-position: center helps you center the background image within its container element. Finally, background-repeat: no-repeat prevents the image from repeating if it's smaller than the container.

body {
    background-image: url('background.jpg');
    background-size: cover; /* Adjust to cover the entire screen */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repetition */
}

<body>
    <div style="height: 500px;">
        <h1 style="text-align: center; color: white;">Welcome to Our Website</h1>
    </div>
</body>

Using Images as Links

Wrapping an <img> tag in an <a> tag allows you to make the image a clickable link. Doing so can be useful for navigation or interactive user interfaces. For example, you can add an HTML image element as a clickable logo that redirects to your home page.

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

Lazy Loading for Performance Optimization

Lazy loading defers the loading of non-critical resources at page load time. The image only loads when it is close to becoming visible in the viewport, significantly improving page performance.

<img src="lazyimage.jpg" alt="Lazy Loaded Image" loading="lazy">

SVG Images in HTML

Scalable Vector Graphics (SVG) provide a resolution-independent image format that works well for illustrations and logos. Include an SVG image with the <img> tag or directly embed SVG code for more control and flexibility.

<img src="logo.svg" alt="Scalable Vector Graphic Logo">

Alternatively, embed the SVG code directly:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

Image File Formats

Choose the right image format based on your use case. Here are some common image file formats:

• JPEG (Joint Photographic Experts Group): Ideal for photos with many colors and gradients due to efficient compression.

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

• PNG (Portable Network Graphics): Useful for images that require transparency or lossless quality.

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

• GIF (Graphics Interchange Format): Useful for simple animations.

<img src="animated.gif" alt="Example GIF Animation">

• SVG (Scalable Vector Graphics): Great for illustrations and logos that need to scale without losing quality.

<img src="vector.svg" alt="Example SVG Logo">

• WebP (Web Picture): Offers high-quality compression for both photos and graphics.

<img src="webp-image.webp" alt="Example WebP Image">

Using the Picture Element for Art Direction

The <picture> element allows you to define multiple sources for an image, enabling art direction based on viewport size. This technique lets you use different images to suit different screen sizes, providing an optimized user experience.

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 500px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Art direction example">
</picture>