Theory
The poster that never showed up
FestConnect's home page should open with a bright event poster. You add it, refresh, and see a small broken-image icon with nothing else. On a slow phone the rest of the page also jumps around as things load.
All of that is controlled by four attributes on one tag. The <img> tag has no content and no closing tag, everything it needs rides on its attributes: src, alt, width/height, and style.
Theory
A picture frame you hang before the photo arrives
Hanging a framed photo, you decide three things: which photo goes in (src), a caption for anyone who cannot see it (alt), and how big the frame is (width/height). Fixing the frame size first means the wall layout is set even before the photo is printed and slid in. A web image works the same way: reserve the size, then the picture fills it when it arrives.
Theory
The four attributes
- src: the image file's path. Same relative/absolute rule as links:
images/poster.jpgfor your own file, or a fullhttps://...URL. - alt: alternative text. Shown if the image fails, and read aloud to blind users. Give every meaningful image real alt text.
- width and height: the size in pixels (just a number, no
pxneeded in the attribute). Setting both reserves the space and stops the page from jumping. - style: inline CSS for extras, like
style="border-radius:8px".
Practical
The FestConnect poster
<img
src="images/fest-poster.jpg"
alt="Ganpat University TechFest 2026, 12 to 14 March"
width="600"
height="300"
style="border-radius: 8px;">
<!-- Note: <img> is self-closing. There is no </img>. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Why write alt at all?
Give two different situations where the alt text 'Ganpat University TechFest 2026' actually gets used, even though the image looks fine on your own laptop. Think, then check.
Show the answer
1. The image fails to load (wrong path, slow or dropped network): the browser shows the alt text in its place, so the visitor still knows what was meant to be there. 2. A blind user with a screen reader: the software reads the alt aloud, since it cannot see the picture. (Bonus: search engines read alt too, which helps the page rank.) That is why exams treat missing alt as a real accessibility mistake, not a minor one.
Quiz
On a slow phone, the FestConnect page content jumps down suddenly when the poster finishes loading. Which fix stops the jump?
- Set both width and height on the <img> so its space is reserved before it loads
- Remove the alt attribute to make the image load faster
- Add a </img> closing tag
- Change src from a relative path to an absolute URL
Show the answer
Set both width and height on the <img> so its space is reserved before it loads
Giving the image a fixed width and height reserves its box immediately, so nothing shifts when the picture arrives (A). alt (B) has zero effect on loading speed. img has no closing tag (C), so </img> is simply wrong. The path style (D) changes where the file comes from, not the layout jump.
Watch out
Common img mistakes
- Forgetting alt, or writing
alt="image". Alt should describe the picture ('event poster'), not repeat the word image. - Writing `</img>`.
<img>is a void element: no closing tag. The same is true of<br>and<hr>. - Setting only width. If you set width but not height (or vice versa) the browser guesses the other, which can distort the picture and still let the layout jump. Set both, or neither and let CSS handle it.
Theory
Next: images that resize themselves
Fixed width="600" looks great on a laptop but overflows a phone. In Unit 2, Bootstrap's img-fluid class makes an image shrink to fit any screen automatically. That is the responsive upgrade to the plain <img> you just learned; you still need src and alt exactly as here.
Summary
Key takeaways
- <img> places a picture and is self-closing: no </img>.
- src is the file path (relative for your files, absolute for others), same rule as links.
- alt is shown when the image fails and read by screen readers: give every meaningful image real alt text.
- width and height (plain pixel numbers) set the size; setting both reserves space and stops layout jump.
- style adds inline CSS extras like rounded corners.
- Memory hook: reserve the frame, then the photo slides in.