How to Add an Image in HTML: The Complete img Tag Guide

Every developer's first HTML image ends up broken at least once, usually because of a typo in the file path rather than the tag itself. The good news is that adding an image in HTML takes only a few lines. Once the attributes make sense, the rest is just picking the right variant: a plain photo, a responsive image that swaps sizes, or a clickable thumbnail.

This guide covers the tag itself, the attributes that actually matter, file paths, responsive images, and the mistakes that trip up most beginners.

The Basic Syntax for How to Add Image in HTML

The <img> element is a void element. It has no closing tag and no content between tags, since the image itself is the content.

html

The src attribute provides the image URL, while srcset can provide alternative image sources for responsive images. At least one of src or srcset must be present. alt isn't enforced by browsers the same way, but the MDN documentation on the img element treats it as mandatory in practice. It's what screen readers announce, and it's also the text shown if the image fails to load from a broken link, a network error, or content blocking.

Understanding the img Tag's Core Attributes

Beyond src and alt, a handful of attributes cover most real-world cases:

Setting width and height does more than control display size. According to MDN, giving both values lets the browser reserve the image's space in the layout before the file finishes loading, which cuts down on the content jumping around as the page renders. Skipping them is one of the more common causes of that jarring layout shift beginners notice on slow connections.

Relative, Root-Relative, and Absolute URLs for Images

This is where most broken images actually come from, not the tag syntax.

A relative URL points to a file based on the current document's location:

html

A root-relative URL starts from the site's root with a leading slash, and an absolute URL points to a full external address:

html

A relative URL breaks the moment the folder structure changes or the page referencing it moves to a different directory, since the browser recalculates it against the new location. A root-relative URL (starting with /) survives that kind of move because it's anchored to the domain, not to the current file.

Making Images Responsive with srcset and sizes

A single <img> tag can offer several file sizes and let the browser pick the right one for the viewport, rather than forcing every device to download a desktop-sized file.

html

Each entry in srcset pairs a file with its actual pixel width using the w descriptor. The sizes attribute then tells the browser how wide the image will actually render at different viewport widths, so it can pick the smallest file that still looks sharp. This is genuinely different from a plain <img> tag with one src, since the browser is choosing between real alternatives instead of scaling one file up or down.

Using the picture Element for Format Fallbacks

srcset handles resolution switching. When the goal is offering a modern file format with a fallback, <picture> is the better fit:

html

The browser checks each <source> in order and uses the first format it supports, falling back to the <img> tag's src if none of the listed types work. This is the standard way to serve AVIF or WebP to browsers that support them while still supporting older ones.

Wrapping Images with figure and figcaption

When an image needs a visible caption, <figure> and <figcaption> group the image and its caption as a single semantic unit. That's a stronger connection than a nearby paragraph, which has no actual link to the image in the markup.

html

Making an Image Clickable

Wrapping an <img> in an anchor tag turns the whole image into a link:

html

The alt text should describe where the link goes in this case, not just describe the picture, since a screen reader user hears the alt text as the content of the link itself.

Lazy Loading Images for Performance

The loading="lazy" attribute tells the browser to defer loading an image until it's about to scroll into view:

html

The loading attribute is widely supported in current browsers, so it can be used without a JavaScript fallback in modern projects. It's worth skipping on images near the top of the page, like a hero banner. Those need to load immediately, not wait on a scroll event before the user expects to see them.

Common Mistakes When Adding Images in HTML

• Leaving out alt entirely. An empty alt="" is valid for purely decorative images, but a missing attribute altogether is different, and screen readers handle the two cases differently.

• Setting width and height in CSS without preserving the image's aspect ratio can distort the image. Use dimensions that match the image's proportions, or let CSS scale it proportionally.

• Using an absolute local file path like C:\Users\name\Pictures\photo.jpg. That path exists only on the machine that wrote it and will 404 for anyone else.

• Forgetting the file extension case matters on servers with case-sensitive file systems (most Linux-based hosting). Photo.JPG and photo.jpg are different files there, even though Windows treats them as the same.

• Applying loading="lazy" to an above-the-fold hero image, which delays the exact image users see first.

Quick Reference: Which Approach Fits Your Situation

FAQ About Adding Images in HTML

What is the correct HTML tag for an image? The <img> tag, with src pointing to the file and alt describing it for accessibility.

Do I need both width and height on every image? Not strictly, but including both helps the browser reserve layout space before the image loads, which reduces content shifting as the page renders.

Why isn't my image showing up? The most frequent cause is an incorrect file path, either a typo, a wrong relative path, or a case mismatch between the file name and the src value.

Can I use a URL from another website as the src? Yes, src accepts any valid absolute URL, though the image will only display as long as that external file stays online and the host allows outside embedding.

What's the difference between img and picture? <img> displays an image and can use srcset for different resolutions. <picture> lets you provide different image formats or art-directed versions, with a fallback <img>.

How do I make an image clickable? Wrap the <img> tag inside an <a href="..."> element.

The Short Version

Once you know the basic <img> syntax, the rest is about choosing the right technique for the situation: width and height to stop layout shift, srcset and sizes for responsive files, <picture> for format fallbacks, and <figure> when a caption belongs with the image. Get the file path right first, since that's where most broken images actually come from.