html images explain deeply: 20 flashcards
All 20 flashcards from this kit, free and with no sign-up.
1. What kind of element is `<img>` in HTML?
Show the answer
A void element — it has no closing tag and cannot contain child content.
2. What does the `src` attribute of `<img>` hold?
Show the answer
The URL or path to the image file that the browser should fetch and display.
3. What is the purpose of the `alt` attribute?
Show the answer
It provides alternative text read aloud by screen readers and shown when the image fails to load.
4. Why is `alt=""` used on a decorative image?
Show the answer
An empty alt tells assistive technology to skip the image entirely, which is correct for purely visual decoration.
5. Why is omitting `alt` entirely worse than writing `alt=""`?
Show the answer
Without `alt`, assistive tech may read the filename aloud, which is more confusing than silence.
6. What do the HTML `width` and `height` attributes on `<img>` actually communicate?
Show the answer
The intrinsic aspect ratio, so the browser can reserve the correct box before the image loads and prevent layout shift.
7. How do CSS `width` and `height` differ from HTML `width` and `height` on an image?
Show the answer
CSS controls the rendered size on screen; HTML attributes provide the aspect-ratio hint used for early layout reservation.
8. Which image format suits photographs best?
Show the answer
JPEG — it produces small files for photographic content, though it does not support transparency.
9. Which image format suits logos, screenshots, and transparency?
Show the answer
PNG — it preserves sharp edges and supports transparency, at the cost of larger files.
10. What is SVG and why is it special?
Show the answer
SVG is a vector format that scales infinitely without quality loss and produces very small files for icons and charts.
11. What advantage does WebP offer over JPEG and PNG?
Show the answer
WebP produces smaller files than JPEG or PNG at similar visual quality, making it a modern efficiency choice.
12. What does the `srcset` attribute let you provide?
Show the answer
Multiple image files at different widths, so the browser can pick the most suitable one for the current screen.
13. What does the `sizes` attribute tell the browser?
Show the answer
How wide the image will render at each breakpoint, so the browser can choose the correct file from `srcset`.
14. What does `loading="lazy"` do?
Show the answer
It defers downloading an image until the user scrolls near it, saving bandwidth for off-screen content.
15. Which images should stay eager (default loading)?
Show the answer
Above-the-fold images, so the first screen paints as fast as possible.
16. Why can images appear after the surrounding text?
Show the answer
Images load asynchronously over the network, so the browser paints text first and inserts the image once it arrives.
17. What happens when the `src` URL is broken?
Show the answer
The browser shows a broken-image icon rather than nothing, because the pointer exists but the target is missing.
18. When should you use `<img>` instead of CSS `background-image`?
Show the answer
Use `<img>` when the image carries meaning (content); use CSS `background-image` for pure decoration.
19. Why does `<img>` support right-click "Save image" but CSS backgrounds often do not?
Show the answer
Because `<img>` is a real content element in the document, while CSS backgrounds are styling layers without that affordance.
20. What is the performance cost of using a 2 MB PNG where a 150 KB JPEG would look identical?
Show the answer
Massive wasted bandwidth and slower page loads — matching format to content is a high-leverage performance decision.
Your notes can be a kit like these
Every kit here was made from real study material. Point Veda at a chapter, a PDF, a photo or a link and get notes, flashcards, practice MCQs, games and a scored test — free, in 42 languages.
- Chapter notes
- Flashcards
- Practice MCQs
- Scored tests
- Exam prep
Get Veda free See what students get
Free to start · No ads · Works in 42 languages