Images

Why you need this

A page of plain text is boring. A product photo, an avatar, a logo, a diagram — they are all pictures. In HTML a picture is not "embedded" into the file: the page holds only its address, and the browser downloads the image separately and shows it in the right place.

The <img> tag

<img> is a single tag (there is no closing one). Everything is set with attributes:

<img src="logo.png" alt="CodeWithMe logo">

• src (source) — the address of the picture;
• alt (alternative) — a text description.

Result: the picture logo.png. If the file is missing, a "broken picture" icon and the text «CodeWithMe logo» appear instead.

Where the picture comes from

src works just like href in links:

<img src="cat.jpg" alt="Cat">                  <!-- a file next to the page -->
<img src="images/dog.png" alt="Dog">           <!-- in the images folder -->
<img src="https://example.com/a.png" alt="…">  <!-- from another site -->

Formats: .jpg — photos, .png — pictures with transparency, .svg — icons and logos (they don't lose quality when enlarged), .webp — a modern format that weighs less.

The editor on the right has no cat.jpg file, so you will see a broken-picture icon and the alt text. That's fine — the check looks at the attributes.

Why alt matters

alt is not a formality:

• blind people listen to pages with a screen reader — it reads alt aloud;
• if the picture didn't load (slow internet), the alt text is shown;
• search engines learn from alt what is in the picture.

A good alt describes the essence: «A ginger cat sleeping on the sofa», not «picture» or «IMG_2031». If a picture is purely decorative (a pattern, a divider), write an empty alt="" — screen readers will skip it.

Sizes

The width and height attributes set the size in pixels:

<img src="cat.jpg" alt="Cat" width="200">

Result: a picture 200 pixels wide; the height adjusts itself and the proportions are kept.

If you set both sides with different proportions, the picture gets stretched. Usually both are set to the real size of the file: then the browser reserves space for the picture in advance, and the text doesn't "jump" while it loads. The displayed size is changed in CSS.

A caption: <figure> and <figcaption>

A picture with a caption is wrapped in <figure>, and the caption goes in <figcaption>:

<figure>
  <img src="chart.png" alt="Sales growth over the year" width="400">
  <figcaption>Fig. 1. Sales doubled</figcaption>
</figure>

Result: an indented picture with a caption line below it.

A picture as a link

A link can wrap a picture — this is how a logo that leads to the home page is made, or a preview that opens a big photo:

<a href="/">
  <img src="logo.svg" alt="To the home page" width="120">
</a>

Result: a clickable logo. Here alt describes where the link leads.

How it works inside

<img> is an inline element: it sits in a line like a big letter. So two pictures in a row end up side by side, not one under the other. While a picture loads, the browser already draws the rest of the page. If the sizes aren't given, it learns them only after loading — and the text shifts.

Common mistakes

1. No alt. The page becomes inaccessible to blind people. Always write alt.
2. A closing </img>. It doesn't exist — <img> is a single tag.
3. Backslashes in a path. src="images\cat.jpg" (like in Windows) is wrong. The web uses only /.
4. Letter case in a file name. On a server, Cat.JPG and cat.jpg are different files. Use lowercase names.
5. A huge photo for a small picture. A 5 MB file with width="100" is still downloaded in full. Shrink the file in advance.

Cheat sheet

Code	What it does
<img src="…" alt="…">	a picture with a description
width="200" / height="100"	size in pixels
alt=""	a decorative picture
<figure> + <figcaption>	a picture with a caption
<a href="…"><img …></a>	a picture as a link