How Embedding Base64 Images Affects Page Load Performance

Embedding image resources as Base64 strings lets developers place them directly in HTML or CSS, eliminating separate HTTP requests and potentially speeding up the first paint. However, the resulting HTML/CSS files become larger, which may impact parsing and rendering performance.

Measuring Performance with Navigation Timing

The article uses the Navigation Timing API to capture key timestamps during page load. The relevant properties are accessed as follows:

var timing = window.performance.timing;
// timing.domLoading – when the browser starts parsing the first byte of the HTML document
// timing.domInteractive – when the HTML and DOM are fully parsed
// timing.domContentLoadedEventStart – when DOM parsing finishes and resource loading begins
// timing.domContentLoadedEventEnd – when all resources (e.g., scripts) have finished loading
// timing.domComplete – when the entire page, including images, is fully loaded and ready

From these timestamps two derived metrics are calculated:

build = timing.domComplete - timing.domContentLoadedEventStart; // time between resource loading start and final render
complete = timing.domComplete - timing.domLoading; // total time from start of data receipt to full render

Test Scenario: Base64 Image in CSS

A 50 KB JPG image is encoded to Base64 and embedded in a CSS file, then applied as a background to 135 DOM elements, simulating a sprite‑like usage. The test environment includes:

Mac OS X El Capitan with Chrome 48

iPhone 6 Plus iOS 9

Meizu Note Android 4

Images illustrating the setup:

Navigation Timing values are taken from Chrome’s official documentation; results may differ on other platforms. In Android + WeChat the measured build time was consistently 0 ms, likely due to a different rendering mechanism.

Results

With caching disabled, the measurements were:

build: 150 ms

complete: 200 ms

These figures are influenced by network conditions and should be used for comparative purposes only.

Conclusion

Base64‑embedding can reduce request overhead and improve first‑paint speed, but the increased payload size may affect parsing and overall rendering time, especially on lower‑end devices or browsers with different rendering pipelines. Developers should benchmark on target platforms before adopting this technique.