How to add an image in HTML
Use the <img> element. src is the image file, alt describes it, and width and height give its size in pixels. <img> is a void element: it has no closing tag.
The src here is a small SVG written into the URL (a data URI) so the example works offline. On a real site src is a path to a file:
src | Loads |
|---|---|
photo.jpg | photo.jpg in the same folder as the HTML file |
images/photo.jpg | From the images folder next to the HTML file |
../photo.jpg | From one folder up |
/images/photo.jpg | From the images folder at the root of the site |
https://example.com/photo.jpg | From another site (it can move or disappear) |
Paths are case-sensitive on most web servers: Photo.JPG and photo.jpg are different files.
Alt text
The alt text stands in for the image. Screen readers read it aloud, and the browser shows it when the image cannot load. Both images here point at files that do not exist:
The first shows its alt text, "Coddy logo", where the image should be. The second has an empty alt, so there is no text to show, and screen readers skip it. How to write alt:
- Describe what matters in context. "Bar chart: sales doubled from March to June" says more than "chart".
- Do not start with "Image of". Screen readers already announce it as an image.
- Use
alt=""for decoration (a divider, a background flourish) so screen readers skip it. - Never leave
altout. Without it, some screen readers read the file name instead, such as "IMG underscore 4032 dot jpg". - For an image inside a link, describe the destination:
<a href="/"><img src="logo.svg" alt="Home"></a>.
Setting the image size
width and height attributes are in pixels, with no unit. CSS sizes override them. The most useful CSS for images is this pair, which lets an image shrink with its container but never stretch past its natural width:
The first image keeps its 300 pixels and spills out of the 180-pixel box. The second scales down to 180 by 120, keeping its 3:2 shape. height: auto matters: without it, the height="200" attribute would keep the image 200 pixels tall and squash it.
Always write width and height in the HTML, even for responsive images. The browser uses them to reserve the right amount of space before the file arrives, so the text below does not jump down when the image loads.
Cropping with object-fit
When an image must fill a box of a different shape (a square avatar from a wide photo, cards of equal height), object-fit decides what happens to the extra:
The source is a 2:1 picture of a circle, shown in square boxes:
fill(the default) stretches the image to the box, so the circle becomes an oval.containfits the whole image inside, leaving empty bands.coverfills the box and crops the overflow, keeping the circle round. It is the usual choice for thumbnails and avatars.
object-position picks which part stays visible when cropping, for example object-position: top for portraits.
Captions with figure and figcaption
A caption that belongs to an image goes in <figcaption>, and both go in <figure>. That ties them together for screen readers, and the figure can be styled as one unit:
The caption does not replace alt. alt says what the image shows; the caption adds what a sighted reader would also need.
The gap under an image
An image sits on the text baseline, like a letter, so its container leaves room under it for the descenders of letters like g and y. A border makes the gap visible:
The first border has a strip of white under the blue image. display: block on the image (second box) removes it; so does vertical-align: middle if the image must stay inline.
Lazy loading and responsive sources
For images further down a long page, loading="lazy" delays the download until the reader scrolls near them:
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
Do not lazy load the main image at the top of the page; it delays the part of the page readers see first.
To send smaller files to small screens, list several sizes in srcset and tell the browser how wide the image will be displayed with sizes. The browser picks the file:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> goes further and offers different formats, with the <img> as the fallback that also carries the alt:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Image formats
| Format | Good for |
|---|---|
| JPEG | Photos |
| PNG | Screenshots, images that need sharp edges or transparency |
| WebP | Photos and graphics, smaller than JPEG and PNG, with transparency |
| AVIF | Photos, usually smaller than WebP |
| SVG | Logos, icons and diagrams; scales to any size without blurring |
| GIF | Short animations, though a muted looping <video> is much smaller |
Common mistakes
- A path from your own computer, like
src="C:\Users\me\photo.jpg". It works only on your machine. Put the file next to your HTML and use a relative path. - Missing
alt. Every<img>needs one, empty for decoration. - Setting both
widthandheightin CSS to values of a different shape. The image stretches. Set one and leave the otherauto, or useobject-fit. - No
widthandheightattributes, so the page jumps as images load. - Huge files scaled down with CSS. A 4000-pixel photo shown at 400 pixels still downloads in full. Resize it, or use
srcset. - A closing
</img>tag.<img>is void; there is nothing to close.
The images in the examples above are small inline SVGs. To try the same code with your own photos, paste it into the HTML playground.
Frequently Asked Questions
How do you add an image in HTML?
Use the <img> tag with the file in src and a description in alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> has no closing tag.
How do I change the size of an image in HTML?
Set width and height attributes in pixels, or use CSS such as img { width: 300px; height: auto; }. Setting only one dimension and leaving the other auto keeps the proportions.
Why is my image not showing in HTML?
Usually the src path is wrong: it is relative to the HTML file, file names are case-sensitive on most servers, and a path like C:\photos\cat.jpg only exists on your computer. Open the image URL directly in the browser to check it.
What is alt text in HTML?
The alt attribute is a text replacement for the image. Screen readers read it, and browsers show it when the image fails to load. Describe what the image shows or does; use alt="" for purely decorative images.
How do I make an image responsive?
Add max-width: 100%; height: auto; to it in CSS. The image then shrinks to fit a narrow container and never grows past its natural width.
Why is there a gap under my image?
Images are inline by default and sit on the text baseline, which leaves room for letter descenders below them. Set display: block on the image, or vertical-align: middle, to remove the gap.
