HTML Images: A Beginner’s Guide to the HTML picture Element

HTML images make web pages more engaging, informative, and easier to understand. If you want to learn how to display pictures on a website, understanding HTML images, the HTML image element, and the HTML picture element is a great place to start. These HTML elements allow you to add photographs, illustrations, icons, and responsive images to a web page while helping browsers display the most appropriate visual content.

In this beginner’s guide, you’ll learn how to add an image in HTML, write the correct image syntax, use the img and picture elements, and choose the right image source for different screen sizes and devices. You’ll also explore practical HTML examples, common mistakes, accessibility considerations, and techniques for displaying images more efficiently.

What Are HTML Images?

HTML images are visual elements embedded in a web page using HTML markup. They can include photographs, logos, diagrams, screenshots, illustrations, and other graphics that support the page’s content.

The most common way to display an image in HTML is with the <img> element. It uses the src attribute to specify the image URL and the alt attribute to provide alternative text describing the image.

For example:

<img src="flower.jpg" alt="A pink flower in bloom">

This HTML code for an image tells the browser to load flower.jpg and display it on the page. The alternative text describes the image for people who cannot see it and for situations where the image cannot be displayed.

HTML images can come from files stored in your website’s directory or from an external image URL. You can also use the HTML picture element to offer different image sources depending on the browser’s capabilities or the device’s display requirements.

Understanding these basic elements makes it easier to create accessible, responsive, and visually appealing websites.

How to Add an Image in HTML

Adding an image in HTML is straightforward. You need an image file, its location, and an HTML element that tells the browser where and how to display it.

Basic HTML Image Syntax

The standard HTML image syntax looks like this:

<img src="image.jpg" alt="Description of the image">

Here is what each part means:

• <img>: The HTML image element that embeds an image in the page.
• src: The source attribute that identifies the image file or URL.
• alt: Alternative text that describes the image when it conveys meaningful information.

The img element is a void element, which means it does not require a closing tag. You may also see it written as <img />, but the slash is unnecessary in standard HTML.

A Complete HTML Image Example

Suppose you have an image named mountains.jpg saved in the same folder as your HTML file. You can display it with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Image</title>
</head>
<body>
    <h1>Beautiful Mountains</h1>

    <img
        src="mountains.jpg"
        alt="Snow-covered mountains beneath a clear sky"
        width="600"
    >
</body>
</html>

When you open this page in a browser, the heading appears first, followed by the mountain photograph. The width attribute specifies a display width of 600 CSS pixels, while the browser calculates the height from the image’s natural proportions.

This is a simple example of how to make an image in HTML without using JavaScript or additional libraries.

How to Include a Picture in HTML Using a URL

You can also display an image stored on another website by using its publicly accessible URL.

<img
    src="https://example.com/images/landscape.jpg"
    alt="A green landscape with rolling hills"
>

Replace the example URL with the actual image URL. The remote server must allow the image to be accessed, and the URL must point to the image resource rather than an ordinary web page.

For images stored on your own website, relative paths are often easier to maintain. For example, images/landscape.jpg points to an image inside an images folder relative to the current page’s location.

What Is the HTML picture Element?

The HTML picture element allows you to provide multiple image sources so the browser can select an appropriate image for the current conditions.

It is particularly useful when you want to display different image formats, art-directed versions of a photograph, or alternative image files for different viewport sizes.

Unlike the img element, the picture element does not display an image by itself. It works with one or more <source> elements and a final <img> element.

Here is a basic example:

<picture>
    <source
        srcset="landscape.webp"
        type="image/webp"
    >
    <img
        src="landscape.jpg"
        alt="A scenic landscape with green hills"
    >
</picture>

In this example, the browser can select the WebP source when it supports that format. The JPEG image serves as a fallback when the preferred source is not supported or cannot be selected.

The <img> element remains essential because it provides the image that is ultimately displayed, along with its alternative text and other image attributes.

HTML picture Element vs. HTML img Element

Although these elements work together, they serve different purposes.

For a straightforward photograph, the img element is usually enough. Use the picture element when you need more control over which image file the browser selects.

How to Use the HTML picture Tag with Different Image Formats

Modern image formats can help reduce file sizes while maintaining suitable visual quality. The picture element lets you offer different formats and provide a fallback.

<picture>
    <source
        srcset="product.avif"
        type="image/avif"
    >
    <source
        srcset="product.webp"
        type="image/webp"
    >
    <img
        src="product.jpg"
        alt="A black backpack displayed against a white background"
        width="600"
        height="600"
    >
