[{"data":1,"prerenderedAt":2002},["ShallowReactive",2],{"guide-data-uri-base64":3},{"id":4,"title":5,"body":6,"date":1994,"description":1995,"extension":1996,"meta":1997,"navigation":150,"path":1998,"readingTime":207,"seo":1999,"stem":2000,"__hash__":2001},"guides\u002Fguides\u002Fdata-uri-base64.md","Data URI and Base64: Embedded Images in HTML and CSS",{"type":7,"value":8,"toc":1952},"minimark",[9,14,18,21,25,28,33,44,47,92,96,249,253,256,260,417,421,426,699,704,787,791,795,798,804,808,811,815,818,850,854,857,861,865,872,878,881,885,888,894,898,901,934,937,941,944,1011,1015,1018,1022,1025,1118,1122,1125,1131,1135,1139,1144,1176,1181,1213,1219,1224,1283,1289,1293,1298,1343,1349,1355,1360,1408,1412,1416,1423,1427,1430,1435,1589,1594,1609,1613,1616,1711,1714,1718,1722,1725,1756,1760,1763,1891,1895,1898,1903,1917,1922,1936,1940,1949],[10,11,13],"h2",{"id":12},"introduction","Introduction",[15,16,17],"p",{},"Data URIs (Uniform Resource Identifiers) allow you to embed files directly into HTML or CSS documents, eliminating the need for separate HTTP requests. This technique is commonly used with Base64-encoded images, fonts, and other small assets.",[15,19,20],{},"But is embedding assets always a good idea? This guide covers the Data URI format, its advantages and disadvantages, performance characteristics, and practical guidelines for when to use inline assets in your web projects.",[10,22,24],{"id":23},"what-is-a-data-uri","What is a Data URI?",[15,26,27],{},"A Data URI is a URI scheme that embeds data directly into a document, defined in RFC 2397. Instead of linking to an external file, the data itself is included in the URI.",[29,30,32],"h3",{"id":31},"data-uri-syntax","Data URI Syntax",[34,35,40],"pre",{"className":36,"code":38,"language":39},[37],"language-text","data:[\u003Cmedia type>][;base64],\u003Cdata>\n","text",[41,42,38],"code",{"__ignoreMap":43},"",[15,45,46],{},"The components are:",[48,49,50,60,76,84],"ul",{},[51,52,53,59],"li",{},[54,55,56],"strong",{},[41,57,58],{},"data:"," — The URI scheme identifier",[51,61,62,67,68,71,72,75],{},[54,63,64],{},[41,65,66],{},"\u003Cmedia type>"," — MIME type (e.g., ",[41,69,70],{},"image\u002Fpng",", ",[41,73,74],{},"text\u002Fplain",")",[51,77,78,83],{},[54,79,80],{},[41,81,82],{},";base64"," — Optional flag indicating Base64 encoding",[51,85,86,91],{},[54,87,88],{},[41,89,90],{},"\u003Cdata>"," — The actual data (raw or Base64-encoded)",[29,93,95],{"id":94},"examples","Examples",[34,97,101],{"className":98,"code":99,"language":100,"meta":43,"style":43},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Inline PNG image -->\n\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==\" alt=\"Red dot\">\n\n\u003C!-- Inline CSS background -->\n\u003Cstyle>\n  .icon {\n    background-image: url('data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==');\n  }\n\u003C\u002Fstyle>\n\n\u003C!-- Inline plain text -->\n\u003Ca href=\"data:text\u002Fplain;base64,SGVsbG8gV29ybGQ=\">Download hello.txt\u003C\u002Fa>\n","html",[41,102,103,112,145,152,158,168,177,199,205,215,220,226],{"__ignoreMap":43},[104,105,108],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"sJ8bj","\u003C!-- Inline PNG image -->\n",[104,113,115,119,123,127,130,134,137,139,142],{"class":106,"line":114},2,[104,116,118],{"class":117},"sVt8B","\u003C",[104,120,122],{"class":121},"s9eBZ","img",[104,124,126],{"class":125},"sScJk"," src",[104,128,129],{"class":117},"=",[104,131,133],{"class":132},"sZZnC","\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==\"",[104,135,136],{"class":125}," alt",[104,138,129],{"class":117},[104,140,141],{"class":132},"\"Red dot\"",[104,143,144],{"class":117},">\n",[104,146,148],{"class":106,"line":147},3,[104,149,151],{"emptyLinePlaceholder":150},true,"\n",[104,153,155],{"class":106,"line":154},4,[104,156,157],{"class":110},"\u003C!-- Inline CSS background -->\n",[104,159,161,163,166],{"class":106,"line":160},5,[104,162,118],{"class":117},[104,164,165],{"class":121},"style",[104,167,144],{"class":117},[104,169,171,174],{"class":106,"line":170},6,[104,172,173],{"class":125},"  .icon",[104,175,176],{"class":117}," {\n",[104,178,180,184,187,190,193,196],{"class":106,"line":179},7,[104,181,183],{"class":182},"sj4cs","    background-image",[104,185,186],{"class":117},": ",[104,188,189],{"class":182},"url",[104,191,192],{"class":117},"(",[104,194,195],{"class":132},"'data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='",[104,197,198],{"class":117},");\n",[104,200,202],{"class":106,"line":201},8,[104,203,204],{"class":117},"  }\n",[104,206,208,211,213],{"class":106,"line":207},9,[104,209,210],{"class":117},"\u003C\u002F",[104,212,165],{"class":121},[104,214,144],{"class":117},[104,216,218],{"class":106,"line":217},10,[104,219,151],{"emptyLinePlaceholder":150},[104,221,223],{"class":106,"line":222},11,[104,224,225],{"class":110},"\u003C!-- Inline plain text -->\n",[104,227,229,231,234,237,239,242,245,247],{"class":106,"line":228},12,[104,230,118],{"class":117},[104,232,233],{"class":121},"a",[104,235,236],{"class":125}," href",[104,238,129],{"class":117},[104,240,241],{"class":132},"\"data:text\u002Fplain;base64,SGVsbG8gV29ybGQ=\"",[104,243,244],{"class":117},">Download hello.txt\u003C\u002F",[104,246,233],{"class":121},[104,248,144],{"class":117},[10,250,252],{"id":251},"how-base64-encoding-works-in-data-uris","How Base64 Encoding Works in Data URIs",[15,254,255],{},"When embedding binary data (like images) in a Data URI, the data must be Base64-encoded because URIs can only contain ASCII characters.",[29,257,259],{"id":258},"the-encoding-process","The Encoding Process",[34,261,265],{"className":262,"code":263,"language":264,"meta":43,"style":43},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Step 1: Get binary image data (e.g., from canvas or fetch)\nconst response = await fetch('image.png');\nconst blob = await response.blob();\n\n\u002F\u002F Step 2: Convert to Base64\nconst reader = new FileReader();\nreader.onload = function() {\n  const base64 = reader.result; \u002F\u002F data:image\u002Fpng;base64,iVBORw0KGgo...\n  console.log(base64);\n};\nreader.readAsDataURL(blob);\n\n\u002F\u002F Step 3: Use in HTML\u002FCSS\n\u002F\u002F \u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgo...\">\n","javascript",[41,266,267,272,297,317,321,326,343,359,375,386,391,401,405,411],{"__ignoreMap":43},[104,268,269],{"class":106,"line":107},[104,270,271],{"class":110},"\u002F\u002F Step 1: Get binary image data (e.g., from canvas or fetch)\n",[104,273,274,278,281,284,287,290,292,295],{"class":106,"line":114},[104,275,277],{"class":276},"szBVR","const",[104,279,280],{"class":182}," response",[104,282,283],{"class":276}," =",[104,285,286],{"class":276}," await",[104,288,289],{"class":125}," fetch",[104,291,192],{"class":117},[104,293,294],{"class":132},"'image.png'",[104,296,198],{"class":117},[104,298,299,301,304,306,308,311,314],{"class":106,"line":147},[104,300,277],{"class":276},[104,302,303],{"class":182}," blob",[104,305,283],{"class":276},[104,307,286],{"class":276},[104,309,310],{"class":117}," response.",[104,312,313],{"class":125},"blob",[104,315,316],{"class":117},"();\n",[104,318,319],{"class":106,"line":154},[104,320,151],{"emptyLinePlaceholder":150},[104,322,323],{"class":106,"line":160},[104,324,325],{"class":110},"\u002F\u002F Step 2: Convert to Base64\n",[104,327,328,330,333,335,338,341],{"class":106,"line":170},[104,329,277],{"class":276},[104,331,332],{"class":182}," reader",[104,334,283],{"class":276},[104,336,337],{"class":276}," new",[104,339,340],{"class":125}," FileReader",[104,342,316],{"class":117},[104,344,345,348,351,353,356],{"class":106,"line":179},[104,346,347],{"class":117},"reader.",[104,349,350],{"class":125},"onload",[104,352,283],{"class":276},[104,354,355],{"class":276}," function",[104,357,358],{"class":117},"() {\n",[104,360,361,364,367,369,372],{"class":106,"line":201},[104,362,363],{"class":276},"  const",[104,365,366],{"class":182}," base64",[104,368,283],{"class":276},[104,370,371],{"class":117}," reader.result; ",[104,373,374],{"class":110},"\u002F\u002F data:image\u002Fpng;base64,iVBORw0KGgo...\n",[104,376,377,380,383],{"class":106,"line":207},[104,378,379],{"class":117},"  console.",[104,381,382],{"class":125},"log",[104,384,385],{"class":117},"(base64);\n",[104,387,388],{"class":106,"line":217},[104,389,390],{"class":117},"};\n",[104,392,393,395,398],{"class":106,"line":222},[104,394,347],{"class":117},[104,396,397],{"class":125},"readAsDataURL",[104,399,400],{"class":117},"(blob);\n",[104,402,403],{"class":106,"line":228},[104,404,151],{"emptyLinePlaceholder":150},[104,406,408],{"class":106,"line":407},13,[104,409,410],{"class":110},"\u002F\u002F Step 3: Use in HTML\u002FCSS\n",[104,412,414],{"class":106,"line":413},14,[104,415,416],{"class":110},"\u002F\u002F \u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgo...\">\n",[29,418,420],{"id":419},"generating-data-uris-in-different-languages","Generating Data URIs in Different Languages",[15,422,423],{},[54,424,425],{},"Node.js:",[34,427,429],{"className":262,"code":428,"language":264,"meta":43,"style":43},"const fs = require('fs');\n\nfunction createDataUri(filePath) {\n  const mimeTypes = {\n    '.png': 'image\u002Fpng',\n    '.jpg': 'image\u002Fjpeg',\n    '.gif': 'image\u002Fgif',\n    '.svg': 'image\u002Fsvg+xml',\n    '.woff2': 'font\u002Fwoff2'\n  };\n\n  const ext = path.extname(filePath);\n  const mimeType = mimeTypes[ext] || 'application\u002Foctet-stream';\n  const data = fs.readFileSync(filePath);\n  const base64 = data.toString('base64');\n\n  return `data:${mimeType};base64,${base64}`;\n}\n\nconst dataUri = createDataUri('logo.png');\nconsole.log(dataUri); \u002F\u002F data:image\u002Fpng;base64,iVBORw0KGgo...\n",[41,430,431,450,454,471,482,495,507,519,531,541,546,550,568,589,606,628,633,656,662,667,686],{"__ignoreMap":43},[104,432,433,435,438,440,443,445,448],{"class":106,"line":107},[104,434,277],{"class":276},[104,436,437],{"class":182}," fs",[104,439,283],{"class":276},[104,441,442],{"class":125}," require",[104,444,192],{"class":117},[104,446,447],{"class":132},"'fs'",[104,449,198],{"class":117},[104,451,452],{"class":106,"line":114},[104,453,151],{"emptyLinePlaceholder":150},[104,455,456,459,462,464,468],{"class":106,"line":147},[104,457,458],{"class":276},"function",[104,460,461],{"class":125}," createDataUri",[104,463,192],{"class":117},[104,465,467],{"class":466},"s4XuR","filePath",[104,469,470],{"class":117},") {\n",[104,472,473,475,478,480],{"class":106,"line":154},[104,474,363],{"class":276},[104,476,477],{"class":182}," mimeTypes",[104,479,283],{"class":276},[104,481,176],{"class":117},[104,483,484,487,489,492],{"class":106,"line":160},[104,485,486],{"class":132},"    '.png'",[104,488,186],{"class":117},[104,490,491],{"class":132},"'image\u002Fpng'",[104,493,494],{"class":117},",\n",[104,496,497,500,502,505],{"class":106,"line":170},[104,498,499],{"class":132},"    '.jpg'",[104,501,186],{"class":117},[104,503,504],{"class":132},"'image\u002Fjpeg'",[104,506,494],{"class":117},[104,508,509,512,514,517],{"class":106,"line":179},[104,510,511],{"class":132},"    '.gif'",[104,513,186],{"class":117},[104,515,516],{"class":132},"'image\u002Fgif'",[104,518,494],{"class":117},[104,520,521,524,526,529],{"class":106,"line":201},[104,522,523],{"class":132},"    '.svg'",[104,525,186],{"class":117},[104,527,528],{"class":132},"'image\u002Fsvg+xml'",[104,530,494],{"class":117},[104,532,533,536,538],{"class":106,"line":207},[104,534,535],{"class":132},"    '.woff2'",[104,537,186],{"class":117},[104,539,540],{"class":132},"'font\u002Fwoff2'\n",[104,542,543],{"class":106,"line":217},[104,544,545],{"class":117},"  };\n",[104,547,548],{"class":106,"line":222},[104,549,151],{"emptyLinePlaceholder":150},[104,551,552,554,557,559,562,565],{"class":106,"line":228},[104,553,363],{"class":276},[104,555,556],{"class":182}," ext",[104,558,283],{"class":276},[104,560,561],{"class":117}," path.",[104,563,564],{"class":125},"extname",[104,566,567],{"class":117},"(filePath);\n",[104,569,570,572,575,577,580,583,586],{"class":106,"line":407},[104,571,363],{"class":276},[104,573,574],{"class":182}," mimeType",[104,576,283],{"class":276},[104,578,579],{"class":117}," mimeTypes[ext] ",[104,581,582],{"class":276},"||",[104,584,585],{"class":132}," 'application\u002Foctet-stream'",[104,587,588],{"class":117},";\n",[104,590,591,593,596,598,601,604],{"class":106,"line":413},[104,592,363],{"class":276},[104,594,595],{"class":182}," data",[104,597,283],{"class":276},[104,599,600],{"class":117}," fs.",[104,602,603],{"class":125},"readFileSync",[104,605,567],{"class":117},[104,607,609,611,613,615,618,621,623,626],{"class":106,"line":608},15,[104,610,363],{"class":276},[104,612,366],{"class":182},[104,614,283],{"class":276},[104,616,617],{"class":117}," data.",[104,619,620],{"class":125},"toString",[104,622,192],{"class":117},[104,624,625],{"class":132},"'base64'",[104,627,198],{"class":117},[104,629,631],{"class":106,"line":630},16,[104,632,151],{"emptyLinePlaceholder":150},[104,634,636,639,642,645,648,651,654],{"class":106,"line":635},17,[104,637,638],{"class":276},"  return",[104,640,641],{"class":132}," `data:${",[104,643,644],{"class":117},"mimeType",[104,646,647],{"class":132},"};base64,${",[104,649,650],{"class":117},"base64",[104,652,653],{"class":132},"}`",[104,655,588],{"class":117},[104,657,659],{"class":106,"line":658},18,[104,660,661],{"class":117},"}\n",[104,663,665],{"class":106,"line":664},19,[104,666,151],{"emptyLinePlaceholder":150},[104,668,670,672,675,677,679,681,684],{"class":106,"line":669},20,[104,671,277],{"class":276},[104,673,674],{"class":182}," dataUri",[104,676,283],{"class":276},[104,678,461],{"class":125},[104,680,192],{"class":117},[104,682,683],{"class":132},"'logo.png'",[104,685,198],{"class":117},[104,687,689,692,694,697],{"class":106,"line":688},21,[104,690,691],{"class":117},"console.",[104,693,382],{"class":125},[104,695,696],{"class":117},"(dataUri); ",[104,698,374],{"class":110},[15,700,701],{},[54,702,703],{},"Python:",[34,705,709],{"className":706,"code":707,"language":708,"meta":43,"style":43},"language-python shiki shiki-themes github-light github-dark","import base64\nimport mimetypes\n\ndef create_data_uri(file_path):\n    mime_type, _ = mimetypes.guess_type(file_path)\n    if not mime_type:\n        mime_type = 'application\u002Foctet-stream'\n\n    with open(file_path, 'rb') as f:\n        data = f.read()\n\n    base64_data = base64.b64encode(data).decode('ascii')\n    return f'data:{mime_type};base64,{base64_data}'\n\ndata_uri = create_data_uri('logo.png')\nprint(data_uri)\n","python",[41,710,711,716,721,725,730,735,740,745,749,754,759,763,768,773,777,782],{"__ignoreMap":43},[104,712,713],{"class":106,"line":107},[104,714,715],{},"import base64\n",[104,717,718],{"class":106,"line":114},[104,719,720],{},"import mimetypes\n",[104,722,723],{"class":106,"line":147},[104,724,151],{"emptyLinePlaceholder":150},[104,726,727],{"class":106,"line":154},[104,728,729],{},"def create_data_uri(file_path):\n",[104,731,732],{"class":106,"line":160},[104,733,734],{},"    mime_type, _ = mimetypes.guess_type(file_path)\n",[104,736,737],{"class":106,"line":170},[104,738,739],{},"    if not mime_type:\n",[104,741,742],{"class":106,"line":179},[104,743,744],{},"        mime_type = 'application\u002Foctet-stream'\n",[104,746,747],{"class":106,"line":201},[104,748,151],{"emptyLinePlaceholder":150},[104,750,751],{"class":106,"line":207},[104,752,753],{},"    with open(file_path, 'rb') as f:\n",[104,755,756],{"class":106,"line":217},[104,757,758],{},"        data = f.read()\n",[104,760,761],{"class":106,"line":222},[104,762,151],{"emptyLinePlaceholder":150},[104,764,765],{"class":106,"line":228},[104,766,767],{},"    base64_data = base64.b64encode(data).decode('ascii')\n",[104,769,770],{"class":106,"line":407},[104,771,772],{},"    return f'data:{mime_type};base64,{base64_data}'\n",[104,774,775],{"class":106,"line":413},[104,776,151],{"emptyLinePlaceholder":150},[104,778,779],{"class":106,"line":608},[104,780,781],{},"data_uri = create_data_uri('logo.png')\n",[104,783,784],{"class":106,"line":630},[104,785,786],{},"print(data_uri)\n",[10,788,790],{"id":789},"advantages-of-data-uris","Advantages of Data URIs",[29,792,794],{"id":793},"_1-reduced-http-requests","1. Reduced HTTP Requests",[15,796,797],{},"Each external resource requires a separate HTTP request. Data URIs eliminate these requests for embedded assets:",[34,799,802],{"className":800,"code":801,"language":39},[37],"Without Data URIs:\n- HTML document (1 request)\n- logo.png (1 request)\n- icon.svg (1 request)\n- font.woff2 (1 request)\n= 4 HTTP requests\n\nWith Data URIs:\n- HTML document with embedded assets (1 request)\n= 1 HTTP request\n",[41,803,801],{"__ignoreMap":43},[29,805,807],{"id":806},"_2-no-external-dependencies","2. No External Dependencies",[15,809,810],{},"Embedded assets are self-contained within the document. If the HTML file is saved or shared, all embedded resources come along with it.",[29,812,814],{"id":813},"_3-useful-for-email-html","3. Useful for Email HTML",[15,816,817],{},"Many email clients block external images by default. Data URIs allow images to display immediately without requiring the user to \"show images\":",[34,819,821],{"className":98,"code":820,"language":100,"meta":43,"style":43},"\u003C!-- Email-safe embedded image -->\n\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgo...\" alt=\"Company Logo\">\n",[41,822,823,828],{"__ignoreMap":43},[104,824,825],{"class":106,"line":107},[104,826,827],{"class":110},"\u003C!-- Email-safe embedded image -->\n",[104,829,830,832,834,836,838,841,843,845,848],{"class":106,"line":114},[104,831,118],{"class":117},[104,833,122],{"class":121},[104,835,126],{"class":125},[104,837,129],{"class":117},[104,839,840],{"class":132},"\"data:image\u002Fpng;base64,iVBORw0KGgo...\"",[104,842,136],{"class":125},[104,844,129],{"class":117},[104,846,847],{"class":132},"\"Company Logo\"",[104,849,144],{"class":117},[29,851,853],{"id":852},"_4-works-offline","4. Works Offline",[15,855,856],{},"Since the data is embedded, it works without network connectivity (as long as the containing document is available).",[10,858,860],{"id":859},"disadvantages-of-data-uris","Disadvantages of Data URIs",[29,862,864],{"id":863},"_1-increased-file-size","1. Increased File Size",[15,866,867,868,871],{},"Base64 encoding increases the data size by approximately ",[54,869,870],{},"33%"," compared to the original binary:",[34,873,876],{"className":874,"code":875,"language":39},[37],"Original PNG: 10 KB\nBase64-encoded: ~13.3 KB (+33%)\n\nOriginal JPEG: 50 KB\nBase64-encoded: ~66.7 KB (+33%)\n",[41,877,875],{"__ignoreMap":43},[15,879,880],{},"This size increase happens because Base64 represents 3 bytes of binary data using 4 ASCII characters.",[29,882,884],{"id":883},"_2-not-cacheable-independently","2. Not Cacheable Independently",[15,886,887],{},"When you embed an image in HTML or CSS, it becomes part of that file. If the same image is used on 10 pages, it gets downloaded 10 times (once per page).",[34,889,892],{"className":890,"code":891,"language":39},[37],"External image approach:\n- logo.png cached after first download\n- All pages reference the same cached file\n\nData URI approach:\n- logo.png embedded in each HTML file\n- Each page download includes the full image data\n",[41,893,891],{"__ignoreMap":43},[29,895,897],{"id":896},"_3-slower-parsing-and-rendering","3. Slower Parsing and Rendering",[15,899,900],{},"The browser must decode the Base64 data before rendering, which takes additional CPU time:",[34,902,904],{"className":262,"code":903,"language":264,"meta":43,"style":43},"\u002F\u002F Browser has to do this internally:\nconst binaryData = atob(base64String); \u002F\u002F Decoding step\n\u002F\u002F Then render the image\n",[41,905,906,911,929],{"__ignoreMap":43},[104,907,908],{"class":106,"line":107},[104,909,910],{"class":110},"\u002F\u002F Browser has to do this internally:\n",[104,912,913,915,918,920,923,926],{"class":106,"line":114},[104,914,277],{"class":276},[104,916,917],{"class":182}," binaryData",[104,919,283],{"class":276},[104,921,922],{"class":125}," atob",[104,924,925],{"class":117},"(base64String); ",[104,927,928],{"class":110},"\u002F\u002F Decoding step\n",[104,930,931],{"class":106,"line":147},[104,932,933],{"class":110},"\u002F\u002F Then render the image\n",[15,935,936],{},"For large images or many embedded assets, this can impact page load performance.",[29,938,940],{"id":939},"_4-increased-htmlcss-file-size","4. Increased HTML\u002FCSS File Size",[15,942,943],{},"Embedding large assets makes your HTML or CSS files significantly larger, which can slow down initial page parsing:",[34,945,949],{"className":946,"code":947,"language":948,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark","\u002F* Embedding a 100KB font file in CSS *\u002F\n@font-face {\n  font-family: 'CustomFont';\n  src: url('data:font\u002Fwoff2;base64,d09GMgABAAAA...[100KB of Base64]...') format('woff2');\n}\n\u002F* This CSS file is now 100KB+ larger *\u002F\n","css",[41,950,951,956,963,975,1002,1006],{"__ignoreMap":43},[104,952,953],{"class":106,"line":107},[104,954,955],{"class":110},"\u002F* Embedding a 100KB font file in CSS *\u002F\n",[104,957,958,961],{"class":106,"line":114},[104,959,960],{"class":276},"@font-face",[104,962,176],{"class":117},[104,964,965,968,970,973],{"class":106,"line":147},[104,966,967],{"class":182},"  font-family",[104,969,186],{"class":117},[104,971,972],{"class":132},"'CustomFont'",[104,974,588],{"class":117},[104,976,977,980,982,984,986,989,992,995,997,1000],{"class":106,"line":154},[104,978,979],{"class":182},"  src",[104,981,186],{"class":117},[104,983,189],{"class":182},[104,985,192],{"class":117},[104,987,988],{"class":132},"'data:font\u002Fwoff2;base64,d09GMgABAAAA...[100KB of Base64]...'",[104,990,991],{"class":117},") ",[104,993,994],{"class":182},"format",[104,996,192],{"class":117},[104,998,999],{"class":132},"'woff2'",[104,1001,198],{"class":117},[104,1003,1004],{"class":106,"line":160},[104,1005,661],{"class":117},[104,1007,1008],{"class":106,"line":170},[104,1009,1010],{"class":110},"\u002F* This CSS file is now 100KB+ larger *\u002F\n",[29,1012,1014],{"id":1013},"_5-no-progressive-loading","5. No Progressive Loading",[15,1016,1017],{},"External images can be loaded progressively (especially JPEG), showing a low-quality preview while downloading. Data URIs must be fully decoded before rendering.",[10,1019,1021],{"id":1020},"performance-comparison","Performance Comparison",[15,1023,1024],{},"Here's a realistic comparison of different approaches:",[1026,1027,1028,1047],"table",{},[1029,1030,1031],"thead",{},[1032,1033,1034,1038,1041,1044],"tr",{},[1035,1036,1037],"th",{},"Metric",[1035,1039,1040],{},"External File",[1035,1042,1043],{},"Data URI",[1035,1045,1046],{},"HTTP\u002F2 Multiplexing",[1048,1049,1050,1065,1078,1091,1104],"tbody",{},[1032,1051,1052,1056,1059,1062],{},[1053,1054,1055],"td",{},"HTTP Requests",[1053,1057,1058],{},"1 per file",[1053,1060,1061],{},"0 (embedded)",[1053,1063,1064],{},"1 connection, multiple streams",[1032,1066,1067,1070,1073,1076],{},[1053,1068,1069],{},"File Size",[1053,1071,1072],{},"Original",[1053,1074,1075],{},"+33% (Base64)",[1053,1077,1072],{},[1032,1079,1080,1083,1086,1089],{},[1053,1081,1082],{},"Cacheability",[1053,1084,1085],{},"Yes (independent)",[1053,1087,1088],{},"No (part of parent)",[1053,1090,1085],{},[1032,1092,1093,1096,1099,1102],{},[1053,1094,1095],{},"Parsing Overhead",[1053,1097,1098],{},"None",[1053,1100,1101],{},"Base64 decode",[1053,1103,1098],{},[1032,1105,1106,1109,1112,1115],{},[1053,1107,1108],{},"Best For",[1053,1110,1111],{},"Large assets, repeated assets",[1053,1113,1114],{},"Tiny assets, one-time use",[1053,1116,1117],{},"General purpose",[29,1119,1121],{"id":1120},"when-http2-changes-the-equation","When HTTP\u002F2 Changes the Equation",[15,1123,1124],{},"With HTTP\u002F2, multiple files can be requested over a single connection with multiplexing. The request overhead is much lower, reducing the advantage of Data URIs:",[34,1126,1129],{"className":1127,"code":1128,"language":39},[37],"HTTP\u002F1.1: 10 assets = 10 connections = slow\nHTTP\u002F2:   10 assets = 1 connection, multiplexed = fast\n\nConclusion: Data URIs matter less with HTTP\u002F2\n",[41,1130,1128],{"__ignoreMap":43},[10,1132,1134],{"id":1133},"when-to-use-data-uris","When to Use Data URIs",[29,1136,1138],{"id":1137},"good-use-cases","✅ Good Use Cases",[15,1140,1141],{},[54,1142,1143],{},"1. Very Small Images (under 2KB)",[34,1145,1147],{"className":98,"code":1146,"language":100,"meta":43,"style":43},"\u003C!-- Small icons, spacers, simple SVG -->\n\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAA...\" alt=\"icon\">\n",[41,1148,1149,1154],{"__ignoreMap":43},[104,1150,1151],{"class":106,"line":107},[104,1152,1153],{"class":110},"\u003C!-- Small icons, spacers, simple SVG -->\n",[104,1155,1156,1158,1160,1162,1164,1167,1169,1171,1174],{"class":106,"line":114},[104,1157,118],{"class":117},[104,1159,122],{"class":121},[104,1161,126],{"class":125},[104,1163,129],{"class":117},[104,1165,1166],{"class":132},"\"data:image\u002Fpng;base64,iVBORw0KGgoAAAA...\"",[104,1168,136],{"class":125},[104,1170,129],{"class":117},[104,1172,1173],{"class":132},"\"icon\"",[104,1175,144],{"class":117},[15,1177,1178],{},[54,1179,1180],{},"2. Email Templates",[34,1182,1184],{"className":98,"code":1183,"language":100,"meta":43,"style":43},"\u003C!-- Email clients often block external images -->\n\u003Cimg src=\"data:image\u002Fpng;base64,...\" alt=\"Logo\">\n",[41,1185,1186,1191],{"__ignoreMap":43},[104,1187,1188],{"class":106,"line":107},[104,1189,1190],{"class":110},"\u003C!-- Email clients often block external images -->\n",[104,1192,1193,1195,1197,1199,1201,1204,1206,1208,1211],{"class":106,"line":114},[104,1194,118],{"class":117},[104,1196,122],{"class":121},[104,1198,126],{"class":125},[104,1200,129],{"class":117},[104,1202,1203],{"class":132},"\"data:image\u002Fpng;base64,...\"",[104,1205,136],{"class":125},[104,1207,129],{"class":117},[104,1209,1210],{"class":132},"\"Logo\"",[104,1212,144],{"class":117},[15,1214,1215,1218],{},[54,1216,1217],{},"3. One-Time Use Assets","\nIf an image appears only on one page and is very small, embedding can reduce requests.",[15,1220,1221],{},[54,1222,1223],{},"4. SVG Icons (with caveats)",[34,1225,1227],{"className":98,"code":1226,"language":100,"meta":43,"style":43},"\u003C!-- Simple SVG icons can be inlined -->\n\u003Csvg viewBox=\"0 0 24 24\">\n  \u003Cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"\u002F>\n\u003C\u002Fsvg>\n\u003C!-- Or as Data URI for CSS background -->\n",[41,1228,1229,1234,1251,1270,1278],{"__ignoreMap":43},[104,1230,1231],{"class":106,"line":107},[104,1232,1233],{"class":110},"\u003C!-- Simple SVG icons can be inlined -->\n",[104,1235,1236,1238,1241,1244,1246,1249],{"class":106,"line":114},[104,1237,118],{"class":117},[104,1239,1240],{"class":121},"svg",[104,1242,1243],{"class":125}," viewBox",[104,1245,129],{"class":117},[104,1247,1248],{"class":132},"\"0 0 24 24\"",[104,1250,144],{"class":117},[104,1252,1253,1256,1259,1262,1264,1267],{"class":106,"line":147},[104,1254,1255],{"class":117},"  \u003C",[104,1257,1258],{"class":121},"path",[104,1260,1261],{"class":125}," d",[104,1263,129],{"class":117},[104,1265,1266],{"class":132},"\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"",[104,1268,1269],{"class":117},"\u002F>\n",[104,1271,1272,1274,1276],{"class":106,"line":154},[104,1273,210],{"class":117},[104,1275,1240],{"class":121},[104,1277,144],{"class":117},[104,1279,1280],{"class":106,"line":160},[104,1281,1282],{"class":110},"\u003C!-- Or as Data URI for CSS background -->\n",[15,1284,1285,1288],{},[54,1286,1287],{},"5. Offline-First Applications","\nWhen building offline-capable apps where every asset must be self-contained.",[29,1290,1292],{"id":1291},"bad-use-cases","❌ Bad Use Cases",[15,1294,1295],{},[54,1296,1297],{},"1. Large Images",[34,1299,1301],{"className":98,"code":1300,"language":100,"meta":43,"style":43},"\u003C!-- DON'T DO THIS -->\n\u003Cimg src=\"data:image\u002Fjpeg;base64,\u002F9j\u002F4AAQSkZJRgABAQAAAQ...[500KB of Base64]...\">\n\u003C!-- Use an external file instead -->\n\u003Cimg src=\"photo.jpg\">\n",[41,1302,1303,1308,1323,1328],{"__ignoreMap":43},[104,1304,1305],{"class":106,"line":107},[104,1306,1307],{"class":110},"\u003C!-- DON'T DO THIS -->\n",[104,1309,1310,1312,1314,1316,1318,1321],{"class":106,"line":114},[104,1311,118],{"class":117},[104,1313,122],{"class":121},[104,1315,126],{"class":125},[104,1317,129],{"class":117},[104,1319,1320],{"class":132},"\"data:image\u002Fjpeg;base64,\u002F9j\u002F4AAQSkZJRgABAQAAAQ...[500KB of Base64]...\"",[104,1322,144],{"class":117},[104,1324,1325],{"class":106,"line":147},[104,1326,1327],{"class":110},"\u003C!-- Use an external file instead -->\n",[104,1329,1330,1332,1334,1336,1338,1341],{"class":106,"line":154},[104,1331,118],{"class":117},[104,1333,122],{"class":121},[104,1335,126],{"class":125},[104,1337,129],{"class":117},[104,1339,1340],{"class":132},"\"photo.jpg\"",[104,1342,144],{"class":117},[15,1344,1345,1348],{},[54,1346,1347],{},"2. Repeated Assets","\nIf the same image appears on multiple pages, use an external file for caching.",[15,1350,1351,1354],{},[54,1352,1353],{},"3. Frequently Changing Assets","\nIf you update the image often, you'd need to update every file that embeds it.",[15,1356,1357],{},[54,1358,1359],{},"4. Font Files (Usually)",[34,1361,1363],{"className":946,"code":1362,"language":948,"meta":43,"style":43},"\u002F* AVOID for large font files *\u002F\n@font-face {\n  src: url('data:font\u002Fwoff2;base64,...') format('woff2');\n}\n\u002F* Use external file with cache *\u002F\n",[41,1364,1365,1370,1376,1399,1403],{"__ignoreMap":43},[104,1366,1367],{"class":106,"line":107},[104,1368,1369],{"class":110},"\u002F* AVOID for large font files *\u002F\n",[104,1371,1372,1374],{"class":106,"line":114},[104,1373,960],{"class":276},[104,1375,176],{"class":117},[104,1377,1378,1380,1382,1384,1386,1389,1391,1393,1395,1397],{"class":106,"line":147},[104,1379,979],{"class":182},[104,1381,186],{"class":117},[104,1383,189],{"class":182},[104,1385,192],{"class":117},[104,1387,1388],{"class":132},"'data:font\u002Fwoff2;base64,...'",[104,1390,991],{"class":117},[104,1392,994],{"class":182},[104,1394,192],{"class":117},[104,1396,999],{"class":132},[104,1398,198],{"class":117},[104,1400,1401],{"class":106,"line":154},[104,1402,661],{"class":117},[104,1404,1405],{"class":106,"line":160},[104,1406,1407],{"class":110},"\u002F* Use external file with cache *\u002F\n",[10,1409,1411],{"id":1410},"practical-guidelines","Practical Guidelines",[29,1413,1415],{"id":1414},"the-2kb-rule","The 2KB Rule",[15,1417,1418,1419,1422],{},"As a general rule, only embed assets smaller than ",[54,1420,1421],{},"2KB"," as Data URIs. Beyond that size, the benefits of caching and separate HTTP requests outweigh the request reduction.",[29,1424,1426],{"id":1425},"use-build-tools-for-optimization","Use Build Tools for Optimization",[15,1428,1429],{},"Modern build tools can automatically decide what to embed:",[15,1431,1432],{},[54,1433,1434],{},"Webpack (url-loader + limit):",[34,1436,1438],{"className":262,"code":1437,"language":264,"meta":43,"style":43},"\u002F\u002F webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: \u002F\\.(png|jpg|gif)$\u002F,\n        use: [\n          {\n            loader: 'url-loader',\n            options: {\n              limit: 2048, \u002F\u002F 2KB - embed if smaller, else file\n              name: 'images\u002F[name].[hash].[ext]'\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n",[41,1439,1440,1445,1460,1465,1470,1475,1510,1515,1520,1530,1535,1548,1556,1561,1566,1571,1576,1581,1585],{"__ignoreMap":43},[104,1441,1442],{"class":106,"line":107},[104,1443,1444],{"class":110},"\u002F\u002F webpack.config.js\n",[104,1446,1447,1450,1453,1456,1458],{"class":106,"line":114},[104,1448,1449],{"class":182},"module",[104,1451,1452],{"class":117},".",[104,1454,1455],{"class":182},"exports",[104,1457,283],{"class":276},[104,1459,176],{"class":117},[104,1461,1462],{"class":106,"line":147},[104,1463,1464],{"class":117},"  module: {\n",[104,1466,1467],{"class":106,"line":154},[104,1468,1469],{"class":117},"    rules: [\n",[104,1471,1472],{"class":106,"line":160},[104,1473,1474],{"class":117},"      {\n",[104,1476,1477,1480,1483,1487,1491,1494,1497,1499,1502,1505,1508],{"class":106,"line":170},[104,1478,1479],{"class":117},"        test:",[104,1481,1482],{"class":132}," \u002F",[104,1484,1486],{"class":1485},"snhLl","\\.",[104,1488,1490],{"class":1489},"sA_wV","(png",[104,1492,1493],{"class":276},"|",[104,1495,1496],{"class":1489},"jpg",[104,1498,1493],{"class":276},[104,1500,1501],{"class":1489},"gif)",[104,1503,1504],{"class":276},"$",[104,1506,1507],{"class":132},"\u002F",[104,1509,494],{"class":117},[104,1511,1512],{"class":106,"line":179},[104,1513,1514],{"class":117},"        use: [\n",[104,1516,1517],{"class":106,"line":201},[104,1518,1519],{"class":117},"          {\n",[104,1521,1522,1525,1528],{"class":106,"line":207},[104,1523,1524],{"class":117},"            loader: ",[104,1526,1527],{"class":132},"'url-loader'",[104,1529,494],{"class":117},[104,1531,1532],{"class":106,"line":217},[104,1533,1534],{"class":117},"            options: {\n",[104,1536,1537,1540,1543,1545],{"class":106,"line":222},[104,1538,1539],{"class":117},"              limit: ",[104,1541,1542],{"class":182},"2048",[104,1544,71],{"class":117},[104,1546,1547],{"class":110},"\u002F\u002F 2KB - embed if smaller, else file\n",[104,1549,1550,1553],{"class":106,"line":228},[104,1551,1552],{"class":117},"              name: ",[104,1554,1555],{"class":132},"'images\u002F[name].[hash].[ext]'\n",[104,1557,1558],{"class":106,"line":407},[104,1559,1560],{"class":117},"            }\n",[104,1562,1563],{"class":106,"line":413},[104,1564,1565],{"class":117},"          }\n",[104,1567,1568],{"class":106,"line":608},[104,1569,1570],{"class":117},"        ]\n",[104,1572,1573],{"class":106,"line":630},[104,1574,1575],{"class":117},"      }\n",[104,1577,1578],{"class":106,"line":635},[104,1579,1580],{"class":117},"    ]\n",[104,1582,1583],{"class":106,"line":658},[104,1584,204],{"class":117},[104,1586,1587],{"class":106,"line":664},[104,1588,390],{"class":117},[15,1590,1591],{},[54,1592,1593],{},"Vite (built-in asset handling):",[34,1595,1597],{"className":262,"code":1596,"language":264,"meta":43,"style":43},"\u002F\u002F Vite automatically inlines assets below a threshold\n\u002F\u002F config: build.assetsInlineLimit (default: 4096 bytes)\n",[41,1598,1599,1604],{"__ignoreMap":43},[104,1600,1601],{"class":106,"line":107},[104,1602,1603],{"class":110},"\u002F\u002F Vite automatically inlines assets below a threshold\n",[104,1605,1606],{"class":106,"line":114},[104,1607,1608],{"class":110},"\u002F\u002F config: build.assetsInlineLimit (default: 4096 bytes)\n",[29,1610,1612],{"id":1611},"svg-special-considerations","SVG: Special Considerations",[15,1614,1615],{},"For SVG images, you have three options:",[34,1617,1619],{"className":98,"code":1618,"language":100,"meta":43,"style":43},"\u003C!-- Option 1: Inline SVG (best for icons, interactive graphics) -->\n\u003Csvg viewBox=\"0 0 24 24\">\n  \u003Cpath d=\"...\"\u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Option 2: Data URI with Base64 -->\n\u003Cimg src=\"data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0...\">\n\n\u003C!-- Option 3: Data URI with URL-encoded SVG (smaller than Base64) -->\n\u003Cimg src=\"data:image\u002Fsvg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E\">\n",[41,1620,1621,1626,1640,1655,1663,1667,1672,1687,1691,1696],{"__ignoreMap":43},[104,1622,1623],{"class":106,"line":107},[104,1624,1625],{"class":110},"\u003C!-- Option 1: Inline SVG (best for icons, interactive graphics) -->\n",[104,1627,1628,1630,1632,1634,1636,1638],{"class":106,"line":114},[104,1629,118],{"class":117},[104,1631,1240],{"class":121},[104,1633,1243],{"class":125},[104,1635,129],{"class":117},[104,1637,1248],{"class":132},[104,1639,144],{"class":117},[104,1641,1642,1644,1646,1648,1650,1653],{"class":106,"line":147},[104,1643,1255],{"class":117},[104,1645,1258],{"class":121},[104,1647,1261],{"class":125},[104,1649,129],{"class":117},[104,1651,1652],{"class":132},"\"...\"",[104,1654,1269],{"class":117},[104,1656,1657,1659,1661],{"class":106,"line":154},[104,1658,210],{"class":117},[104,1660,1240],{"class":121},[104,1662,144],{"class":117},[104,1664,1665],{"class":106,"line":160},[104,1666,151],{"emptyLinePlaceholder":150},[104,1668,1669],{"class":106,"line":170},[104,1670,1671],{"class":110},"\u003C!-- Option 2: Data URI with Base64 -->\n",[104,1673,1674,1676,1678,1680,1682,1685],{"class":106,"line":179},[104,1675,118],{"class":117},[104,1677,122],{"class":121},[104,1679,126],{"class":125},[104,1681,129],{"class":117},[104,1683,1684],{"class":132},"\"data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0...\"",[104,1686,144],{"class":117},[104,1688,1689],{"class":106,"line":201},[104,1690,151],{"emptyLinePlaceholder":150},[104,1692,1693],{"class":106,"line":207},[104,1694,1695],{"class":110},"\u003C!-- Option 3: Data URI with URL-encoded SVG (smaller than Base64) -->\n",[104,1697,1698,1700,1702,1704,1706,1709],{"class":106,"line":217},[104,1699,118],{"class":117},[104,1701,122],{"class":121},[104,1703,126],{"class":125},[104,1705,129],{"class":117},[104,1707,1708],{"class":132},"\"data:image\u002Fsvg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E\"",[104,1710,144],{"class":117},[15,1712,1713],{},"URL-encoded SVG is often smaller than Base64-encoded SVG for simple graphics.",[10,1715,1717],{"id":1716},"security-considerations","Security Considerations",[29,1719,1721],{"id":1720},"content-security-policy-csp","Content Security Policy (CSP)",[15,1723,1724],{},"Data URIs may be blocked by strict CSP policies:",[34,1726,1730],{"className":1727,"code":1728,"language":1729,"meta":43,"style":43},"language-http shiki shiki-themes github-light github-dark","# This policy blocks Data URIs for images\nContent-Security-Policy: default-src 'self'; img-src 'self'\n\n# To allow Data URIs (less secure):\nContent-Security-Policy: default-src 'self'; img-src 'self' data:\n","http",[41,1731,1732,1737,1742,1746,1751],{"__ignoreMap":43},[104,1733,1734],{"class":106,"line":107},[104,1735,1736],{},"# This policy blocks Data URIs for images\n",[104,1738,1739],{"class":106,"line":114},[104,1740,1741],{},"Content-Security-Policy: default-src 'self'; img-src 'self'\n",[104,1743,1744],{"class":106,"line":147},[104,1745,151],{"emptyLinePlaceholder":150},[104,1747,1748],{"class":106,"line":154},[104,1749,1750],{},"# To allow Data URIs (less secure):\n",[104,1752,1753],{"class":106,"line":160},[104,1754,1755],{},"Content-Security-Policy: default-src 'self'; img-src 'self' data:\n",[29,1757,1759],{"id":1758},"xss-risks","XSS Risks",[15,1761,1762],{},"Never allow user-supplied data to be embedded as Data URIs without proper validation:",[34,1764,1766],{"className":262,"code":1765,"language":264,"meta":43,"style":43},"\u002F\u002F DANGEROUS: User-supplied Data URI\nconst userInput = req.body.avatar; \u002F\u002F \"data:text\u002Fhtml,\u003Cscript>alert('xss')\u003C\u002Fscript>\"\ndocument.getElementById('avatar').src = userInput; \u002F\u002F XSS!\n\n\u002F\u002F SAFE: Validate the Data URI\nfunction isValidImageDataUri(uri) {\n  return \u002F^data:image\\\u002F(png|jpeg|gif|webp|svg\\+xml);base64,\u002F.test(uri);\n}\n",[41,1767,1768,1773,1788,1812,1816,1821,1835,1887],{"__ignoreMap":43},[104,1769,1770],{"class":106,"line":107},[104,1771,1772],{"class":110},"\u002F\u002F DANGEROUS: User-supplied Data URI\n",[104,1774,1775,1777,1780,1782,1785],{"class":106,"line":114},[104,1776,277],{"class":276},[104,1778,1779],{"class":182}," userInput",[104,1781,283],{"class":276},[104,1783,1784],{"class":117}," req.body.avatar; ",[104,1786,1787],{"class":110},"\u002F\u002F \"data:text\u002Fhtml,\u003Cscript>alert('xss')\u003C\u002Fscript>\"\n",[104,1789,1790,1793,1796,1798,1801,1804,1806,1809],{"class":106,"line":147},[104,1791,1792],{"class":117},"document.",[104,1794,1795],{"class":125},"getElementById",[104,1797,192],{"class":117},[104,1799,1800],{"class":132},"'avatar'",[104,1802,1803],{"class":117},").src ",[104,1805,129],{"class":276},[104,1807,1808],{"class":117}," userInput; ",[104,1810,1811],{"class":110},"\u002F\u002F XSS!\n",[104,1813,1814],{"class":106,"line":154},[104,1815,151],{"emptyLinePlaceholder":150},[104,1817,1818],{"class":106,"line":160},[104,1819,1820],{"class":110},"\u002F\u002F SAFE: Validate the Data URI\n",[104,1822,1823,1825,1828,1830,1833],{"class":106,"line":170},[104,1824,458],{"class":276},[104,1826,1827],{"class":125}," isValidImageDataUri",[104,1829,192],{"class":117},[104,1831,1832],{"class":466},"uri",[104,1834,470],{"class":117},[104,1836,1837,1839,1841,1844,1847,1850,1852,1854,1857,1859,1862,1864,1867,1869,1871,1874,1877,1879,1881,1884],{"class":106,"line":179},[104,1838,638],{"class":276},[104,1840,1482],{"class":132},[104,1842,1843],{"class":276},"^",[104,1845,1846],{"class":1489},"data:image",[104,1848,1849],{"class":1485},"\\\u002F",[104,1851,1490],{"class":1489},[104,1853,1493],{"class":276},[104,1855,1856],{"class":1489},"jpeg",[104,1858,1493],{"class":276},[104,1860,1861],{"class":1489},"gif",[104,1863,1493],{"class":276},[104,1865,1866],{"class":1489},"webp",[104,1868,1493],{"class":276},[104,1870,1240],{"class":1489},[104,1872,1873],{"class":1485},"\\+",[104,1875,1876],{"class":1489},"xml);base64,",[104,1878,1507],{"class":132},[104,1880,1452],{"class":117},[104,1882,1883],{"class":125},"test",[104,1885,1886],{"class":117},"(uri);\n",[104,1888,1889],{"class":106,"line":201},[104,1890,661],{"class":117},[10,1892,1894],{"id":1893},"summary","Summary",[15,1896,1897],{},"Data URIs with Base64 encoding are a useful tool in specific scenarios, but they are not a silver bullet for performance optimization.",[15,1899,1900],{},[54,1901,1902],{},"Use Data URIs when:",[48,1904,1905,1908,1911,1914],{},[51,1906,1907],{},"Assets are very small (\u003C 2KB)",[51,1909,1910],{},"Assets are used only once",[51,1912,1913],{},"Building email templates",[51,1915,1916],{},"HTTP requests are extremely expensive (rare in HTTP\u002F2)",[15,1918,1919],{},[54,1920,1921],{},"Avoid Data URIs when:",[48,1923,1924,1927,1930,1933],{},[51,1925,1926],{},"Assets are large",[51,1928,1929],{},"Assets are reused across pages",[51,1931,1932],{},"You need browser caching",[51,1934,1935],{},"The asset changes frequently",[10,1937,1939],{"id":1938},"related-tools","Related Tools",[48,1941,1942],{},[51,1943,1944,1945],{},"Encode and decode Base64 with our ",[233,1946,1948],{"href":1947},"\u002Ftools\u002Fbase64","Base64 Encoder\u002FDecoder",[165,1950,1951],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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":43,"searchDepth":114,"depth":114,"links":1953},[1954,1955,1959,1963,1969,1976,1979,1983,1988,1992,1993],{"id":12,"depth":114,"text":13},{"id":23,"depth":114,"text":24,"children":1956},[1957,1958],{"id":31,"depth":147,"text":32},{"id":94,"depth":147,"text":95},{"id":251,"depth":114,"text":252,"children":1960},[1961,1962],{"id":258,"depth":147,"text":259},{"id":419,"depth":147,"text":420},{"id":789,"depth":114,"text":790,"children":1964},[1965,1966,1967,1968],{"id":793,"depth":147,"text":794},{"id":806,"depth":147,"text":807},{"id":813,"depth":147,"text":814},{"id":852,"depth":147,"text":853},{"id":859,"depth":114,"text":860,"children":1970},[1971,1972,1973,1974,1975],{"id":863,"depth":147,"text":864},{"id":883,"depth":147,"text":884},{"id":896,"depth":147,"text":897},{"id":939,"depth":147,"text":940},{"id":1013,"depth":147,"text":1014},{"id":1020,"depth":114,"text":1021,"children":1977},[1978],{"id":1120,"depth":147,"text":1121},{"id":1133,"depth":114,"text":1134,"children":1980},[1981,1982],{"id":1137,"depth":147,"text":1138},{"id":1291,"depth":147,"text":1292},{"id":1410,"depth":114,"text":1411,"children":1984},[1985,1986,1987],{"id":1414,"depth":147,"text":1415},{"id":1425,"depth":147,"text":1426},{"id":1611,"depth":147,"text":1612},{"id":1716,"depth":114,"text":1717,"children":1989},[1990,1991],{"id":1720,"depth":147,"text":1721},{"id":1758,"depth":147,"text":1759},{"id":1893,"depth":114,"text":1894},{"id":1938,"depth":114,"text":1939},"2026-05-26","Learn Data URI format syntax, how Base64 encoding enables embedded images in HTML and CSS, performance implications, and when to use inline assets.","md",{"immutable":150},"\u002Fguides\u002Fdata-uri-base64",{"title":5,"description":1995},"guides\u002Fdata-uri-base64","eN2r_3EqDstNFbl4FOmfUrKS3O3AszZwbrlRiV2WQCk",1780401323735]