HTML · Quick Reference

Lesson 12 — HTML Images Cheat Sheet

HTML

In one line: The <img> element embeds an image. It is self-closing (no closing tag). The two required attributes are src (the image path) and alt (alternative text).

Key Ideas

1The img Element. The <img> element embeds an image. It is self-closing (no closing tag). The two required attributes are src (the image path) and alt (alternative text).

2Writing Good Alt Text. Alt text is read aloud by screen readers and shown when images fail to load. It's also indexed by search engines. Writing it well is both an accessibility and SEO task.

3Image Formats 📷JPEGPhotographs. Lossy compression. Small file size. No transparency. 🖼️PNGGraphics, logos. Lossless. Supports transparency (alpha). 🚀WebPModern format. 30% smaller than JPEG/PNG. Transparency + animation support. ✏️SVGVector graphics. Infinitely scalable. Tiny file size. Code-based. 🎞️GIFAnimations. Limited 256 colours. Use WebP or video instead for animations. ⚡AVIFNext-gen format. Even smaller than WebP. Growing browser support. 💡Modern image format strategyUse WebP as your primary format with JPEG/PNG as fallback. Use SVG for logos, icons, and illustrations. Use <picture> to serve different formats to different browsers automatically. Section 4 Responsive Images. The srcset attribute lets you provide multiple image sizes — the browser picks the best one based on the display's pixel density and viewport size. Pair with sizes for...

4figure and figcaption. Use <figure> to wrap an image with its caption. The <figcaption> element provides a visible description associated with the figure — semantically connected...

Code Examples

<!-- Minimum required attributes -->
<img src="hero.jpg" alt="A developer coding at a desk">

<!-- With explicit dimensions (recommended for performance) -->
<img
  src="profile.jpg"
  alt="Sarah Jones, Lead Developer"
  width="4...

<!-- ❌ BAD: no description, just the filename -->
<img src="img001.jpg" alt="img001">
<img src="photo.jpg" alt="photo">

<!-- ❌ BAD: keyword stuffing in alt -->
<img src="cake.jpg" alt="buy cake buy cake cheap cake order cake...

<!-- srcset: let browser choose by pixel density -->
<img
  src="hero.jpg"
  srcset="hero.jpg 1x, hero@2x.jpg 2x, hero@3x.jpg 3x"
  alt="Hero image"
>

<!-- picture: full control with format fallback -->
<picture>
  <sour...