Project Overview

A browser tool for web developers that analyzes image rendering across different viewports and generates drop-in srcset and sizes recommendations to eliminate oversized image payloads, reduce bandwidth waste, and improve page performance.

To achieve this, it uses an out-of-band hidden rendering engine with automated lifecycle loops to accurately capture real-world image layouts.

The tool supports three scanning modes: single image analysis, selected area scanning, and full-page audits.

Why This Problem Exists

Responsive images rely on accurate sizes attributes so browsers can request appropriately sized assets. In practice, determining those values requires analyzing layouts across multiple viewports, making them difficult to maintain as interfaces evolve.

The result is often oversized image downloads that waste bandwidth and impact performance at scale.

I built this tool to bridge that gap. Instead of only identifying problems, it analyzes real rendering behavior and generates implementation-ready recommendations for image widths, breakpoints, srcset, and sizes.

Deep Dive: A great explanation of responsive images by Web Dev Simplified.

Deep Dive into Browser Image Optimisation

Challenges & Learnings

Architecting Resilient Full-Page Performance Auditing

Building an in-browser image inspection and performance auditing engine introduces severe bottlenecks: Main-thread layout thrashing, strict Content Security Policies (CSP), lazy-loading DOM dynamics, and DOM-drift across viewport emulations.

To achieve zero-lag execution and maximum precision without breaking host page stability, the system uses an advanced, decoupled multi-stage execution pipeline.:

[DOM Stabilization] ──> [Deterministic Matching] ──> [Throttled Batches] ──> [UI Decoupling]

1. Cross-Window Layout Emulation & Deterministic DOM Matching

• The Challenge: Inspecting responsive images at multiple breakpoints ($375\text{px}$ to $1920\text{px}$) via the active window causes jarring visual flashes.
• The Fix: An isolated, invisible <iframe> sandbox mirrors the host context (window.location.href) to run layout simulations out-of-band.
• Heuristic Matching Tree: Because sandboxed DOMs don't perfectly map to active dynamic mutations, a 7-tier cryptographic waterfall ensures $100%$ asset matching accuracy:

CSS Selector
→ Absolute URL
→ Dynamic currentSrc
→ Relative Path
→ CDN Param Decoding
→ Filename RegExp
→ Alt Tokens

2. Page Stabilization & Hydration Forcing (stabilizePage)

• The Challenge: Lazy-loaded assets below the fold are absent or use placeholders, yielding incomplete metrics during instant scans.
• The Fix: An automated, non-blocking asynchronous programmatic scroll sequence forces the host layout engine to hydrate deferred graphics without freezing the UI.

3. Non-Blocking Fault-Isolated Sandboxing (safeScanImage)

• The Challenge: CORS errors, broken endpoints, or rendering exceptions can crash the entire auditing pipeline.
• The Fix: Every asset audit runs inside an isolated try/catch wrapper. Failures are containerized and translated into local metrics, keeping the global scanning loop at $100%$ uptime.

4. Throttled Resource Concurrency Pool (runInBatches)

• The Challenge: Spawning unbounded layout checks spikes CPU usage, triggers garbage collection thrashing, and freezes the single-threaded main JavaScript loop.
• The Fix: A custom throttle limits execution to 3 concurrent asset evaluations. This maximizes asynchronous I/O performance via the event loop while keeping memory footprint minimal.

5. Layout Separation & Deferred Math Optimization

• The Challenge: Calculating dynamic device pixel ratios and byte-transfers while simultaneously updating the UI dashboard causes intensive Layout Thrashing.
• The Fix: The runtime decouples its execution phases:
  • Scanning: Captures raw dimensions and metadata directly into an in-memory grid.
  • Calculation: Defers complex layout math and breakpoint parsing until after DOM traversal settles, keeping the critical rendering path lag-free.

Benefits & Impact

For Users

• Faster page load times, especially on mobile networks.
• Reduced data consumption.
• Sharper images on high-DPR and Retina displays.
• Improved browsing experience on image-heavy pages.

For Developers

• Eliminates manual sizes attribute calculations.
• Generates responsive image recommendations automatically.
• Detects oversized images and hidden bandwidth waste.
• Highlights images that may appear blurry on modern displays.
• Simplifies implementation of responsive image best practices.

For Businesses

• Reduced CDN bandwidth consumption.
• Lower image delivery costs.
• Improved Core Web Vitals.
• Better SEO performance through faster page loads.
• Increased conversion potential by reducing loading friction.
• Scales particularly well for image-heavy platforms such as:
  • E-commerce stores
  • Travel booking websites
  • Real estate and rental marketplaces
  • Media and publishing platforms
  • Portfolio and photography websites