html images explain deeply: quick revision, 15 bites

The <img> Tag Is a Void Element

One tag, no closing — that's how images load.

HTML images are inserted with the **<img>** tag. It is a **void (self-closing) element** — it has no closing tag and no content inside it.

Takeaway. <img> is self-contained: it references an external file, not inline content.

Two Attributes You Cannot Skip

src and alt — the non-negotiables.

Takeaway. Without src, nothing loads; without alt, the image is inaccessible.

alt Text Serves Three Purposes

alt is not just a fallback.

Takeaway. alt is accessibility, fallback, and SEO in one attribute.

Absolute vs Relative Image Paths

Where does the browser look for your image?

Takeaway. Use relative paths for your own files; absolute URLs for external images.

Common Web Image Formats

JPG, PNG, GIF, SVG, WebP — pick wisely.

Takeaway. Match format to content: JPEG for photos, PNG/SVG for graphics.

Sizing Images: width and height

Control size without breaking layout.

Setting **width** and **height** reserves space before the image loads, preventing layout shift.

Takeaway. Always set width/height to avoid content jumping as images load.

Stretching Images Distorts Them

Don't squash your images.

Takeaway. Preserve aspect ratio by scaling one dimension or using CSS.

Make Images Responsive

One image, every screen size.

Takeaway. max-width: 100% + height: auto = responsive images with one rule.

Image as a Link

Click the picture, go somewhere.

Takeaway. Wrap <img> in <a> to create image links.

Never Use alt for Decorative Images

Sometimes empty alt is correct.

Takeaway. Decorative images get alt="" — meaningful images get real descriptions.

Exam Favourite: src vs alt

Two attributes, one common trap.

Takeaway. src loads the image; alt describes it when it can't load.

Remember: S-A-W-H

Four letters, four attributes.

**S-A-W-H**: **S**rc, **A**lt, **W**idth, **H**eight — the four most-used <img> attributes.

Takeaway. S-A-W-H keeps the core <img> attributes in memory.

Images Are Not Inside the HTML File

The HTML only points to them.

The <img> tag does not contain the image — it only **references** an external file. The browser fetches that file separately over the network.

Takeaway. HTML links to images; it never embeds the pixel data itself.

Why alt Text Matters in Real Sites

Accessibility is a legal requirement.

Takeaway. Real-world sites treat alt text as a legal and UX necessity.

Using <figure> and <figcaption>

Give your image a caption.

Takeaway. <figure> + <figcaption> pairs an image with its caption semantically.