Card images and overlays in Bootsrap - Performance & Optimization

Performance: Card images and overlays

MEDIUM IMPACT

This affects the page's loading speed and rendering performance by how images and overlay elements are layered and painted.

Displaying a card with a full-size background image and a text overlay

Bootsrap

<div class="card text-bg-dark">
  <img src="optimized-image.webp" class="card-img" alt="..." loading="lazy" decoding="async">
  <div class="card-img-overlay">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some overlay text.</p>
  </div>
</div>

Uses optimized, lazy-loaded image with async decoding and Bootstrap's text-bg-dark for better contrast without extra layering.

📈 Performance GainReduces initial load blocking, triggers single repaint, improves LCP

Displaying a card with a full-size background image and a text overlay

Bootsrap

<div class="card">
  <img src="large-image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some overlay text.</p>
  </div>
</div>

Using a large, unoptimized image and layering a semi-transparent overlay causes slow loading and triggers multiple repaints.

📉 Performance CostBlocks rendering until image loads, triggers 2 repaints due to overlay transparency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large unoptimized image with semi-transparent overlay	Minimal (3 nodes)	1 reflow	2 repaints due to transparency	[X] Bad
Optimized lazy-loaded image with solid overlay background	Minimal (3 nodes)	1 reflow	1 repaint	[OK] Good

Rendering Pipeline

The browser loads the image resource, calculates styles for the card and overlay, performs layout, paints the image and overlay layers, then composites them for display.

→Resource Loading

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckResource Loading and Paint stages due to large images and overlay transparency

Core Web Vital Affected

LCP

This affects the page's loading speed and rendering performance by how images and overlay elements are layered and painted.

Optimization Tips

1Use optimized, compressed image formats like WebP for card backgrounds.

2Apply lazy loading and async decoding to defer image load and reduce blocking.

3Minimize overlay transparency layers to reduce paint and composite costs.

Performance Quiz - 3 Questions

What is a key performance benefit of using lazy loading on card images with overlays?

A It removes the need for overlays entirely

B It delays image loading until needed, reducing initial load time

C It increases image quality for better visuals

D It forces the browser to preload all images

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load, then inspect the loading waterfall and paint events to see image load time and repaints.

What to look for: Look for long image load blocking times and multiple paint events caused by overlay transparency.