Level:Beginner

HTML Images

Images make web pages more engaging and informative. In HTML, images are added using the <img> element, which is a self-contained (void) element.

What is the <img> Tag?

  • The <img> element embeds an image into the page.
  • It does not have a closing tag (it is a void element).
  • The browser fetches the image from the URL provided in the src attribute.

Important Image Attributes

  • src — the path or URL of the image (required).
  • alt — alternative text for accessibility and SEO (required).
  • width & height — reserve space and prevent layout shift.
  • loading="lazy" — delays loading images until needed.

Accessibility & SEO

  • Always include meaningful alt text that describes the image.
  • If an image is decorative, use alt="".
  • Search engines use alt text to understand images.

Image Examples

HTML Images Examplehtml
<!-- Basic image -->
<img src="https://via.placeholder.com/300" alt="Placeholder image" />

<!-- Image with size -->
<img
  src="https://via.placeholder.com/200"
  alt="Small placeholder image"
  width="200"
  height="200"
/>

<!-- Lazy loaded image -->
<img
  src="https://via.placeholder.com/400"
  alt="Large image loaded lazily"
  loading="lazy"
/>

<!-- Image inside a link -->
<a href="https://example.com">
  <img src="https://via.placeholder.com/150" alt="Clickable image link" />
</a>

Preview

localhost:3000
Loading preview...