html images explain deeply: 18 MCQs with answers

A pointer that tells the browser where to fetch the image

The `` tag does not store pixels. It is a placeholder that instructs the browser to fetch an external file and paint it in place. The actual image data lives in a separate file such as `.jpg` or `.png`.

`alt`

`alt` is the alternative-text attribute required for accessibility. Without it, screen readers may read the filename aloud and users on broken connections see nothing useful.

`<img>`

`` is a void element — it has no closing tag and cannot contain child content. The other three are container elements that wrap content.

`alt=""` (empty)

An empty `alt=""` tells assistive technology to skip the image, which is correct for decoration. Omitting `alt` entirely is worse because screen readers may then read the filename aloud.

JPEG

JPEG is designed for photographs, producing small files with millions of colours. SVG is for vectors, GIF is limited to 256 colours, and PNG produces larger files for photographic content.

True

`` is a void element, so it has no closing tag and cannot contain child content.

The browser reserves space early, preventing layout shift

HTML `width` and `height` communicate the intrinsic aspect ratio so the browser can reserve the correct box before the file arrives. This prevents the text-jumping layout shift when the image finally loads.

`loading="lazy"`

`loading="lazy"` defers off-screen images until the user scrolls near them. This is one of the cheapest performance wins available in HTML.

Picks the smallest suitable file based on the `sizes` hint

The `w` descriptors declare each file's real pixel width, and `sizes` tells the browser how wide the image will render at each breakpoint. The browser then downloads only the file that fits, saving bandwidth.

Because screen readers may read the filename aloud

An empty `alt=""` deliberately silences decoration. Omitting `alt` entirely leaves assistive tech to fall back on the filename, which is more confusing than silence.

HTML `width` sets the intrinsic aspect-ratio hint; CSS controls rendered size

The HTML `width` and `height` attributes tell the browser the intrinsic aspect ratio so it can reserve space early. CSS `width` and `height` control the rendered size. Best practice is to set both.

`srcset` and `sizes`

`srcset` offers multiple files at different widths, and `sizes` tells the browser how wide the image will render at each breakpoint. Together they let the browser pick the right file for each device.

It reduces the image file size on disk

`alt` serves accessibility, broken-image fallback, and SEO. It has no effect on the file size of the image itself — that is determined by the format and compression.

SVG

SVG is vector-based, so it scales infinitely without quality loss and produces very small files for icons and charts. Raster formats like JPEG, PNG, and GIF would blur or bloat at large sizes.

The JPEG, because it delivers the same look at a fraction of the bytes

Matching format to content is one of the highest-leverage performance decisions on a page. A 2 MB PNG photograph where a 150 KB JPEG looks identical is a real, common waste that slows the page.

`<img>`, because it is real content that supports alt text and saving

Meaningful content belongs in ``, which supports `alt` text, right-click saving, and SEO value. CSS `background-image` is for decoration and often does not allow saving.

loading='lazy'

The correct option is `loading='lazy'`, which defers the loading of off-screen images until the user scrolls near them, improving page load performance.

The browser will download 'medium.jpg'.

The correct option is that the browser will download 'medium.jpg' because the viewport width of 500 pixels falls within the range specified in the `sizes` attribute, which indicates that the image should be displayed at 1024 pixels.