HTML Images: How to Add Pictures with the img Element

The img element shows an image. It is an empty element, so it has no closing tag. Two attributes are essential.

index.html

HTML

<img src="https://placehold.co/320x160/f8f2ee/49454f?text=Shop+front" alt="The front of Juniper Books, with a green door">

src is the address of the image file.
alt is a text description of the image.

Where the file lives

If the image is in your project, use a relative path:

index.html

HTML

<img src="images/shop-front.jpg" alt="The front of Juniper Books">

Keep images in an images folder so your project stays tidy. Use short, lowercase file names with hyphens: shop-front.jpg.

Which format to choose

Format	Best for
JPEG	Photographs
PNG	Graphics with sharp edges or transparency
SVG	Logos and icons that must stay sharp at any size
WebP / AVIF	Modern, smaller files for photos and graphics

Smaller files make pages load faster. A photo straight from a camera can be many megabytes. Resize and compress it before you put it on a page.

warning

Wrong path

If you see a broken image icon, the path in src does not match the real file. Check the folder, the spelling and the capital letters. Some servers treat Photo.JPG and photo.jpg as different files.

lightbulb

Name files for people and search

shop-front-maple-street.jpg is more useful than IMG_4821.jpg.