[{"data":1,"prerenderedAt":512},["ShallowReactive",2],{"guide-data-uri-performance":3},{"id":4,"title":5,"body":6,"date":502,"description":503,"extension":504,"meta":505,"navigation":506,"path":507,"readingTime":508,"seo":509,"stem":510,"__hash__":511},"guides\u002Fguides\u002Fdata-uri-performance.md","Data URI Performance: Trade-offs of Inlining Resources",{"type":7,"value":8,"toc":486},"minimark",[9,14,18,21,25,33,44,50,56,59,63,66,133,136,140,143,175,178,182,185,214,217,225,228,303,309,313,316,356,359,363,366,389,393,396,422,426,449,453,462,466],[10,11,13],"h2",{"id":12},"why-performance-matters-for-data-uris","Why Performance Matters for Data URIs",[15,16,17],"p",{},"Data URIs eliminate HTTP requests, but that single benefit comes with hidden costs: larger file sizes, lost caching, slower parsing, and no progressive loading. The trade-off shifts dramatically depending on your server protocol — what helped under HTTP\u002F1.1 can hurt under HTTP\u002F2.",[15,19,20],{},"This guide breaks down each performance factor so you can make informed decisions about when to inline resources.",[10,22,24],{"id":23},"http11-vs-http2-the-request-landscape","HTTP\u002F1.1 vs HTTP\u002F2: The Request Landscape",[15,26,27,28,32],{},"Under ",[29,30,31],"strong",{},"HTTP\u002F1.1",", browsers open a limited number of TCP connections (typically 6 per host). Each resource blocks a connection slot, so reducing request count has a real impact:",[34,35,40],"pre",{"className":36,"code":38,"language":39},[37],"language-text","HTTP\u002F1.1 — 10 assets:\n  6 connections × ~100ms latency = serialized downloads\n  → Reducing to 1 request (inline) saves hundreds of ms\n","text",[41,42,38],"code",{"__ignoreMap":43},"",[15,45,46,49],{},[29,47,48],{},"HTTP\u002F2"," multiplexes requests over a single connection. Assets stream in parallel without blocking each other:",[34,51,54],{"className":52,"code":53,"language":39},[37],"HTTP\u002F2 — 10 assets:\n  1 connection, 10 parallel streams\n  → Extra requests add negligible latency\n  → Base64 size penalty dominates\n",[41,55,53],{"__ignoreMap":43},[15,57,58],{},"If your server supports HTTP\u002F2 — and most CDNs do — the request-reduction argument for Data URIs largely disappears. Keep resources external and let the protocol handle efficiency.",[10,60,62],{"id":61},"the-33-size-penalty","The 33% Size Penalty",[15,64,65],{},"Base64 encoding maps every 3 bytes of binary data to 4 ASCII characters. The math is fixed:",[67,68,69,85],"table",{},[70,71,72],"thead",{},[73,74,75,79,82],"tr",{},[76,77,78],"th",{},"Original Size",[76,80,81],{},"Base64 Size",[76,83,84],{},"Overhead",[86,87,88,100,111,122],"tbody",{},[73,89,90,94,97],{},[91,92,93],"td",{},"1 KB",[91,95,96],{},"1.33 KB",[91,98,99],{},"+330 bytes",[73,101,102,105,108],{},[91,103,104],{},"10 KB",[91,106,107],{},"13.3 KB",[91,109,110],{},"+3.3 KB",[73,112,113,116,119],{},[91,114,115],{},"100 KB",[91,117,118],{},"133 KB",[91,120,121],{},"+33 KB",[73,123,124,127,130],{},[91,125,126],{},"500 KB",[91,128,129],{},"667 KB",[91,131,132],{},"+167 KB",[15,134,135],{},"That overhead travels over the network every time the host page loads. With an external file, the browser downloads it once and caches it indefinitely.",[10,137,139],{"id":138},"caching-the-biggest-hidden-cost","Caching: The Biggest Hidden Cost",[15,141,142],{},"When you inline an image into HTML, it inherits the cache policy of the HTML file. That means:",[144,145,146,153,159,169],"ul",{},[147,148,149,152],"li",{},[29,150,151],{},"No independent caching"," — the image re-downloads whenever the page does",[147,154,155,158],{},[29,156,157],{},"No CDN edge caching"," — CDNs cache files by URL; a Data URI is not a separate URL",[147,160,161,164,165,168],{},[29,162,163],{},"No conditional requests"," — no ",[41,166,167],{},"304 Not Modified"," for embedded assets",[147,170,171,174],{},[29,172,173],{},"Cache duplication"," — the same logo Base64-encoded across 20 pages occupies 20 × 33% more space in the browser cache",[15,176,177],{},"For a 5 KB logo used site-wide, external caching saves roughly 100 KB of redundant transfer across 20 page views. Inlining that logo adds 100 KB plus the Base64 overhead.",[10,179,181],{"id":180},"parsing-and-rendering-overhead","Parsing and Rendering Overhead",[15,183,184],{},"Browsers process Data URIs differently than external resources:",[186,187,188,202,208],"ol",{},[147,189,190,193,194,197,198,201],{},[29,191,192],{},"HTML parsing blocks"," — a large Base64 string inside an ",[41,195,196],{},"\u003Cimg src>"," or ",[41,199,200],{},"background-image"," forces the HTML parser to process thousands of characters before continuing",[147,203,204,207],{},[29,205,206],{},"Base64 decoding cost"," — the CPU must decode the string back to binary before the image decoder can start",[147,209,210,213],{},[29,211,212],{},"No progressive rendering"," — JPEG and PNG can render progressively as bytes arrive over the network; a Data URI must be fully decoded first",[15,215,216],{},"These costs are small for a 1 KB icon but compound quickly. Inlining five 20 KB images adds 100 KB of decode work to the critical rendering path.",[10,218,220,221,224],{"id":219},"css-data-uris-vs-img-tags","CSS Data URIs vs ",[41,222,223],{},"\u003Cimg>"," Tags",[15,226,227],{},"Data URIs in CSS behave differently from those in HTML:",[67,229,230,247],{},[70,231,232],{},[73,233,234,237,242],{},[76,235,236],{},"Behavior",[76,238,239,240],{},"CSS ",[41,241,200],{},[76,243,244,245],{},"HTML ",[41,246,196],{},[86,248,249,260,274,285],{},[73,250,251,254,257],{},[91,252,253],{},"Render trigger",[91,255,256],{},"When element becomes visible",[91,258,259],{},"When parser reaches the tag",[73,261,262,265,268],{},[91,263,264],{},"Lazy load",[91,266,267],{},"Naturally deferred (off-screen)",[91,269,270,271],{},"Needs ",[41,272,273],{},"loading=\"lazy\"",[73,275,276,279,282],{},[91,277,278],{},"Print media",[91,280,281],{},"May be stripped by some browsers",[91,283,284],{},"Usually preserved",[73,286,287,290,297],{},[91,288,289],{},"Accessibility",[91,291,292,293,296],{},"No native ",[41,294,295],{},"alt"," text",[91,298,299,300,302],{},"Supports ",[41,301,295],{}," attribute",[15,304,305,306,308],{},"For decorative backgrounds, CSS Data URIs avoid blocking the parser — the browser fetches them only when computing layout for visible elements. For meaningful images, ",[41,307,223],{}," with an external source offers better accessibility and progressive loading.",[10,310,312],{"id":311},"browser-limits-and-edge-cases","Browser Limits and Edge Cases",[15,314,315],{},"Browsers enforce limits on Data URI handling:",[144,317,318,324,330,350],{},[147,319,320,323],{},[29,321,322],{},"IE 8",": 32 KB maximum Data URI size",[147,325,326,329],{},[29,327,328],{},"Modern browsers",": No hard limit, but practical performance degrades above 64 KB",[147,331,332,335,336,197,339,342,343,346,347,349],{},[29,333,334],{},"Content Security Policy",": ",[41,337,338],{},"img-src",[41,340,341],{},"style-src"," must include ",[41,344,345],{},"data:"," — adding ",[41,348,345],{}," weakens CSP",[147,351,352,355],{},[29,353,354],{},"Some email clients"," strip Data URIs entirely (Outlook desktop, Gmail clips large messages)",[15,357,358],{},"Always test your inline images across target browsers and email clients before committing to the approach.",[10,360,362],{"id":361},"real-world-performance-data","Real-World Performance Data",[15,364,365],{},"Tests from HTTP Archive and WebPageTest show consistent patterns:",[144,367,368,375,382],{},[147,369,370,371,374],{},"Pages with more than 10 KB of inline images load ",[29,372,373],{},"15–25% slower"," on 3G connections compared to equivalent external images",[147,376,377,378,381],{},"Under HTTP\u002F2, pages with external resources reach ",[29,379,380],{},"First Contentful Paint 200–400ms faster"," than pages with the same resources inlined",[147,383,384,385,388],{},"The break-even point sits around ",[29,386,387],{},"2–4 KB"," per asset — below that, inlining saves a round-trip; above it, the size penalty dominates",[10,390,392],{"id":391},"when-inlining-still-wins","When Inlining Still Wins",[15,394,395],{},"Despite the costs, Data URIs remain the best choice for:",[144,397,398,404,410,416],{},[147,399,400,403],{},[29,401,402],{},"Critical-path icons"," — a tiny logo in the above-the-fold header saves a round-trip on first paint",[147,405,406,409],{},[29,407,408],{},"Email templates"," — external images are blocked; inline images display immediately",[147,411,412,415],{},[29,413,414],{},"Single-use, small assets"," — a decorative divider used once saves a request without cache duplication",[147,417,418,421],{},[29,419,420],{},"Offline-capable documents"," — self-contained HTML files that must work without a server",[10,423,425],{"id":424},"key-takeaways","Key Takeaways",[144,427,428,431,434,437,443,446],{},[147,429,430],{},"HTTP\u002F2 multiplexing eliminates most request-count benefits of Data URIs",[147,432,433],{},"Base64 encoding adds a fixed 33% size overhead — treat it as a tax, not a trade-off",[147,435,436],{},"Caching loss is the largest hidden cost: inline assets re-download with every page view",[147,438,439,440,442],{},"CSS Data URIs defer decode work; HTML ",[41,441,223],{}," Data URIs block the parser",[147,444,445],{},"Keep inline assets under 2–4 KB and limit total inline payload per page",[147,447,448],{},"Always measure performance impact — assumptions break under real network conditions",[10,450,452],{"id":451},"try-it-yourself","Try It Yourself",[15,454,455,456,461],{},"Test the size impact yourself with our ",[457,458,460],"a",{"href":459},"\u002Ftools\u002Fbase64","Base64 Encoder\u002FDecoder",". Encode a small icon, compare sizes, and decide whether inlining makes sense for your use case.",[10,463,465],{"id":464},"related-guides","Related Guides",[144,467,468,474,480],{},[147,469,470],{},[457,471,473],{"href":472},"\u002Fguides\u002Fimage-to-base64-guide","Image to Base64: When to Embed Images in HTML and CSS",[147,475,476],{},[457,477,479],{"href":478},"\u002Fguides\u002Fbase64-image-optimization","Base64 Image Optimization: Size, Caching, and Lazy Loading",[147,481,482],{},[457,483,485],{"href":484},"\u002Fguides\u002Furl-encoding-guide","URL Encoding Guide",{"title":43,"searchDepth":487,"depth":487,"links":488},2,[489,490,491,492,493,494,496,497,498,499,500,501],{"id":12,"depth":487,"text":13},{"id":23,"depth":487,"text":24},{"id":61,"depth":487,"text":62},{"id":138,"depth":487,"text":139},{"id":180,"depth":487,"text":181},{"id":219,"depth":487,"text":495},"CSS Data URIs vs \u003Cimg> Tags",{"id":311,"depth":487,"text":312},{"id":361,"depth":487,"text":362},{"id":391,"depth":487,"text":392},{"id":424,"depth":487,"text":425},{"id":451,"depth":487,"text":452},{"id":464,"depth":487,"text":465},"2026-05-28","Understand the performance impact of Data URIs under HTTP\u002F1.1 vs HTTP\u002F2, Base64 size overhead, caching loss, and browser limits on inline assets.","md",{"immutable":506},true,"\u002Fguides\u002Fdata-uri-performance",7,{"title":5,"description":503},"guides\u002Fdata-uri-performance","vWyRim9VouOLul0OtH85ULxrQS0kKnlQTz9Nt4lBoiE",1780401327377]