The <img> tag embeds an image into a page. It's a void element — no closing tag, no content — that points the browser at an image file and describes it for anyone who can't see it.
Why Images Matter
Images make up the majority of most web pages' total download size, and they're one of the biggest levers on both page speed and accessibility — get them wrong and you slow down every visitor and lock out anyone using a screen reader.
Syntax
<img src="image-path" alt="description">Basic Example
<img src="/assets/images/course-banner.jpg" alt="Students collaborating on a laptop during a CodingNow live class">Browser output: the image renders inline exactly where the tag appears, at its natural size unless CSS or the width/height attributes constrain it.
What This Module Covers
| Topic | What it solves |
|---|---|
| img-tag | Every attribute the img element supports |
| image-alt-attribute | Writing alt text that's actually useful |
| image-width-height | Preventing layout shift as images load |
| figure / figcaption | Captioned, self-contained images |
| responsive-images, srcset, picture-element | Serving the right image size/format per device |
| lazy-loading-images | Deferring offscreen images to save bandwidth |
Common Mistakes
- Uploading full-resolution camera/design images straight to a page instead of properly compressed, web-sized versions
- Skipping
alttext entirely — see image-alt-attribute for why this matters more than almost any other HTML detail
Best Practices
- Always compress and correctly size images before uploading
- Always include meaningful
alttext - Reserve layout space with
width/heightto avoid content jumping around as images load
Accessibility Considerations
Every meaningful image needs alt text — it's one of the single highest-impact accessibility fixes on the entire web, and one of the most commonly skipped.
SEO Considerations
Images are indexed by search engines through their alt text and filenames, and page speed (heavily influenced by image weight) is a documented ranking factor. See Image SEO for the full picture.
Browser & Modern HTML Notes
HTML5 and beyond added a lot to this space beyond the plain <img> tag — srcset, <picture>, and native loading="lazy" all exist specifically to solve real performance and responsive-design problems that a single <img src> can't.
Mini Practice
- Add an image to a page with meaningful alt text describing what it shows.
- Explain, in your own words, why alt text matters for both accessibility and SEO.
