Inlined base64 images in HTML/CSS

Problem Summary

Inlined base64 images embed image bytes directly inside HTML or CSS instead of loading them as separate image files.

Performance Impact

• Larger HTML or CSS: Critical documents become heavier
• Worse caching: Embedded images cannot be cached independently
• Render delay: CSS containing large base64 data blocks takes longer to download and parse
• Memory overhead: Base64 encoding increases size compared with binary files

How to Detect

1. Source search: Look for data:image/ in HTML and CSS
2. Network analysis: Check unusually large CSS or HTML files
3. Coverage tools: Find unused CSS carrying embedded image data

Solutions

1. Move Images to Files

Serve images as normal assets so browsers can cache and prioritize them.

2. Use SVG Carefully

Small inline SVG icons can be fine; large encoded images should not be in CSS.

3. Compress and Resize

Use appropriate image formats and dimensions before embedding anywhere.

4. Keep Critical CSS Small

Do not include base64 backgrounds in CSS that blocks rendering.