Image tag usage in HTML - Browser Rendering Trace

Render Flow - Image tag usage

[Read <img>] -> [Create IMG element node] -> [Load image from src URL] -> [Calculate image size] -> [Reserve space in layout] -> [Paint image pixels] -> [Composite image on page]

The browser reads the <img> tag, creates an image element, loads the image from the source URL, calculates its size, reserves space in the page layout, paints the image pixels, and finally composites it into the visible page.

Render Steps - 3 Steps

Code Added:<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Before

[Empty page]

_________________________
|                       |
|                       |
|                       |
|                       |
|                       |
|_______________________|

→

After

[Image placeholder box appears]

_________________________
|  [150x150 image]       |
|  ██████████████████    |
|  ██████████████████    |
|  ██████████████████    |
|                       |
|_______________________|

The browser inserts the image element and loads the image from the URL, reserving space and displaying the image pixels.

🔧 Browser Action:Creates IMG element node, loads image resource, triggers layout and paint.

Code Sample

This code shows a simple image displayed on the page with alternative text for accessibility.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Example</title>
</head>
<body>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

Render Quiz - 3 Questions

After applying step 1, what do you see on the page?

A A 150x150 pixel image displayed

B Only alt text shown

C Empty space with no image or text

D A broken image icon

Common Confusions - 3 Topics

Why does my image not show but space is reserved?

If the src URL is broken or image fails to load, the browser still reserves space based on width and height attributes or natural image size, showing empty space or alt text.

💡 Check src URL and alt text; reserved space stays even if image missing (see render_step 3).

Why doesn't my alt text appear when the image loads?

Alt text only shows if the image fails to load or for screen readers. When image loads correctly, alt text is hidden visually but used for accessibility.

💡 Alt text is invisible if image loads; it is for screen readers or fallback (see render_step 2).

Why does my image look stretched or squished?

If width and height attributes do not match the image's natural ratio, the browser stretches or squishes the image to fit those dimensions.

💡 Use matching width and height or CSS object-fit to keep proportions (see render_step 3).

Property Reference

Attribute	Purpose	Effect on Visual	Common Use
src	URL of the image file	Displays the image from this source	Required to show image
alt	Alternative text for accessibility	Shows text if image fails or for screen readers	Important for accessibility
width	Width of the image in pixels	Resizes image width and layout space	Control image size
height	Height of the image in pixels	Resizes image height and layout space	Control image size
title	Tooltip text on hover	Shows text when mouse hovers over image	Optional descriptive tooltip

Concept Snapshot

The <img> tag displays images on a webpage. Key attributes: src (image URL), alt (text for accessibility), width and height (control size). Browser loads the image, reserves space, and paints it. Alt text is invisible but important for screen readers. Width and height resize the image and layout space. Broken images show alt text or empty space.

Practice

1. What is the main purpose of the <img> tag in HTML?

easy

A. To style the webpage

B. To create links to other pages

C. To add text content

D. To display images on a webpage

Solution

1. Step 1: Understand the role of the <img> tag

   The <img> tag is specifically designed to add pictures to a webpage.

2. Step 2: Compare with other options

   Other tags like <a> create links, <p> add text, and CSS styles the page, so they are not correct here.

3. Final Answer:

   To display images on a webpage -> Option D

4. Quick Check:

   <img> tag = display images [OK]

Hint: Remember: <img> always shows pictures [OK]

Common Mistakes:

• Confusing <img> with <a> for links
• Thinking <img> adds text
• Assuming <img> styles content

2. Which of the following is the correct syntax to add an image with source "photo.jpg" and alternative text "A photo"?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check the tag and attributes

   The correct tag is <img> with attributes src for source and alt for alternative text.

2. Step 2: Identify incorrect attributes or tags

   <image> is not a valid tag, href is for links, and title is not the alt text.

3. Final Answer:

   <img src="photo.jpg" alt="A photo"> -> Option A

4. Quick Check:

   Use src and alt in <img> [OK]

Hint: Use src for image path and alt for description [OK]

Common Mistakes:

• Using <image> instead of <img>
• Using href instead of src
• Confusing alt with title attribute

3. What will the browser display when rendering this HTML?

<img src="flower.png" alt="A red flower">

medium

A. The text 'A red flower' instead of an image

B. Nothing, because alt text is missing

C. The image file named flower.png if it exists, otherwise a broken image icon

D. An error message on the page

Solution

1. Step 1: Understand how the browser uses src and alt

   The browser tries to load the image from the src path. If it succeeds, it shows the image.

2. Step 2: Role of alt attribute

   If the image cannot load, the alt text is shown as a fallback. No error message appears on the page.

3. Final Answer:

   The image file named flower.png if it exists, otherwise a broken image icon -> Option C

4. Quick Check:

   Image shows if src works, alt shows if not [OK]

Hint: Image shows if src valid; alt shows if image missing [OK]

Common Mistakes:

• Thinking alt text always shows instead of image
• Expecting error messages on page
• Assuming missing alt means no display

4. Identify the error in this image tag:

<img src='cat.jpg' alt=Cat Picture>

medium

A. Incorrect tag name, should be <image>

B. Missing quotes around the alt attribute value

C. src attribute should be alt

D. alt attribute is not needed

Solution

1. Step 1: Check attribute syntax

   HTML attributes with spaces in values must be quoted. alt=Cat Picture lacks quotes around 'Cat Picture'.

2. Step 2: Verify tag and attributes

   The tag <img> is correct, src is correct, and alt is needed for accessibility.

3. Final Answer:

   Missing quotes around the alt attribute value -> Option B

4. Quick Check:

   Attribute values with spaces need quotes [OK]

Hint: Always quote attribute values with spaces [OK]

Common Mistakes:

• Leaving out quotes for multi-word alt text
• Using <image> instead of <img>
• Removing alt attribute entirely

5. You want to add an image that is decorative only and should be ignored by screen readers. Which is the best way to write the <img> tag?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand accessibility for decorative images

   Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

2. Step 2: Analyze other options

   Omitting alt means screen readers may read the file name; descriptive alt text is for meaningful images; aria-hidden="false" means not hidden.

3. Final Answer:

   <img src="decorative.png" alt=""> -> Option A

4. Quick Check:

   Empty alt hides decorative images from screen readers [OK]

Hint: Use alt="" for decorative images to hide from screen readers [OK]

Common Mistakes:

• Omitting alt attribute entirely
• Adding descriptive alt for decorative images
• Using aria-hidden="false" instead of true