Quick answer

Step 1: Add the <img> tag

The <img> element places an image on the page. It’s an empty (void) element: it has no content and no closing tag. Everything it needs goes in attributes:

1. src: where the image file is (a file path or a full web address).
2. alt: a short text description of the image, shown if it can’t load and read aloud by screen readers.
3. width and height: the image’s size in pixels (numbers only, no “px”).

The example uses free placeholder photos from picsum.photos. Change the number in the address to load a different picture.

Step 2: Get the src path right

If you see a broken-image icon instead of your picture, the path in src is almost always the reason. The path is relative to the HTML file:

Check the file extension and capital letters too: Photo.JPG and photo.jpg are different files on most web servers. And only use images from other websites if you have permission; linking straight to someone else’s image (“hotlinking”) uses their bandwidth and can break without warning.

Step 3: Write good alt text

The alt attribute is required for valid HTML, and it matters for real people: screen reader users hear it instead of seeing the image, everyone sees it when an image fails to load, and search engines use it to understand the picture (it helps the image appear in Google Images).

• Describe what matters in the image, in one short sentence: alt="A golden retriever catching a frisbee".
• Don’t start with “image of” or “picture of”. Screen readers already say it’s an image.
• For a clickable image, describe where it goes: a logo linking home gets alt="FreeHTMLEditor.net home".
• For purely decorative images, use an empty value: alt="". Screen readers then skip it. Don’t leave the attribute out completely.

Step 4: Resize images with CSS

The width and height attributes reserve space while the image downloads, which stops the page content from jumping around. To make the image actually fit different screens, add CSS:

• max-width: 100%; height: auto; lets an image shrink on small screens but never grow larger than its real size, and keeps its proportions. Most sites apply this to every image.
• object-fit: cover fills a fixed box (for example a square thumbnail) without squashing the image, cropping the edges instead.
• border-radius rounds the corners; 50% on a square image makes a circle.

Resizing with CSS only changes how big the image is displayed; the browser still downloads the full file. For speed, save images at roughly the size they’re shown (for example about 1600 pixels wide for a full-width photo) and compress them.

Step 5: Add a caption or make the image a link

To give an image a visible caption, wrap it in <figure> and add a <figcaption>. The caption is tied to the image, which helps screen readers and search engines.

To make an image clickable, put the <img> inside an <a href> link. The image’s alt text then becomes the link’s text, so describe the destination.

Make images load faster

• Lazy loading: add loading="lazy" to images further down the page. The browser then waits until the visitor scrolls near them. Don’t use it on the main image at the top of the page.
• Modern formats: WebP and AVIF files are much smaller than JPEG or PNG at the same quality, and all current browsers support WebP.
• Different sizes for different screens: the srcset attribute lists several versions of the same image, and the browser downloads the one that fits the screen: srcset="photo-800.jpg 800w, photo-1600.jpg 1600w" with sizes="100vw".
• Art direction: to show a differently cropped image on phones, use the <picture> element with <source media="..."> tags.

<img> or CSS background image?

There are two ways to show a picture, and they’re for different jobs. Use an <img> when the image is content: a product photo, a diagram, a picture in an article. It has alt text, appears in Google Images and is printed with the page. Use a CSS background-image when the image is decoration: a texture, a pattern, or a photo behind a heading. Background images have no alt text and are invisible to screen readers and search engines, so never put important information only in a background. See how to add a background image for the CSS method.

Which image format should I use?

Common mistakes when adding images

• A wrong path. Check the folder, the spelling, the extension and the capital letters. Open the image address directly in the browser to test it.
• Missing alt text. Every <img> needs an alt, even if it’s empty for decorative images.
• Leaving out width and height. The page jumps as images load, which annoys visitors and hurts your Core Web Vitals score.
• Stretched images. Setting both width and height in CSS to the wrong ratio squashes the picture. Use height: auto or object-fit.
• Huge files. A 5 MB photo from a phone camera slows the page down. Resize and compress it first.
• Writing a closing tag. </img> doesn’t exist; the tag closes itself.

Related HTML tags

Frequently asked questions