[{"data":1,"prerenderedAt":1032},["ShallowReactive",2],{"guide-image-to-base64-guide":3},{"id":4,"title":5,"body":6,"date":1024,"description":1025,"extension":1026,"meta":1027,"navigation":377,"path":1028,"readingTime":387,"seo":1029,"stem":1030,"__hash__":1031},"guides\u002Fguides\u002Fimage-to-base64-guide.md","Image to Base64: When to Embed Images in HTML and CSS",{"type":7,"value":8,"toc":999},"minimark",[9,14,18,26,37,40,85,96,100,103,183,189,193,196,201,204,255,259,262,310,314,317,321,324,328,331,335,338,416,420,423,427,430,434,441,445,545,549,556,559,563,567,735,739,928,932,958,962,971,975,995],[10,11,13],"h2",{"id":12},"what-is-image-to-base64-encoding","What is Image-to-Base64 Encoding?",[15,16,17],"p",{},"Image-to-Base64 encoding converts a binary image file — PNG, JPEG, SVG, or WebP — into a text string you can place directly inside HTML or CSS. The browser decodes that string and renders the image without a separate HTTP request.",[15,19,20,21,25],{},"You write it as a ",[22,23,24],"strong",{},"Data URI",", a special URL scheme defined in RFC 2397:",[27,28,33],"pre",{"className":29,"code":31,"language":32},[30],"language-text","data:[\u003Cmediatype>][;base64],\u003Cdata>\n","text",[34,35,31],"code",{"__ignoreMap":36},"",[15,38,39],{},"A real example looks like this:",[27,41,45],{"className":42,"code":43,"language":44,"meta":36,"style":36},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\"\n     alt=\"Small red dot\">\n","html",[34,46,47,71],{"__ignoreMap":36},[48,49,52,56,60,64,67],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"sVt8B","\u003C",[48,57,59],{"class":58},"s9eBZ","img",[48,61,63],{"class":62},"sScJk"," src",[48,65,66],{"class":54},"=",[48,68,70],{"class":69},"sZZnC","\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\"\n",[48,72,74,77,79,82],{"class":50,"line":73},2,[48,75,76],{"class":62},"     alt",[48,78,66],{"class":54},[48,80,81],{"class":69},"\"Small red dot\"",[48,83,84],{"class":54},">\n",[15,86,87,88,91,92,95],{},"The ",[34,89,90],{},"data:"," prefix tells the browser the content is inline, not a remote resource. The ",[34,93,94],{},";base64"," flag signals that the data portion uses Base64 encoding rather than raw percent-encoded bytes.",[10,97,99],{"id":98},"data-uri-syntax-breakdown","Data URI Syntax Breakdown",[15,101,102],{},"Every Data URI has four parts:",[104,105,106,122],"table",{},[107,108,109],"thead",{},[110,111,112,116,119],"tr",{},[113,114,115],"th",{},"Part",[113,117,118],{},"Required",[113,120,121],{},"Example",[123,124,125,138,159,171],"tbody",{},[110,126,127,131,134],{},[128,129,130],"td",{},"Scheme",[128,132,133],{},"Yes",[128,135,136],{},[34,137,90],{},[110,139,140,143,150],{},[128,141,142],{},"Media type",[128,144,145,146,149],{},"No (defaults to ",[34,147,148],{},"text\u002Fplain",")",[128,151,152,155,156],{},[34,153,154],{},"image\u002Fpng",", ",[34,157,158],{},"image\u002Fsvg+xml",[110,160,161,164,167],{},[128,162,163],{},"Base64 flag",[128,165,166],{},"No",[128,168,169],{},[34,170,94],{},[110,172,173,176,178],{},[128,174,175],{},"Data",[128,177,133],{},[128,179,180],{},[34,181,182],{},"iVBORw0KGgo...",[15,184,185,186,188],{},"If you omit the media type, the browser assumes plain text. If you omit ",[34,187,94],{},", the data must be percent-encoded — which works for short SVGs but bloats binary images.",[10,190,192],{"id":191},"when-to-embed-images-inline","When to Embed Images Inline",[15,194,195],{},"Embedding images as Base64 makes sense in specific situations where the benefits outweigh the trade-offs.",[197,198,200],"h3",{"id":199},"small-icons-and-ui-elements","Small Icons and UI Elements",[15,202,203],{},"Icons under 2 KB gain the most from inlining. You save an HTTP request for a file that would barely fill a single TCP packet anyway.",[27,205,207],{"className":42,"code":206,"language":44,"meta":36,"style":36},"\u003C!-- 1-pixel tracker or tiny icon -->\n\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n     alt=\"Spacer\" width=\"1\" height=\"1\">\n",[34,208,209,215,228],{"__ignoreMap":36},[48,210,211],{"class":50,"line":51},[48,212,214],{"class":213},"sJ8bj","\u003C!-- 1-pixel tracker or tiny icon -->\n",[48,216,217,219,221,223,225],{"class":50,"line":73},[48,218,55],{"class":54},[48,220,59],{"class":58},[48,222,63],{"class":62},[48,224,66],{"class":54},[48,226,227],{"class":69},"\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n",[48,229,231,233,235,238,241,243,246,249,251,253],{"class":50,"line":230},3,[48,232,76],{"class":62},[48,234,66],{"class":54},[48,236,237],{"class":69},"\"Spacer\"",[48,239,240],{"class":62}," width",[48,242,66],{"class":54},[48,244,245],{"class":69},"\"1\"",[48,247,248],{"class":62}," height",[48,250,66],{"class":54},[48,252,245],{"class":69},[48,254,84],{"class":54},[197,256,258],{"id":257},"email-html-templates","Email HTML Templates",[15,260,261],{},"Most email clients block external images by default. Base64-encoded logos and CTAs display immediately without requiring the recipient to click \"Show images.\"",[27,263,265],{"className":42,"code":264,"language":44,"meta":36,"style":36},"\u003C!-- Email-safe inline logo -->\n\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgo...\"\n     alt=\"Company Logo\" width=\"120\" height=\"40\">\n",[34,266,267,272,285],{"__ignoreMap":36},[48,268,269],{"class":50,"line":51},[48,270,271],{"class":213},"\u003C!-- Email-safe inline logo -->\n",[48,273,274,276,278,280,282],{"class":50,"line":73},[48,275,55],{"class":54},[48,277,59],{"class":58},[48,279,63],{"class":62},[48,281,66],{"class":54},[48,283,284],{"class":69},"\"data:image\u002Fpng;base64,iVBORw0KGgo...\"\n",[48,286,287,289,291,294,296,298,301,303,305,308],{"class":50,"line":230},[48,288,76],{"class":62},[48,290,66],{"class":54},[48,292,293],{"class":69},"\"Company Logo\"",[48,295,240],{"class":62},[48,297,66],{"class":54},[48,299,300],{"class":69},"\"120\"",[48,302,248],{"class":62},[48,304,66],{"class":54},[48,306,307],{"class":69},"\"40\"",[48,309,84],{"class":54},[197,311,313],{"id":312},"single-file-deployments","Single-File Deployments",[15,315,316],{},"Demos, documentation pages, and standalone HTML files benefit from self-containment. You ship one file instead of a folder of assets.",[197,318,320],{"id":319},"proto-boards-and-code-pens","Proto boards and Code Pens",[15,322,323],{},"When you share code snippets or embed examples, Base64 images keep everything portable. No broken image links from missing assets.",[10,325,327],{"id":326},"when-not-to-embed-images-inline","When NOT to Embed Images Inline",[15,329,330],{},"Inlining has real costs. Avoid it in these scenarios.",[197,332,334],{"id":333},"large-photos-and-hero-images","Large Photos and Hero Images",[15,336,337],{},"A 200 KB JPEG becomes roughly 267 KB of Base64 text. That bloats your HTML, blocks parsing, and delays rendering of the entire page.",[27,339,341],{"className":42,"code":340,"language":44,"meta":36,"style":36},"\u003C!-- DON'T: base64-encode large images -->\n\u003Cimg src=\"data:image\u002Fjpeg;base64,\u002F9j\u002F4AAQ...[267KB of text]...\"\n     alt=\"Hero photo\">\n\n\u003C!-- DO: reference external file -->\n\u003Cimg src=\"hero.jpg\" alt=\"Hero photo\" loading=\"lazy\">\n",[34,342,343,348,361,372,379,385],{"__ignoreMap":36},[48,344,345],{"class":50,"line":51},[48,346,347],{"class":213},"\u003C!-- DON'T: base64-encode large images -->\n",[48,349,350,352,354,356,358],{"class":50,"line":73},[48,351,55],{"class":54},[48,353,59],{"class":58},[48,355,63],{"class":62},[48,357,66],{"class":54},[48,359,360],{"class":69},"\"data:image\u002Fjpeg;base64,\u002F9j\u002F4AAQ...[267KB of text]...\"\n",[48,362,363,365,367,370],{"class":50,"line":230},[48,364,76],{"class":62},[48,366,66],{"class":54},[48,368,369],{"class":69},"\"Hero photo\"",[48,371,84],{"class":54},[48,373,375],{"class":50,"line":374},4,[48,376,378],{"emptyLinePlaceholder":377},true,"\n",[48,380,382],{"class":50,"line":381},5,[48,383,384],{"class":213},"\u003C!-- DO: reference external file -->\n",[48,386,388,390,392,394,396,399,402,404,406,409,411,414],{"class":50,"line":387},6,[48,389,55],{"class":54},[48,391,59],{"class":58},[48,393,63],{"class":62},[48,395,66],{"class":54},[48,397,398],{"class":69},"\"hero.jpg\"",[48,400,401],{"class":62}," alt",[48,403,66],{"class":54},[48,405,369],{"class":69},[48,407,408],{"class":62}," loading",[48,410,66],{"class":54},[48,412,413],{"class":69},"\"lazy\"",[48,415,84],{"class":54},[197,417,419],{"id":418},"images-used-on-multiple-pages","Images Used on Multiple Pages",[15,421,422],{},"An external image downloads once, then the browser serves it from cache on every subsequent page. A Base64 image downloads again every time the host page changes — even by one character.",[197,424,426],{"id":425},"frequently-updated-assets","Frequently Updated Assets",[15,428,429],{},"Change a Base64-encoded logo and you must edit every file that contains it. An external file lets you swap the image once and invalidate cache with a query string or hash.",[197,431,433],{"id":432},"svgs-that-need-styling-or-scripting","SVGs That Need Styling or Scripting",[15,435,436,437,440],{},"Base64-encoded SVGs become opaque blobs — you cannot target their internal elements with CSS or JavaScript. Use inline ",[34,438,439],{},"\u003Csvg>"," markup instead.",[10,442,444],{"id":443},"inline-vs-external-comparison","Inline vs External: Comparison",[104,446,447,460],{},[107,448,449],{},[110,450,451,454,457],{},[113,452,453],{},"Factor",[113,455,456],{},"Base64 Inline",[113,458,459],{},"External File",[123,461,462,473,484,495,506,523,534],{},[110,463,464,467,470],{},[128,465,466],{},"HTTP requests",[128,468,469],{},"None (embedded)",[128,471,472],{},"One per file",[110,474,475,478,481],{},[128,476,477],{},"File size",[128,479,480],{},"+33% Base64 overhead",[128,482,483],{},"Original size",[110,485,486,489,492],{},[128,487,488],{},"Browser cache",[128,490,491],{},"No (tied to parent file)",[128,493,494],{},"Yes (independent)",[110,496,497,500,503],{},[128,498,499],{},"Progressive render",[128,501,502],{},"No (decode after full parse)",[128,504,505],{},"Yes (streaming JPEG\u002FPNG)",[110,507,508,511,517],{},[128,509,510],{},"CSP compatibility",[128,512,513,514,516],{},"Needs ",[34,515,90],{}," in directive",[128,518,519,520],{},"Works with ",[34,521,522],{},"'self'",[110,524,525,528,531],{},[128,526,527],{},"Edit workflow",[128,529,530],{},"Update every embedding file",[128,532,533],{},"Update one file",[110,535,536,539,542],{},[128,537,538],{},"Best for",[128,540,541],{},"\u003C 2 KB, single-use assets",[128,543,544],{},"Everything else",[10,546,548],{"id":547},"the-2-kb-rule-of-thumb","The 2 KB Rule of Thumb",[15,550,551,552,555],{},"Aim to inline only images ",[22,553,554],{},"under 2 KB"," after Base64 encoding. Below that threshold, the request overhead outweighs the size penalty. Above it, caching and progressive loading deliver faster perceived performance.",[15,557,558],{},"Some teams push the limit to 4 KB or 8 KB, but each step up trades more page weight for fewer requests — diminishing returns set in quickly.",[10,560,562],{"id":561},"how-to-generate-data-uris","How to Generate Data URIs",[197,564,566],{"id":565},"browser-javascript","Browser (JavaScript)",[27,568,572],{"className":569,"code":570,"language":571,"meta":36,"style":36},"language-javascript shiki shiki-themes github-light github-dark","const input = document.querySelector('input[type=\"file\"]');\n\ninput.addEventListener('change', async (e) => {\n  const file = e.target.files[0];\n  const reader = new FileReader();\n  reader.onload = () => {\n    console.log(reader.result);\n    \u002F\u002F \"data:image\u002Fpng;base64,iVBORw0KGgo...\"\n  };\n  reader.readAsDataURL(file);\n});\n","javascript",[34,573,574,602,606,640,659,677,694,706,712,718,729],{"__ignoreMap":36},[48,575,576,580,584,587,590,593,596,599],{"class":50,"line":51},[48,577,579],{"class":578},"szBVR","const",[48,581,583],{"class":582},"sj4cs"," input",[48,585,586],{"class":578}," =",[48,588,589],{"class":54}," document.",[48,591,592],{"class":62},"querySelector",[48,594,595],{"class":54},"(",[48,597,598],{"class":69},"'input[type=\"file\"]'",[48,600,601],{"class":54},");\n",[48,603,604],{"class":50,"line":73},[48,605,378],{"emptyLinePlaceholder":377},[48,607,608,611,614,616,619,621,624,627,631,634,637],{"class":50,"line":230},[48,609,610],{"class":54},"input.",[48,612,613],{"class":62},"addEventListener",[48,615,595],{"class":54},[48,617,618],{"class":69},"'change'",[48,620,155],{"class":54},[48,622,623],{"class":578},"async",[48,625,626],{"class":54}," (",[48,628,630],{"class":629},"s4XuR","e",[48,632,633],{"class":54},") ",[48,635,636],{"class":578},"=>",[48,638,639],{"class":54}," {\n",[48,641,642,645,648,650,653,656],{"class":50,"line":374},[48,643,644],{"class":578},"  const",[48,646,647],{"class":582}," file",[48,649,586],{"class":578},[48,651,652],{"class":54}," e.target.files[",[48,654,655],{"class":582},"0",[48,657,658],{"class":54},"];\n",[48,660,661,663,666,668,671,674],{"class":50,"line":381},[48,662,644],{"class":578},[48,664,665],{"class":582}," reader",[48,667,586],{"class":578},[48,669,670],{"class":578}," new",[48,672,673],{"class":62}," FileReader",[48,675,676],{"class":54},"();\n",[48,678,679,682,685,687,690,692],{"class":50,"line":387},[48,680,681],{"class":54},"  reader.",[48,683,684],{"class":62},"onload",[48,686,586],{"class":578},[48,688,689],{"class":54}," () ",[48,691,636],{"class":578},[48,693,639],{"class":54},[48,695,697,700,703],{"class":50,"line":696},7,[48,698,699],{"class":54},"    console.",[48,701,702],{"class":62},"log",[48,704,705],{"class":54},"(reader.result);\n",[48,707,709],{"class":50,"line":708},8,[48,710,711],{"class":213},"    \u002F\u002F \"data:image\u002Fpng;base64,iVBORw0KGgo...\"\n",[48,713,715],{"class":50,"line":714},9,[48,716,717],{"class":54},"  };\n",[48,719,721,723,726],{"class":50,"line":720},10,[48,722,681],{"class":54},[48,724,725],{"class":62},"readAsDataURL",[48,727,728],{"class":54},"(file);\n",[48,730,732],{"class":50,"line":731},11,[48,733,734],{"class":54},"});\n",[197,736,738],{"id":737},"nodejs","Node.js",[27,740,742],{"className":569,"code":741,"language":571,"meta":36,"style":36},"const fs = require('fs');\nconst path = require('path');\n\nfunction imageToDataUri(filePath) {\n  const ext = path.extname(filePath);\n  const mime = { '.png': 'image\u002Fpng', '.jpg': 'image\u002Fjpeg', '.svg': 'image\u002Fsvg+xml' };\n  const base64 = fs.readFileSync(filePath).toString('base64');\n  return `data:${mime[ext]};base64,${base64}`;\n}\n",[34,743,744,763,781,785,801,819,863,891,923],{"__ignoreMap":36},[48,745,746,748,751,753,756,758,761],{"class":50,"line":51},[48,747,579],{"class":578},[48,749,750],{"class":582}," fs",[48,752,586],{"class":578},[48,754,755],{"class":62}," require",[48,757,595],{"class":54},[48,759,760],{"class":69},"'fs'",[48,762,601],{"class":54},[48,764,765,767,770,772,774,776,779],{"class":50,"line":73},[48,766,579],{"class":578},[48,768,769],{"class":582}," path",[48,771,586],{"class":578},[48,773,755],{"class":62},[48,775,595],{"class":54},[48,777,778],{"class":69},"'path'",[48,780,601],{"class":54},[48,782,783],{"class":50,"line":230},[48,784,378],{"emptyLinePlaceholder":377},[48,786,787,790,793,795,798],{"class":50,"line":374},[48,788,789],{"class":578},"function",[48,791,792],{"class":62}," imageToDataUri",[48,794,595],{"class":54},[48,796,797],{"class":629},"filePath",[48,799,800],{"class":54},") {\n",[48,802,803,805,808,810,813,816],{"class":50,"line":381},[48,804,644],{"class":578},[48,806,807],{"class":582}," ext",[48,809,586],{"class":578},[48,811,812],{"class":54}," path.",[48,814,815],{"class":62},"extname",[48,817,818],{"class":54},"(filePath);\n",[48,820,821,823,826,828,831,834,837,840,842,845,847,850,852,855,857,860],{"class":50,"line":387},[48,822,644],{"class":578},[48,824,825],{"class":582}," mime",[48,827,586],{"class":578},[48,829,830],{"class":54}," { ",[48,832,833],{"class":69},"'.png'",[48,835,836],{"class":54},": ",[48,838,839],{"class":69},"'image\u002Fpng'",[48,841,155],{"class":54},[48,843,844],{"class":69},"'.jpg'",[48,846,836],{"class":54},[48,848,849],{"class":69},"'image\u002Fjpeg'",[48,851,155],{"class":54},[48,853,854],{"class":69},"'.svg'",[48,856,836],{"class":54},[48,858,859],{"class":69},"'image\u002Fsvg+xml'",[48,861,862],{"class":54}," };\n",[48,864,865,867,870,872,875,878,881,884,886,889],{"class":50,"line":696},[48,866,644],{"class":578},[48,868,869],{"class":582}," base64",[48,871,586],{"class":578},[48,873,874],{"class":54}," fs.",[48,876,877],{"class":62},"readFileSync",[48,879,880],{"class":54},"(filePath).",[48,882,883],{"class":62},"toString",[48,885,595],{"class":54},[48,887,888],{"class":69},"'base64'",[48,890,601],{"class":54},[48,892,893,896,899,902,905,908,911,914,917,920],{"class":50,"line":708},[48,894,895],{"class":578},"  return",[48,897,898],{"class":69}," `data:${",[48,900,901],{"class":54},"mime",[48,903,904],{"class":69},"[",[48,906,907],{"class":54},"ext",[48,909,910],{"class":69},"]",[48,912,913],{"class":69},"};base64,${",[48,915,916],{"class":54},"base64",[48,918,919],{"class":69},"}`",[48,921,922],{"class":54},";\n",[48,924,925],{"class":50,"line":714},[48,926,927],{"class":54},"}\n",[10,929,931],{"id":930},"key-takeaways","Key Takeaways",[933,934,935,943,946,949,952,955],"ul",{},[936,937,938,939,942],"li",{},"Data URIs embed images directly in HTML or CSS using the ",[34,940,941],{},"data:image\u002F\u003Ctype>;base64,\u003Cdata>"," format",[936,944,945],{},"Inline images under 2 KB to save HTTP requests without hurting performance",[936,947,948],{},"Avoid Base64 for large images, repeated assets, and frequently changed resources",[936,950,951],{},"External files win on caching, progressive rendering, and edit workflow",[936,953,954],{},"Email templates and single-file demos are strong use cases for inlining",[936,956,957],{},"Always compress images before encoding — smaller input means smaller Base64 output",[10,959,961],{"id":960},"try-it-yourself","Try It Yourself",[15,963,964,965,970],{},"Convert images to Base64 Data URIs with our free ",[966,967,969],"a",{"href":968},"\u002Ftools\u002Fbase64","Base64 Encoder\u002FDecoder",". Paste an image, get the Data URI string, and drop it straight into your HTML.",[10,972,974],{"id":973},"related-guides","Related Guides",[933,976,977,983,989],{},[936,978,979],{},[966,980,982],{"href":981},"\u002Fguides\u002Fdata-uri-performance","Data URI Performance: Trade-offs of Inlining Resources",[936,984,985],{},[966,986,988],{"href":987},"\u002Fguides\u002Fbase64-image-optimization","Base64 Image Optimization: Size, Caching, and Lazy Loading",[936,990,991],{},[966,992,994],{"href":993},"\u002Fguides\u002Furl-encoding-guide","URL Encoding Guide",[996,997,998],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":36,"searchDepth":73,"depth":73,"links":1000},[1001,1002,1003,1009,1015,1016,1017,1021,1022,1023],{"id":12,"depth":73,"text":13},{"id":98,"depth":73,"text":99},{"id":191,"depth":73,"text":192,"children":1004},[1005,1006,1007,1008],{"id":199,"depth":230,"text":200},{"id":257,"depth":230,"text":258},{"id":312,"depth":230,"text":313},{"id":319,"depth":230,"text":320},{"id":326,"depth":73,"text":327,"children":1010},[1011,1012,1013,1014],{"id":333,"depth":230,"text":334},{"id":418,"depth":230,"text":419},{"id":425,"depth":230,"text":426},{"id":432,"depth":230,"text":433},{"id":443,"depth":73,"text":444},{"id":547,"depth":73,"text":548},{"id":561,"depth":73,"text":562,"children":1018},[1019,1020],{"id":565,"depth":230,"text":566},{"id":737,"depth":230,"text":738},{"id":930,"depth":73,"text":931},{"id":960,"depth":73,"text":961},{"id":973,"depth":73,"text":974},"2026-05-28","Learn when to embed images as Base64 Data URIs in HTML and CSS, and when external files are better. Includes syntax, use cases, and a comparison table.","md",{"immutable":377},"\u002Fguides\u002Fimage-to-base64-guide",{"title":5,"description":1025},"guides\u002Fimage-to-base64-guide","MqHKGeZZBHADbRaRN_EZZb1ifmIulcFGT13AJ2Fep34",1780401327317]