</picture>

The browser evaluates the available sources in order and selects a supported source. If none of the listed sources is suitable, the browser uses the JPEG specified by the img element.

Use actual file paths and make sure each file contains the intended image. Providing multiple formats can improve compatibility and allow supported browsers to download a more efficient file.

How to Use the picture Element for Responsive Images

Responsive images help websites deliver suitable visuals across different screen sizes. With the media attribute, you can tell the browser when to select a particular source.

<picture>
    <source
        media="(max-width: 600px)"
        srcset="images/mobile-banner.jpg"
    >
    <source
        media="(min-width: 601px)"
        srcset="images/desktop-banner.jpg"
    >
    <img
        src="images/desktop-banner.jpg"
        alt="A wide landscape banner showing a mountain range"
        width="1200"
        height="500"
    >
</picture>

This example offers a mobile image for viewport widths up to 600 pixels and a desktop image for larger viewports. The browser evaluates the media conditions and chooses the appropriate source.

This approach is especially useful when a mobile screen needs a tightly cropped subject while a desktop screen can accommodate a wider composition.

Keep in mind that responsive image selection and responsive image sizing are related but different tasks. If you want the same image to adapt to different display sizes, srcset and sizes on an img element may be a better fit.

Understanding the Important HTML Image Attributes

The HTML image element supports several attributes that control the image source, accessibility, dimensions, and loading behavior.

The src Attribute

The src attribute specifies the image file the browser should load.

<img src="images/profile.jpg" alt="A person smiling">

The value can be a relative file path or an absolute URL. If the path is incorrect or the resource is unavailable, the browser may display a broken-image indicator.

The alt Attribute

The alt attribute provides alternative text for an image. It is important for accessibility and helps users understand meaningful images when they cannot see them.

<img
    src="team.jpg"
    alt="Three colleagues working together at a desk"
>

Write alternative text that communicates the image’s purpose or relevant information. Avoid stuffing keywords into the description.

For purely decorative images that do not add meaningful information, use an empty alternative text value:

<img src="decorative-line.png" alt="">

The appropriate description depends on the context. A photograph used as a link, for example, may need alternative text that describes the link’s purpose rather than every visual detail.

The width and height Attributes

The width and height attributes define the image’s intended display dimensions in CSS pixels.

<img
    src="product.jpg"
    alt="A ceramic coffee mug"
    width="800"
    height="800"
>

Providing the correct intrinsic dimensions allows browsers to reserve space before an image finishes loading. This can help reduce unexpected layout shifts.

If you want the image to shrink on smaller screens, you can use CSS:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

This keeps the image within its available container while preserving its aspect ratio.

The srcset and sizes Attributes

The srcset attribute lets you offer multiple image files at different resolutions. The sizes attribute tells the browser how much space the image is expected to occupy at different viewport sizes.

<img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w,
            photo-800.jpg 800w,
            photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="A cyclist riding along a country road"
    width="800"
    height="533"
>

In this example, the browser uses the available information, including the viewport and device pixel density, to select an appropriate image resource.

These attributes are useful when the same photograph needs to be displayed at different sizes. They can reduce unnecessary downloads while helping maintain image clarity.

The loading Attribute

The loading attribute can influence when an image is loaded.

<img
    src="gallery-photo.jpg"
    alt="A photograph of a city skyline"
    loading="lazy"
    width="800"
    height="533"
>

The lazy value allows the browser to defer loading an image until it is closer to entering the viewport.

This can be useful for images farther down a long page. However, avoid lazy-loading an important above-the-fold image that is likely to be the page’s Largest Contentful Paint element. Such images generally benefit from being discoverable and loaded promptly.

Best Practices for Using HTML Images

Correct image markup is only one part of creating a useful website. You should also consider accessibility, responsiveness, performance, and maintainability.

Choose the Right Image Format

Different image formats serve different purposes.

• JPEG/JPG: Commonly used for photographs and complex images with many colors.
• PNG: Useful for graphics that need lossless compression or transparency.
• WebP: Supports lossy and lossless compression, as well as transparency.
• AVIF: Supports efficient image compression and can be suitable for photographs and other detailed visuals.
• SVG: Useful for scalable vector graphics such as logos, icons, and illustrations.

The best format depends on the image, the required quality, browser support, and the needs of your website. You can use the picture element to offer alternative formats where appropriate.

Use Descriptive File Names

A descriptive file name makes your image assets easier to identify and manage.

