The original title is "When (and when not) to inline images as Base64"

Short summary

Decide whether to inline images as Base64-encoded data URIs or keep them external. Inline Base64 for tiny self-contained files (reports, emails, widgets, test fixtures) where avoiding extra HTTP requests outweighs the ~33% size penalty and loss of caching benefits. Use external files for photos, large graphics, multi-page reuse, and images needing responsive srcset, lazy loading, or CDN optimization. Includes practical decision rules and free tools.

• •Inline Base64 for small, self-contained images where bundling matters (reports, emails, CMS blocks)
• •Keep external files for photos, large graphics, multi-page usage, and responsive image features
• •Use FileReader.readAsDataURL() to generate Base64 locally without uploading; ~33% size increase is the trade-off

Generated with AI, which can make mistakes.