Figure component in Bootsrap - Performance & Optimization

Performance: Figure component

LOW IMPACT

This affects page load speed and rendering performance by how images and captions are loaded and displayed.

Displaying an image with a caption using Bootstrap's figure component

Bootsrap

<figure class="figure">
  <img src="optimized-image.webp" class="figure-img img-fluid rounded" alt="Example image" loading="lazy" width="600" height="400">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Using a smaller, optimized image with lazy loading reduces initial load time and speeds up rendering.

📈 Performance GainReduces blocking time by 300ms+, improves LCP by loading image only when needed

Displaying an image with a caption using Bootstrap's figure component

Bootsrap

<figure class="figure">
  <img src="large-unoptimized-image.jpg" class="figure-img img-fluid rounded" alt="Example image">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Using a large, unoptimized image increases load time and delays rendering of the main content.

📉 Performance CostBlocks rendering for 500ms+ depending on image size and network speed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large unoptimized image in figure	Minimal (1 img + 1 figcaption)	1 reflow due to image load	High paint cost due to large image	[X] Bad
Optimized image with lazy loading	Minimal (1 img + 1 figcaption)	Single reflow with fixed dimensions	Lower paint cost with smaller image	[OK] Good

Rendering Pipeline

The figure component loads the image resource, calculates styles including size and layout, then paints the image and caption. Large images delay the Layout and Paint stages.

→Resource Loading

→Style Calculation

→Layout

→Paint

⚠️ BottleneckResource Loading and Layout due to image size and dimensions

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by how images and captions are loaded and displayed.

Optimization Tips

1Always optimize images used in figure components for faster loading.

2Specify width and height attributes on images to prevent layout shifts.

3Use lazy loading on images to improve initial page load performance.

Performance Quiz - 3 Questions

What is the main performance benefit of specifying width and height on images in a figure component?

A It prevents layout shifts during loading

B It reduces image file size

C It improves image quality

D It enables lazy loading automatically

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load, and look for long tasks related to image decoding and layout shifts.

What to look for: Look for long image decode times and layout shifts caused by images without fixed dimensions.

Practice

1. What is the main purpose of the Bootstrap figure component?

easy

A. To add buttons below images

B. To create a navigation menu with images

C. To group images and their captions together with proper styling

D. To make images clickable links

Solution

1. Step 1: Understand the figure component role

   The Bootstrap figure component is designed to group an image and its caption in a semantic and styled way.

2. Step 2: Identify correct usage

   It uses classes like figure-img for the image and figure-caption for the caption, ensuring proper layout and responsiveness.

3. Final Answer:

   To group images and their captions together with proper styling -> Option C

4. Quick Check:

   Figure groups image + caption = A [OK]

Hint: Figure groups image and caption together visually [OK]

Common Mistakes:

• Thinking figure creates navigation menus
• Confusing figure with button groups
• Assuming figure makes images clickable

2. Which of the following is the correct way to add a caption inside a Bootstrap figure?

easy

A. <figcaption class='figure-caption'>Caption text</figcaption>

B. <caption class='figure-caption'>Caption text</caption>

C. <div class='figure-caption'>Caption text</div>

D. <span class='figure-caption'>Caption text</span>

Solution

1. Step 1: Identify the semantic tag for captions in figures

   The correct HTML tag for captions inside a figure is <figcaption>.

2. Step 2: Confirm Bootstrap class usage

   Bootstrap uses the class figure-caption on the <figcaption> tag to style captions properly.

3. Final Answer:

   <figcaption class='figure-caption'>Caption text</figcaption> -> Option A

4. Quick Check:

   Use <figcaption> with figure-caption class = D [OK]

Hint: Caption uses <figcaption> with class figure-caption [OK]

Common Mistakes:

• Using <caption> instead of <figcaption>
• Using generic <div> or <span> without semantic meaning
• Omitting the figure-caption class

3. What will be the visual result of this Bootstrap figure code?

<figure class='figure'>
  <img src='flower.jpg' class='figure-img img-fluid rounded' alt='Flower'>
  <figcaption class='figure-caption text-end'>A beautiful flower</figcaption>
</figure>

medium

A. Only the caption text appears, image is hidden

B. An image of a flower with caption centered below, image corners sharp

C. An image of a flower with caption above the image, image corners rounded

D. An image of a flower with a caption aligned to the right below it, image corners rounded

Solution

1. Step 1: Analyze image classes

   The image uses figure-img, img-fluid for responsiveness, and rounded for rounded corners.

2. Step 2: Analyze caption classes

   The caption uses figure-caption and text-end, which aligns the caption text to the right below the image.

3. Final Answer:

   An image of a flower with a caption aligned to the right below it, image corners rounded -> Option D

4. Quick Check:

   Rounded image + right-aligned caption = A [OK]

Hint: Check classes: rounded image + text-end caption = right aligned [OK]

Common Mistakes:

• Assuming caption is centered by default
• Ignoring the rounded class effect
• Thinking caption appears above image

4. Identify the error in this Bootstrap figure code:

<figure>
  <img src='dog.jpg' class='figure-img img-fluid' alt='Dog'>
  <figcaption>A cute dog</figcaption>
</figure>

medium

A. Missing figure-caption class on <figcaption>

B. Missing figure-img class on <img>

C. The alt attribute is missing on the image

D. The figure tag should be replaced with div

Solution

1. Step 1: Check image classes

   The image has figure-img and img-fluid, which is correct for Bootstrap figure images.

2. Step 2: Check caption classes

   The <figcaption> is missing the figure-caption class, which is needed for proper Bootstrap styling.

3. Final Answer:

   Missing figure-caption class on <figcaption> -> Option A

4. Quick Check:

   Caption needs figure-caption class = B [OK]

Hint: Caption must have figure-caption class for styling [OK]

Common Mistakes:

• Forgetting figure-caption class on caption
• Thinking alt attribute is optional
• Replacing semantic figure tag with div

5. You want to create a responsive Bootstrap figure with an image that has a circular shape and a caption centered below it. Which code snippet achieves this correctly?

hard

A. <figure class='figure'>
<img src='profile.jpg' class='figure-img rounded-circle' alt='Profile'>
<figcaption class='figure-caption'>User Profile</figcaption>
</figure>

B. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded-circle' alt='Profile'>
<figcaption class='figure-caption text-center'>User Profile</figcaption>
</figure>

C. <figure>
<img src='profile.jpg' class='img-fluid rounded' alt='Profile'>
<figcaption class='text-center'>User Profile</figcaption>
</figure>

D. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded' alt='Profile'>
<figcaption class='figure-caption text-start'>User Profile</figcaption>
</figure>

Solution

1. Step 1: Ensure figure container and image classes

   The figure uses class figure. The image uses figure-img for styling, img-fluid for responsiveness, and rounded-circle for circular shape.

2. Step 2: Check caption classes for alignment

   The caption uses figure-caption and text-center to center the caption below the image.

3. Final Answer:

   Code snippet with figure, figure-img img-fluid rounded-circle, and figure-caption text-center -> Option B

4. Quick Check:

   Circle image + centered caption + responsive = C [OK]

Hint: Use rounded-circle + img-fluid + figure-caption text-center [OK]

Common Mistakes:

• Omitting img-fluid for responsiveness
• Using rounded instead of rounded-circle for circle shape
• Not centering caption text