For example, red-running-shoes.jpg is more informative than IMG0007.jpg when the photograph shows red running shoes.

Use concise, meaningful file names that accurately describe the image. Avoid renaming files with unrelated keywords just to influence rankings.

Make Images Responsive

Images should fit their containers without becoming distorted or causing horizontal scrolling on small screens.

A common CSS approach is:

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

For more advanced layouts, combine responsive CSS with srcset, sizes, or the picture element. Choose the approach that matches your design and image-delivery requirements.

Consider Image File Size

Large image files can increase download time and consume more data, especially on mobile connections. Compressing images before uploading them can help reduce unnecessary file size.

Choose compression settings that balance visual quality and performance. For additional savings, serve appropriately sized images instead of forcing every visitor to download the largest available version.

Write Useful Alternative Text

Alternative text should describe meaningful visual information in context. It should not be treated as a place to repeat the primary keyword or list unrelated search terms.

For example, if an image shows a person compressing a photograph on a laptop, describe that action when it is relevant to the surrounding content.

Keep HTML Markup Valid

Use the correct elements and attributes for their intended purposes. Place <source> elements inside a <picture> element, followed by an <img> element. Use valid image URLs, meaningful alternative text, and appropriate dimensions.

Well-structured HTML makes your code easier to maintain and helps browsers interpret the page as intended.

Common HTML Image Mistakes to Avoid

Small markup errors can prevent images from appearing correctly or make a website less accessible.

Using an Incorrect Image Path

If your HTML file points to the wrong folder or filename, the browser may not find the image.

For example:

<img src="photo.jpg" alt="A mountain landscape">

This works only if photo.jpg is available at the specified relative location. If the file is inside an images folder, use images/photo.jpg instead.

Forgetting the alt Attribute

Meaningful images should have appropriate alternative text. Omitting it can make the image less accessible to people who rely on screen readers.

For decorative images, use alt="" rather than adding unnecessary descriptions.

Using the picture Element Without an img Element

The picture element is not a standalone image display element. It must contain an img element that represents the image to display.

Incorrect:

<picture>
    <source srcset="photo.webp" type="image/webp">
</picture>

Correct:

<picture>
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="A scenic mountain view">
</picture>

Stretching Images with CSS

Setting an image’s width and height without preserving its proportions can distort the visual result.

For a responsive image, use height: auto with max-width: 100%, or define an intentional aspect ratio when the design requires a crop.

Using Images That Are Too Large

Uploading unnecessarily large images can waste bandwidth and slow down page loading. Resize and compress images according to their intended display size, and use responsive image techniques when appropriate.

Frequently Asked Questions About HTML Images

What is the HTML tag used to show an image?

The <img> element is the standard HTML element used to display an image. Its src attribute specifies the image location, while alt provides alternative text.

Example:

<img src="photo.jpg" alt="A photograph of a garden">

What is the difference between the HTML img and picture elements?

The img element displays an image directly. The picture element provides multiple possible image sources, allowing the browser to select a suitable format or image based on media conditions and supported features. A picture element contains an img element.

How do I display a picture in HTML from a URL?

Place the image URL in the src attribute of an img element.

<img
    src="https://example.com/photo.jpg"
    alt="A photograph of a green forest"
>

Make sure the URL points directly to an accessible image resource.

Can I display multiple images in HTML?

Yes. You can add multiple img elements to a page, place them inside a gallery container, or organize them in a list.

For example:

<ul>
    <li>
        <img src="cat.jpg" alt="A cat sitting on a sofa">
    </li>
    <li>
        <img src="dog.jpg" alt="A dog playing in a garden">
    </li>
    <li>
        <img src="bird.jpg" alt="A small bird perched on a branch">
    </li>
</ul>

This creates a simple HTML list of images. CSS can be used to arrange them into a grid or gallery.

Is the HTML picture tag the same as the img tag?

No. The picture element is a container for alternative image sources, while the img element represents the actual image. They work together when you need responsive source selection.

How can I make an image fit a mobile screen?

Use responsive CSS such as max-width: 100% and height: auto. If you need different resolutions or compositions for different screens, consider srcset, sizes, or the picture element.

Does HTML compress images automatically?

No. HTML markup does not itself compress the image file. Image compression must happen before delivery or through an image-processing or image-delivery service. You can then use HTML to select and display the optimized image.

Conclusion

HTML images are a fundamental part of building modern websites. The img element is the simplest way to display a photograph or graphic, while the HTML picture element gives you more control over image source selection, responsive designs, and alternative formats.