[{"data":1,"prerenderedAt":704},["ShallowReactive",2],{"guide-inline-images-css-base64":3},{"id":4,"title":5,"body":6,"date":696,"description":697,"extension":698,"meta":699,"navigation":85,"path":700,"readingTime":89,"seo":701,"stem":702,"__hash__":703},"guides\u002Fguides\u002Finline-images-css-base64.md","Inline Images in CSS with Base64: When and How",{"type":7,"value":8,"toc":685},"minimark",[9,13,18,21,121,124,128,131,137,153,158,172,175,179,182,249,252,256,259,381,384,418,422,425,428,431,435,438,443,495,500,617,620,624,644,648,669,673,681],[10,11,12],"p",{},"Base64-encoded images in CSS let you embed small images directly in your stylesheet, eliminating separate HTTP requests. This technique works well for tiny assets like icons and decorative elements — but it comes with size and caching trade-offs that make it unsuitable for larger images.",[14,15,17],"h2",{"id":16},"how-base64-images-work-in-css","How Base64 Images Work in CSS",[10,19,20],{},"A Base64-encoded image replaces the image URL with a data URI containing the encoded file content:",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-css shiki shiki-themes github-light github-dark","\u002F* External image — requires a separate HTTP request *\u002F\n.icon-home {\n  background-image: url('\u002Fimages\u002Fhome.svg');\n}\n\n\u002F* Inline Base64 — no separate request *\u002F\n.icon-home {\n  background-image: url('data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9zdmc+');\n}\n","css","",[29,30,31,40,51,74,80,87,93,100,116],"code",{"__ignoreMap":27},[32,33,36],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sJ8bj","\u002F* External image — requires a separate HTTP request *\u002F\n",[32,41,43,47],{"class":34,"line":42},2,[32,44,46],{"class":45},"sScJk",".icon-home",[32,48,50],{"class":49},"sVt8B"," {\n",[32,52,54,58,61,64,67,71],{"class":34,"line":53},3,[32,55,57],{"class":56},"sj4cs","  background-image",[32,59,60],{"class":49},": ",[32,62,63],{"class":56},"url",[32,65,66],{"class":49},"(",[32,68,70],{"class":69},"sZZnC","'\u002Fimages\u002Fhome.svg'",[32,72,73],{"class":49},");\n",[32,75,77],{"class":34,"line":76},4,[32,78,79],{"class":49},"}\n",[32,81,83],{"class":34,"line":82},5,[32,84,86],{"emptyLinePlaceholder":85},true,"\n",[32,88,90],{"class":34,"line":89},6,[32,91,92],{"class":38},"\u002F* Inline Base64 — no separate request *\u002F\n",[32,94,96,98],{"class":34,"line":95},7,[32,97,46],{"class":45},[32,99,50],{"class":49},[32,101,103,105,107,109,111,114],{"class":34,"line":102},8,[32,104,57],{"class":56},[32,106,60],{"class":49},[32,108,63],{"class":56},[32,110,66],{"class":49},[32,112,113],{"class":69},"'data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9zdmc+'",[32,115,73],{"class":49},[32,117,119],{"class":34,"line":118},9,[32,120,79],{"class":49},[10,122,123],{},"The browser decodes the Base64 string back into binary image data and renders it exactly as if it had fetched the file from a URL. No visual difference. No functional difference. But the trade-offs are real.",[14,125,127],{"id":126},"when-to-use-base64-inlining","When to Use Base64 inlining",[10,129,130],{},"Base64 inlining makes sense for small, frequently-used assets where the request overhead outweighs the size penalty:",[10,132,133],{},[134,135,136],"strong",{},"Good candidates:",[138,139,140,144,147,150],"ul",{},[141,142,143],"li",{},"Small icons (under 2 KB original size)",[141,145,146],{},"Single-color SVG icons used across multiple components",[141,148,149],{},"Decorative borders or patterns that appear on every page",[141,151,152],{},"Email HTML templates where external images are often blocked",[10,154,155],{},[134,156,157],{},"Poor candidates:",[138,159,160,163,166,169],{},[141,161,162],{},"Photographs or complex images (10+ KB)",[141,164,165],{},"Images used on only one page (no repeated request savings)",[141,167,168],{},"Large hero images or backgrounds",[141,170,171],{},"Any image over 10 KB — the size penalty becomes significant",[10,173,174],{},"The reason: Base64 encoding increases file size by approximately 33%. A 2 KB icon becomes 2.7 KB in Base64 — acceptable when it saves a full HTTP request. A 100 KB photo becomes 133 KB — a terrible trade.",[14,176,178],{"id":177},"the-request-reduction-benefit","The Request Reduction Benefit",[10,180,181],{},"Each external image requires a separate HTTP request with its own connection setup, headers, and latency. On HTTP\u002F1.1, browsers limit concurrent connections per domain (typically 6). Inline images bypass this limit entirely.",[183,184,185,201],"table",{},[186,187,188],"thead",{},[189,190,191,195,198],"tr",{},[192,193,194],"th",{},"Metric",[192,196,197],{},"External Image",[192,199,200],{},"Base64 Inline",[202,203,204,216,227,238],"tbody",{},[189,205,206,210,213],{},[207,208,209],"td",{},"HTTP requests",[207,211,212],{},"1 per image",[207,214,215],{},"0",[189,217,218,221,224],{},[207,219,220],{},"File size increase",[207,222,223],{},"None",[207,225,226],{},"+33%",[189,228,229,232,235],{},[207,230,231],{},"Render blocking",[207,233,234],{},"Possible (connection limit)",[207,236,237],{},"No",[189,239,240,243,246],{},[207,241,242],{},"Cacheable independently",[207,244,245],{},"Yes",[207,247,248],{},"No (cached with CSS)",[10,250,251],{},"On HTTP\u002F2 and HTTP\u002F3, the request cost is much lower thanks to multiplexing. This reduces the benefit of inlining — the overhead of a separate request is smaller, so the 33% size penalty is harder to justify.",[14,253,255],{"id":254},"svgs-a-better-approach-than-base64","SVGs: A Better Approach Than Base64",[10,257,258],{},"For SVG images, you have an alternative that avoids Base64 entirely: inline SVG markup or URL-encoded SVG data URIs.",[22,260,262],{"className":24,"code":261,"language":26,"meta":27,"style":27},"\u002F* URL-encoded SVG — smaller than Base64, no encoding overhead *\u002F\n.icon-close {\n  background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23fff' stroke-width='2'\u002F%3E%3C\u002Fsvg%3E\");\n}\n\n\u002F* Inline SVG in HTML — most efficient, styleable with CSS *\u002F\n\u003Cbutton>\n  \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 24 24\">\n    \u003Cpath d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\"\u002F>\n  \u003C\u002Fsvg>\n  Close\n\u003C\u002Fbutton>\n",[29,263,264,269,276,291,295,299,304,317,336,355,365,371],{"__ignoreMap":27},[32,265,266],{"class":34,"line":35},[32,267,268],{"class":38},"\u002F* URL-encoded SVG — smaller than Base64, no encoding overhead *\u002F\n",[32,270,271,274],{"class":34,"line":42},[32,272,273],{"class":45},".icon-close",[32,275,50],{"class":49},[32,277,278,280,282,284,286,289],{"class":34,"line":53},[32,279,57],{"class":56},[32,281,60],{"class":49},[32,283,63],{"class":56},[32,285,66],{"class":49},[32,287,288],{"class":69},"\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23fff' stroke-width='2'\u002F%3E%3C\u002Fsvg%3E\"",[32,290,73],{"class":49},[32,292,293],{"class":34,"line":76},[32,294,79],{"class":49},[32,296,297],{"class":34,"line":82},[32,298,86],{"emptyLinePlaceholder":85},[32,300,301],{"class":34,"line":89},[32,302,303],{"class":38},"\u002F* Inline SVG in HTML — most efficient, styleable with CSS *\u002F\n",[32,305,306,309,313],{"class":34,"line":95},[32,307,308],{"class":49},"\u003C",[32,310,312],{"class":311},"s9eBZ","button",[32,314,316],{"class":315},"szBVR",">\n",[32,318,319,322,325,328,331,334],{"class":34,"line":102},[32,320,321],{"class":49},"  \u003C",[32,323,324],{"class":311},"svg",[32,326,327],{"class":49}," xmlns=\"http:\u002F\u002Fwww",[32,329,330],{"class":45},".w3",[32,332,333],{"class":49},".org\u002F2000\u002Fsvg\" viewBox=\"0 0 24 24\"",[32,335,316],{"class":315},[32,337,338,341,344,347,350,353],{"class":34,"line":118},[32,339,340],{"class":49},"    \u003C",[32,342,343],{"class":311},"path",[32,345,346],{"class":49}," d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" ",[32,348,349],{"class":311},"stroke-width",[32,351,352],{"class":49},"=\"2\"\u002F",[32,354,316],{"class":315},[32,356,358,361,363],{"class":34,"line":357},10,[32,359,360],{"class":49},"  \u003C\u002F",[32,362,324],{"class":311},[32,364,316],{"class":315},[32,366,368],{"class":34,"line":367},11,[32,369,370],{"class":49},"  Close\n",[32,372,374,377,379],{"class":34,"line":373},12,[32,375,376],{"class":49},"\u003C\u002F",[32,378,312],{"class":311},[32,380,316],{"class":315},[10,382,383],{},"Inline SVG in HTML is generally the best option because:",[138,385,386,389,404,407],{},[141,387,388],{},"No encoding overhead — the SVG markup is the image",[141,390,391,392,395,396,399,400,403],{},"Styleable with CSS — ",[29,393,394],{},"currentColor",", ",[29,397,398],{},"fill",", and ",[29,401,402],{},"stroke"," respond to parent styles",[141,405,406],{},"No extra request and no Base64 size penalty",[141,408,409,410,413,414,417],{},"Accessible — you can add ",[29,411,412],{},"aria-label"," or ",[29,415,416],{},"\u003Ctitle>"," elements",[14,419,421],{"id":420},"caching-implications","Caching Implications",[10,423,424],{},"External images cache independently from your CSS. When you update your stylesheet, the cached images persist. With Base64 inlining, image changes are tied to CSS changes — whenever you modify any CSS, the browser re-downloads all inline images too.",[10,426,427],{},"This matters for apps with frequent deployments. If your CSS changes daily but your icons rarely do, Base64 inlining forces users to re-download unchanged icons with every deploy. External images would remain cached.",[10,429,430],{},"Workaround: If you inline images, extract them into a separate CSS file dedicated to icons. This way, icon CSS caches independently from layout CSS.",[14,432,434],{"id":433},"automation-with-build-tools","Automation with Build Tools",[10,436,437],{},"Manually encoding images to Base64 is tedious. Build tools automate this:",[10,439,440],{},[134,441,442],{},"Vite:",[22,444,448],{"className":445,"code":446,"language":447,"meta":27,"style":27},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Images under 4 KB are inlined automatically\nexport default defineConfig({\n  build: {\n    assetsInlineLimit: 4096  \u002F\u002F bytes\n  }\n})\n","javascript",[29,449,450,455,469,474,485,490],{"__ignoreMap":27},[32,451,452],{"class":34,"line":35},[32,453,454],{"class":38},"\u002F\u002F Images under 4 KB are inlined automatically\n",[32,456,457,460,463,466],{"class":34,"line":42},[32,458,459],{"class":315},"export",[32,461,462],{"class":315}," default",[32,464,465],{"class":45}," defineConfig",[32,467,468],{"class":49},"({\n",[32,470,471],{"class":34,"line":53},[32,472,473],{"class":49},"  build: {\n",[32,475,476,479,482],{"class":34,"line":76},[32,477,478],{"class":49},"    assetsInlineLimit: ",[32,480,481],{"class":56},"4096",[32,483,484],{"class":38},"  \u002F\u002F bytes\n",[32,486,487],{"class":34,"line":82},[32,488,489],{"class":49},"  }\n",[32,491,492],{"class":34,"line":89},[32,493,494],{"class":49},"})\n",[10,496,497],{},[134,498,499],{},"Webpack (url-loader):",[22,501,503],{"className":445,"code":502,"language":447,"meta":27,"style":27},"module.exports = {\n  module: {\n    rules: [{\n      test: \u002F\\.(png|jpg|svg)$\u002F,\n      type: 'asset',\n      parser: {\n        dataUrlCondition: { maxSize: 4 * 1024 }\n      }\n    }]\n  }\n}\n",[29,504,505,521,526,531,567,577,582,599,604,609,613],{"__ignoreMap":27},[32,506,507,510,513,516,519],{"class":34,"line":35},[32,508,509],{"class":56},"module",[32,511,512],{"class":49},".",[32,514,515],{"class":56},"exports",[32,517,518],{"class":315}," =",[32,520,50],{"class":49},[32,522,523],{"class":34,"line":42},[32,524,525],{"class":49},"  module: {\n",[32,527,528],{"class":34,"line":53},[32,529,530],{"class":49},"    rules: [{\n",[32,532,533,536,539,543,547,550,553,555,558,561,564],{"class":34,"line":76},[32,534,535],{"class":49},"      test:",[32,537,538],{"class":69}," \u002F",[32,540,542],{"class":541},"snhLl","\\.",[32,544,546],{"class":545},"sA_wV","(png",[32,548,549],{"class":315},"|",[32,551,552],{"class":545},"jpg",[32,554,549],{"class":315},[32,556,557],{"class":545},"svg)",[32,559,560],{"class":315},"$",[32,562,563],{"class":69},"\u002F",[32,565,566],{"class":49},",\n",[32,568,569,572,575],{"class":34,"line":82},[32,570,571],{"class":49},"      type: ",[32,573,574],{"class":69},"'asset'",[32,576,566],{"class":49},[32,578,579],{"class":34,"line":89},[32,580,581],{"class":49},"      parser: {\n",[32,583,584,587,590,593,596],{"class":34,"line":95},[32,585,586],{"class":49},"        dataUrlCondition: { maxSize: ",[32,588,589],{"class":56},"4",[32,591,592],{"class":315}," *",[32,594,595],{"class":56}," 1024",[32,597,598],{"class":49}," }\n",[32,600,601],{"class":34,"line":102},[32,602,603],{"class":49},"      }\n",[32,605,606],{"class":34,"line":118},[32,607,608],{"class":49},"    }]\n",[32,610,611],{"class":34,"line":357},[32,612,489],{"class":49},[32,614,615],{"class":34,"line":367},[32,616,79],{"class":49},[10,618,619],{},"Set the threshold based on your performance budget. Many teams use 2–4 KB as the maximum size for automatic inlining.",[14,621,623],{"id":622},"key-takeaways","Key Takeaways",[138,625,626,629,632,635,638,641],{},[141,627,628],{},"Base64 inlining eliminates HTTP requests but increases image size by ~33%",[141,630,631],{},"Only inline images under 2–4 KB — icons, tiny patterns, and decorative elements",[141,633,634],{},"On HTTP\u002F2+, request overhead is low — inlining provides less benefit",[141,636,637],{},"For SVGs, prefer URL-encoded data URIs or inline SVG markup over Base64",[141,639,640],{},"Base64 images cache with your CSS — extract icons into a separate file for better cache behavior",[141,642,643],{},"Automate inlining with your bundler's asset pipeline rather than encoding manually",[14,645,647],{"id":646},"related-guides","Related Guides",[138,649,650,657,663],{},[141,651,652],{},[653,654,656],"a",{"href":655},"\u002Fguides\u002Fimage-to-base64-guide","Image to Base64: Converting Images for Inline Embedding",[141,658,659],{},[653,660,662],{"href":661},"\u002Fguides\u002Fdata-uri-performance","Data URI Performance: Measuring the Real Cost of Inlining",[141,664,665],{},[653,666,668],{"href":667},"\u002Fguides\u002Fbase64-image-optimization","Base64 Image Optimization: Reducing Inline Image Overhead",[14,670,672],{"id":671},"try-it-yourself","Try It Yourself",[10,674,675,676,680],{},"Convert your images to Base64 with our free ",[653,677,679],{"href":678},"\u002Ftools\u002Fimage-to-base64","Image to Base64"," tool. Upload any image, get the encoded string, and decide whether inlining is right for your use case.",[682,683,684],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":27,"searchDepth":42,"depth":42,"links":686},[687,688,689,690,691,692,693,694,695],{"id":16,"depth":42,"text":17},{"id":126,"depth":42,"text":127},{"id":177,"depth":42,"text":178},{"id":254,"depth":42,"text":255},{"id":420,"depth":42,"text":421},{"id":433,"depth":42,"text":434},{"id":622,"depth":42,"text":623},{"id":646,"depth":42,"text":647},{"id":671,"depth":42,"text":672},"2026-05-28","Learn when to inline images in CSS using Base64 encoding, the performance trade-offs, and best practices for icons, sprites, and small assets.","md",{"immutable":85},"\u002Fguides\u002Finline-images-css-base64",{"title":5,"description":697},"guides\u002Finline-images-css-base64","UrALUJkrYfjEgUNPFLPHDhqxToRC_Kp0ugVglMgFAZ0",1780401334603]