[{"data":1,"prerenderedAt":1379},["ShallowReactive",2],{"guide-base64-image-optimization":3},{"id":4,"title":5,"body":6,"date":1371,"description":1372,"extension":1373,"meta":1374,"navigation":136,"path":1375,"readingTime":599,"seo":1376,"stem":1377,"__hash__":1378},"guides\u002Fguides\u002Fbase64-image-optimization.md","Base64 Image Optimization: Size, Caching, and Lazy Loading",{"type":7,"value":8,"toc":1345},"minimark",[9,14,27,30,34,37,65,70,161,165,258,262,265,269,347,351,388,392,432,436,508,511,515,518,522,815,821,825,887,950,954,957,961,1009,1013,1135,1139,1204,1215,1219,1222,1272,1275,1279,1304,1308,1317,1321,1341],[10,11,13],"h2",{"id":12},"why-optimize-before-you-encode","Why Optimize Before You Encode?",[15,16,17,18,22,23,26],"p",{},"Base64 encoding adds 33% overhead on top of whatever you feed it. Every unnecessary byte in the original image becomes 1.33 bytes in the Data URI. Optimize the image ",[19,20,21],"strong",{},"first",", encode ",[19,24,25],{},"second"," — the savings compound.",[15,28,29],{},"A 20 KB PNG that compresses to 8 KB becomes 10.7 KB as Base64 instead of 26.7 KB. That is a 60% reduction from a simple optimization step.",[10,31,33],{"id":32},"step-1-compress-before-encoding","Step 1: Compress Before Encoding",[15,35,36],{},"Compression is the single biggest lever. Follow this order:",[38,39,40,47,53,59],"ol",{},[41,42,43,46],"li",{},[19,44,45],{},"Choose the right format"," — WebP for photos, PNG for sharp edges and transparency, SVG for icons and illustrations",[41,48,49,52],{},[19,50,51],{},"Strip metadata"," — EXIF data, color profiles, and thumbnails add hidden bytes",[41,54,55,58],{},[19,56,57],{},"Run a lossy optimizer"," — tools like Squoosh, ImageOptim, or Sharp reduce file size with minimal visual loss",[41,60,61,64],{},[19,62,63],{},"Resize to display size"," — never encode a 2000 px image that renders at 200 px",[66,67,69],"h3",{"id":68},"tool-examples","Tool Examples",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-bash shiki shiki-themes github-light github-dark","# Sharp (Node.js) — resize, convert, and compress\nnpx sharp-cli -i logo.png -o logo-optimized.webp --resize 128 --format webp --quality 80\n\n# Squoosh CLI — lossy compression with visual comparison\nnpx @nicolo-ribaudo\u002Fsquoosh-cli --webp '{\"quality\":80}' logo.png\n","bash","",[78,79,80,89,131,138,144],"code",{"__ignoreMap":76},[81,82,85],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"sJ8bj","# Sharp (Node.js) — resize, convert, and compress\n",[81,90,92,96,100,104,107,110,113,116,119,122,125,128],{"class":83,"line":91},2,[81,93,95],{"class":94},"sScJk","npx",[81,97,99],{"class":98},"sZZnC"," sharp-cli",[81,101,103],{"class":102},"sj4cs"," -i",[81,105,106],{"class":98}," logo.png",[81,108,109],{"class":102}," -o",[81,111,112],{"class":98}," logo-optimized.webp",[81,114,115],{"class":102}," --resize",[81,117,118],{"class":102}," 128",[81,120,121],{"class":102}," --format",[81,123,124],{"class":98}," webp",[81,126,127],{"class":102}," --quality",[81,129,130],{"class":102}," 80\n",[81,132,134],{"class":83,"line":133},3,[81,135,137],{"emptyLinePlaceholder":136},true,"\n",[81,139,141],{"class":83,"line":140},4,[81,142,143],{"class":87},"# Squoosh CLI — lossy compression with visual comparison\n",[81,145,147,149,152,155,158],{"class":83,"line":146},5,[81,148,95],{"class":94},[81,150,151],{"class":98}," @nicolo-ribaudo\u002Fsquoosh-cli",[81,153,154],{"class":102}," --webp",[81,156,157],{"class":98}," '{\"quality\":80}'",[81,159,160],{"class":98}," logo.png\n",[66,162,164],{"id":163},"compression-impact-on-base64","Compression Impact on Base64",[166,167,168,190],"table",{},[169,170,171],"thead",{},[172,173,174,178,181,184,187],"tr",{},[175,176,177],"th",{},"Optimization",[175,179,180],{},"Original",[175,182,183],{},"After Compress",[175,185,186],{},"After Base64",[175,188,189],{},"Savings",[191,192,193,210,226,242],"tbody",{},[172,194,195,199,202,205,208],{},[196,197,198],"td",{},"Raw PNG icon",[196,200,201],{},"12 KB",[196,203,204],{},"—",[196,206,207],{},"16 KB",[196,209,204],{},[172,211,212,215,217,220,223],{},[196,213,214],{},"Optimized PNG",[196,216,201],{},[196,218,219],{},"4 KB",[196,221,222],{},"5.3 KB",[196,224,225],{},"67%",[172,227,228,231,233,236,239],{},[196,229,230],{},"Converted to WebP",[196,232,201],{},[196,234,235],{},"2.5 KB",[196,237,238],{},"3.3 KB",[196,240,241],{},"79%",[172,243,244,247,249,252,255],{},[196,245,246],{},"Resized + WebP",[196,248,201],{},[196,250,251],{},"1.2 KB",[196,253,254],{},"1.6 KB",[196,256,257],{},"90%",[10,259,261],{"id":260},"step-2-svg-vs-raster-which-encodes-better","Step 2: SVG vs Raster — Which Encodes Better?",[15,263,264],{},"SVGs are already text, so the question is whether Base64 is the right approach at all.",[66,266,268],{"id":267},"svg-inline-markup-best-for-icons","SVG Inline Markup (Best for Icons)",[71,270,274],{"className":271,"code":272,"language":273,"meta":76,"style":76},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Smallest option: inline SVG — no encoding overhead -->\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n  \u003Cpath d=\"M12 2v20M2 12h20\"\u002F>\n\u003C\u002Fsvg>\n","html",[78,275,276,281,319,338],{"__ignoreMap":76},[81,277,278],{"class":83,"line":84},[81,279,280],{"class":87},"\u003C!-- Smallest option: inline SVG — no encoding overhead -->\n",[81,282,283,287,291,294,297,300,303,305,308,311,313,316],{"class":83,"line":91},[81,284,286],{"class":285},"sVt8B","\u003C",[81,288,290],{"class":289},"s9eBZ","svg",[81,292,293],{"class":94}," viewBox",[81,295,296],{"class":285},"=",[81,298,299],{"class":98},"\"0 0 24 24\"",[81,301,302],{"class":94}," fill",[81,304,296],{"class":285},[81,306,307],{"class":98},"\"none\"",[81,309,310],{"class":94}," stroke",[81,312,296],{"class":285},[81,314,315],{"class":98},"\"currentColor\"",[81,317,318],{"class":285},">\n",[81,320,321,324,327,330,332,335],{"class":83,"line":133},[81,322,323],{"class":285},"  \u003C",[81,325,326],{"class":289},"path",[81,328,329],{"class":94}," d",[81,331,296],{"class":285},[81,333,334],{"class":98},"\"M12 2v20M2 12h20\"",[81,336,337],{"class":285},"\u002F>\n",[81,339,340,343,345],{"class":83,"line":140},[81,341,342],{"class":285},"\u003C\u002F",[81,344,290],{"class":289},[81,346,318],{"class":285},[66,348,350],{"id":349},"svg-as-url-encoded-data-uri-better-than-base64-for-simple-svgs","SVG as URL-Encoded Data URI (Better than Base64 for Simple SVGs)",[71,352,354],{"className":271,"code":353,"language":273,"meta":76,"style":76},"\u003C!-- URL-encoded SVG — smaller than Base64 for simple paths -->\n\u003Cimg src=\"data:image\u002Fsvg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg'%3E%3Cpath d='M12 2v20'\u002F%3E%3C\u002Fsvg%3E\"\n     alt=\"Line icon\">\n",[78,355,356,361,376],{"__ignoreMap":76},[81,357,358],{"class":83,"line":84},[81,359,360],{"class":87},"\u003C!-- URL-encoded SVG — smaller than Base64 for simple paths -->\n",[81,362,363,365,368,371,373],{"class":83,"line":91},[81,364,286],{"class":285},[81,366,367],{"class":289},"img",[81,369,370],{"class":94}," src",[81,372,296],{"class":285},[81,374,375],{"class":98},"\"data:image\u002Fsvg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg'%3E%3Cpath d='M12 2v20'\u002F%3E%3C\u002Fsvg%3E\"\n",[81,377,378,381,383,386],{"class":83,"line":133},[81,379,380],{"class":94},"     alt",[81,382,296],{"class":285},[81,384,385],{"class":98},"\"Line icon\"",[81,387,318],{"class":285},[66,389,391],{"id":390},"svg-as-base64-data-uri-necessary-for-css-backgrounds","SVG as Base64 Data URI (Necessary for CSS Backgrounds)",[71,393,397],{"className":394,"code":395,"language":396,"meta":76,"style":76},"language-css shiki shiki-themes github-light github-dark",".icon {\n  background-image: url('data:image\u002Fsvg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiPjwvc3ZnPg==');\n}\n","css",[78,398,399,407,427],{"__ignoreMap":76},[81,400,401,404],{"class":83,"line":84},[81,402,403],{"class":94},".icon",[81,405,406],{"class":285}," {\n",[81,408,409,412,415,418,421,424],{"class":83,"line":91},[81,410,411],{"class":102},"  background-image",[81,413,414],{"class":285},": ",[81,416,417],{"class":102},"url",[81,419,420],{"class":285},"(",[81,422,423],{"class":98},"'data:image\u002Fsvg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiPjwvc3ZnPg=='",[81,425,426],{"class":285},");\n",[81,428,429],{"class":83,"line":133},[81,430,431],{"class":285},"}\n",[66,433,435],{"id":434},"when-each-approach-wins","When Each Approach Wins",[166,437,438,454],{},[169,439,440],{},[172,441,442,445,448,451],{},[175,443,444],{},"Method",[175,446,447],{},"Best For",[175,449,450],{},"Size Efficiency",[175,452,453],{},"CSS Compatibility",[191,455,456,477,494],{},[172,457,458,464,467,470],{},[196,459,460,461],{},"Inline ",[78,462,463],{},"\u003Csvg>",[196,465,466],{},"Icons, interactive graphics",[196,468,469],{},"Best — raw markup",[196,471,472,473,476],{},"No (use ",[78,474,475],{},"background",")",[172,478,479,482,488,491],{},[196,480,481],{},"URL-encoded Data URI",[196,483,484,485],{},"Simple SVGs in ",[78,486,487],{},"\u003Cimg>",[196,489,490],{},"Good — no 33% overhead",[196,492,493],{},"No",[172,495,496,499,502,505],{},[196,497,498],{},"Base64 Data URI",[196,500,501],{},"CSS backgrounds, complex SVGs",[196,503,504],{},"+33% overhead",[196,506,507],{},"Yes",[15,509,510],{},"For raster images (PNG, JPEG, WebP), Base64 is your only Data URI option since you cannot represent binary data as URL-encoded text.",[10,512,514],{"id":513},"step-3-lazy-loading-inline-images","Step 3: Lazy Loading Inline Images",[15,516,517],{},"Data URIs embedded in HTML load immediately — the browser has no way to defer them. But you can implement lazy loading with a small amount of JavaScript.",[66,519,521],{"id":520},"intersection-observer-approach","Intersection Observer Approach",[71,523,525],{"className":271,"code":524,"language":273,"meta":76,"style":76},"\u003C!-- Placeholder element -->\n\u003Cdiv class=\"lazy-image\" data-src=\"data:image\u002Fwebp;base64,UklGRj...\"\n     data-alt=\"Product photo\" style=\"min-height:200px\">\n\u003C\u002Fdiv>\n\n\u003Cscript>\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      const div = entry.target;\n      const img = document.createElement('img');\n      img.src = div.dataset.src;\n      img.alt = div.dataset.alt;\n      div.replaceWith(img);\n      observer.unobserve(div);\n    }\n  });\n}, { rootMargin: '200px' });\n\ndocument.querySelectorAll('.lazy-image').forEach(el => observer.observe(el));\n\u003C\u002Fscript>\n",[78,526,527,532,555,575,583,587,597,631,650,659,673,696,707,718,730,742,748,754,766,771,806],{"__ignoreMap":76},[81,528,529],{"class":83,"line":84},[81,530,531],{"class":87},"\u003C!-- Placeholder element -->\n",[81,533,534,536,539,542,544,547,550,552],{"class":83,"line":91},[81,535,286],{"class":285},[81,537,538],{"class":289},"div",[81,540,541],{"class":94}," class",[81,543,296],{"class":285},[81,545,546],{"class":98},"\"lazy-image\"",[81,548,549],{"class":94}," data-src",[81,551,296],{"class":285},[81,553,554],{"class":98},"\"data:image\u002Fwebp;base64,UklGRj...\"\n",[81,556,557,560,562,565,568,570,573],{"class":83,"line":133},[81,558,559],{"class":94},"     data-alt",[81,561,296],{"class":285},[81,563,564],{"class":98},"\"Product photo\"",[81,566,567],{"class":94}," style",[81,569,296],{"class":285},[81,571,572],{"class":98},"\"min-height:200px\"",[81,574,318],{"class":285},[81,576,577,579,581],{"class":83,"line":140},[81,578,342],{"class":285},[81,580,538],{"class":289},[81,582,318],{"class":285},[81,584,585],{"class":83,"line":146},[81,586,137],{"emptyLinePlaceholder":136},[81,588,590,592,595],{"class":83,"line":589},6,[81,591,286],{"class":285},[81,593,594],{"class":289},"script",[81,596,318],{"class":285},[81,598,600,604,607,610,613,616,619,623,626,629],{"class":83,"line":599},7,[81,601,603],{"class":602},"szBVR","const",[81,605,606],{"class":102}," observer",[81,608,609],{"class":602}," =",[81,611,612],{"class":602}," new",[81,614,615],{"class":94}," IntersectionObserver",[81,617,618],{"class":285},"((",[81,620,622],{"class":621},"s4XuR","entries",[81,624,625],{"class":285},") ",[81,627,628],{"class":602},"=>",[81,630,406],{"class":285},[81,632,634,637,640,642,645,648],{"class":83,"line":633},8,[81,635,636],{"class":285},"  entries.",[81,638,639],{"class":94},"forEach",[81,641,420],{"class":285},[81,643,644],{"class":621},"entry",[81,646,647],{"class":602}," =>",[81,649,406],{"class":285},[81,651,653,656],{"class":83,"line":652},9,[81,654,655],{"class":602},"    if",[81,657,658],{"class":285}," (entry.isIntersecting) {\n",[81,660,662,665,668,670],{"class":83,"line":661},10,[81,663,664],{"class":602},"      const",[81,666,667],{"class":102}," div",[81,669,609],{"class":602},[81,671,672],{"class":285}," entry.target;\n",[81,674,676,678,681,683,686,689,691,694],{"class":83,"line":675},11,[81,677,664],{"class":602},[81,679,680],{"class":102}," img",[81,682,609],{"class":602},[81,684,685],{"class":285}," document.",[81,687,688],{"class":94},"createElement",[81,690,420],{"class":285},[81,692,693],{"class":98},"'img'",[81,695,426],{"class":285},[81,697,699,702,704],{"class":83,"line":698},12,[81,700,701],{"class":285},"      img.src ",[81,703,296],{"class":602},[81,705,706],{"class":285}," div.dataset.src;\n",[81,708,710,713,715],{"class":83,"line":709},13,[81,711,712],{"class":285},"      img.alt ",[81,714,296],{"class":602},[81,716,717],{"class":285}," div.dataset.alt;\n",[81,719,721,724,727],{"class":83,"line":720},14,[81,722,723],{"class":285},"      div.",[81,725,726],{"class":94},"replaceWith",[81,728,729],{"class":285},"(img);\n",[81,731,733,736,739],{"class":83,"line":732},15,[81,734,735],{"class":285},"      observer.",[81,737,738],{"class":94},"unobserve",[81,740,741],{"class":285},"(div);\n",[81,743,745],{"class":83,"line":744},16,[81,746,747],{"class":285},"    }\n",[81,749,751],{"class":83,"line":750},17,[81,752,753],{"class":285},"  });\n",[81,755,757,760,763],{"class":83,"line":756},18,[81,758,759],{"class":285},"}, { rootMargin: ",[81,761,762],{"class":98},"'200px'",[81,764,765],{"class":285}," });\n",[81,767,769],{"class":83,"line":768},19,[81,770,137],{"emptyLinePlaceholder":136},[81,772,774,777,780,782,785,788,790,792,795,797,800,803],{"class":83,"line":773},20,[81,775,776],{"class":285},"document.",[81,778,779],{"class":94},"querySelectorAll",[81,781,420],{"class":285},[81,783,784],{"class":98},"'.lazy-image'",[81,786,787],{"class":285},").",[81,789,639],{"class":94},[81,791,420],{"class":285},[81,793,794],{"class":621},"el",[81,796,647],{"class":602},[81,798,799],{"class":285}," observer.",[81,801,802],{"class":94},"observe",[81,804,805],{"class":285},"(el));\n",[81,807,809,811,813],{"class":83,"line":808},21,[81,810,342],{"class":285},[81,812,594],{"class":289},[81,814,318],{"class":285},[15,816,817,818,820],{},"This pattern renders a lightweight placeholder, then swaps in the ",[78,819,487],{}," tag — and its Base64 payload — only when the element approaches the viewport.",[66,822,824],{"id":823},"css-background-lazy-loading","CSS Background Lazy Loading",[71,826,828],{"className":394,"code":827,"language":396,"meta":76,"style":76},".hero-bg {\n  background-color: #e5e7eb; \u002F* solid placeholder color *\u002F\n}\n\n.hero-bg.loaded {\n  background-image: url('data:image\u002Fwebp;base64,UklGRj...');\n}\n",[78,829,830,837,853,857,861,868,883],{"__ignoreMap":76},[81,831,832,835],{"class":83,"line":84},[81,833,834],{"class":94},".hero-bg",[81,836,406],{"class":285},[81,838,839,842,844,847,850],{"class":83,"line":91},[81,840,841],{"class":102},"  background-color",[81,843,414],{"class":285},[81,845,846],{"class":102},"#e5e7eb",[81,848,849],{"class":285},"; ",[81,851,852],{"class":87},"\u002F* solid placeholder color *\u002F\n",[81,854,855],{"class":83,"line":133},[81,856,431],{"class":285},[81,858,859],{"class":83,"line":140},[81,860,137],{"emptyLinePlaceholder":136},[81,862,863,866],{"class":83,"line":146},[81,864,865],{"class":94},".hero-bg.loaded",[81,867,406],{"class":285},[81,869,870,872,874,876,878,881],{"class":83,"line":589},[81,871,411],{"class":102},[81,873,414],{"class":285},[81,875,417],{"class":102},[81,877,420],{"class":285},[81,879,880],{"class":98},"'data:image\u002Fwebp;base64,UklGRj...'",[81,882,426],{"class":285},[81,884,885],{"class":83,"line":599},[81,886,431],{"class":285},[71,888,892],{"className":889,"code":890,"language":891,"meta":76,"style":76},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Trigger on visibility or after critical resources load\nwindow.addEventListener('load', () => {\n  document.querySelector('.hero-bg').classList.add('loaded');\n});\n","javascript",[78,893,894,899,919,945],{"__ignoreMap":76},[81,895,896],{"class":83,"line":84},[81,897,898],{"class":87},"\u002F\u002F Trigger on visibility or after critical resources load\n",[81,900,901,904,907,909,912,915,917],{"class":83,"line":91},[81,902,903],{"class":285},"window.",[81,905,906],{"class":94},"addEventListener",[81,908,420],{"class":285},[81,910,911],{"class":98},"'load'",[81,913,914],{"class":285},", () ",[81,916,628],{"class":602},[81,918,406],{"class":285},[81,920,921,924,927,929,932,935,938,940,943],{"class":83,"line":133},[81,922,923],{"class":285},"  document.",[81,925,926],{"class":94},"querySelector",[81,928,420],{"class":285},[81,930,931],{"class":98},"'.hero-bg'",[81,933,934],{"class":285},").classList.",[81,936,937],{"class":94},"add",[81,939,420],{"class":285},[81,941,942],{"class":98},"'loaded'",[81,944,426],{"class":285},[81,946,947],{"class":83,"line":140},[81,948,949],{"class":285},"});\n",[10,951,953],{"id":952},"step-4-automate-inlining-with-build-tools","Step 4: Automate Inlining with Build Tools",[15,955,956],{},"Manual Base64 encoding is error-prone. Build tools can inline assets below a size threshold automatically.",[66,958,960],{"id":959},"vite-default-4-kb","Vite (Default: 4 KB)",[71,962,964],{"className":889,"code":963,"language":891,"meta":76,"style":76},"\u002F\u002F vite.config.js\nexport default {\n  build: {\n    assetsInlineLimit: 2048, \u002F\u002F inline assets under 2 KB\n  },\n}\n",[78,965,966,971,981,986,1000,1005],{"__ignoreMap":76},[81,967,968],{"class":83,"line":84},[81,969,970],{"class":87},"\u002F\u002F vite.config.js\n",[81,972,973,976,979],{"class":83,"line":91},[81,974,975],{"class":602},"export",[81,977,978],{"class":602}," default",[81,980,406],{"class":285},[81,982,983],{"class":83,"line":133},[81,984,985],{"class":285},"  build: {\n",[81,987,988,991,994,997],{"class":83,"line":140},[81,989,990],{"class":285},"    assetsInlineLimit: ",[81,992,993],{"class":102},"2048",[81,995,996],{"class":285},", ",[81,998,999],{"class":87},"\u002F\u002F inline assets under 2 KB\n",[81,1001,1002],{"class":83,"line":146},[81,1003,1004],{"class":285},"  },\n",[81,1006,1007],{"class":83,"line":589},[81,1008,431],{"class":285},[66,1010,1012],{"id":1011},"webpack-url-loader","Webpack (url-loader)",[71,1014,1016],{"className":889,"code":1015,"language":891,"meta":76,"style":76},"\u002F\u002F webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [{\n      test: \u002F\\.(png|jpg|gif|svg)$\u002F,\n      type: 'asset',\n      parser: {\n        dataUrlCondition: { maxSize: 2048 }, \u002F\u002F 2 KB\n      },\n    }],\n  },\n}\n",[78,1017,1018,1023,1038,1043,1048,1089,1099,1104,1117,1122,1127,1131],{"__ignoreMap":76},[81,1019,1020],{"class":83,"line":84},[81,1021,1022],{"class":87},"\u002F\u002F webpack.config.js\n",[81,1024,1025,1028,1031,1034,1036],{"class":83,"line":91},[81,1026,1027],{"class":102},"module",[81,1029,1030],{"class":285},".",[81,1032,1033],{"class":102},"exports",[81,1035,609],{"class":602},[81,1037,406],{"class":285},[81,1039,1040],{"class":83,"line":133},[81,1041,1042],{"class":285},"  module: {\n",[81,1044,1045],{"class":83,"line":140},[81,1046,1047],{"class":285},"    rules: [{\n",[81,1049,1050,1053,1056,1060,1064,1067,1070,1072,1075,1077,1080,1083,1086],{"class":83,"line":146},[81,1051,1052],{"class":285},"      test:",[81,1054,1055],{"class":98}," \u002F",[81,1057,1059],{"class":1058},"snhLl","\\.",[81,1061,1063],{"class":1062},"sA_wV","(png",[81,1065,1066],{"class":602},"|",[81,1068,1069],{"class":1062},"jpg",[81,1071,1066],{"class":602},[81,1073,1074],{"class":1062},"gif",[81,1076,1066],{"class":602},[81,1078,1079],{"class":1062},"svg)",[81,1081,1082],{"class":602},"$",[81,1084,1085],{"class":98},"\u002F",[81,1087,1088],{"class":285},",\n",[81,1090,1091,1094,1097],{"class":83,"line":589},[81,1092,1093],{"class":285},"      type: ",[81,1095,1096],{"class":98},"'asset'",[81,1098,1088],{"class":285},[81,1100,1101],{"class":83,"line":599},[81,1102,1103],{"class":285},"      parser: {\n",[81,1105,1106,1109,1111,1114],{"class":83,"line":633},[81,1107,1108],{"class":285},"        dataUrlCondition: { maxSize: ",[81,1110,993],{"class":102},[81,1112,1113],{"class":285}," }, ",[81,1115,1116],{"class":87},"\u002F\u002F 2 KB\n",[81,1118,1119],{"class":83,"line":652},[81,1120,1121],{"class":285},"      },\n",[81,1123,1124],{"class":83,"line":661},[81,1125,1126],{"class":285},"    }],\n",[81,1128,1129],{"class":83,"line":675},[81,1130,1004],{"class":285},[81,1132,1133],{"class":83,"line":698},[81,1134,431],{"class":285},[66,1136,1138],{"id":1137},"postcss-postcss-inline-svg","PostCSS (postcss-inline-svg)",[71,1140,1142],{"className":889,"code":1141,"language":891,"meta":76,"style":76},"\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('postcss-inline-svg')({\n      paths: ['.\u002Fsrc\u002Fassets\u002Ficons'],\n    }),\n  ],\n}\n",[78,1143,1144,1149,1161,1166,1179,1190,1195,1200],{"__ignoreMap":76},[81,1145,1146],{"class":83,"line":84},[81,1147,1148],{"class":87},"\u002F\u002F postcss.config.js\n",[81,1150,1151,1153,1155,1157,1159],{"class":83,"line":91},[81,1152,1027],{"class":102},[81,1154,1030],{"class":285},[81,1156,1033],{"class":102},[81,1158,609],{"class":602},[81,1160,406],{"class":285},[81,1162,1163],{"class":83,"line":133},[81,1164,1165],{"class":285},"  plugins: [\n",[81,1167,1168,1171,1173,1176],{"class":83,"line":140},[81,1169,1170],{"class":94},"    require",[81,1172,420],{"class":285},[81,1174,1175],{"class":98},"'postcss-inline-svg'",[81,1177,1178],{"class":285},")({\n",[81,1180,1181,1184,1187],{"class":83,"line":146},[81,1182,1183],{"class":285},"      paths: [",[81,1185,1186],{"class":98},"'.\u002Fsrc\u002Fassets\u002Ficons'",[81,1188,1189],{"class":285},"],\n",[81,1191,1192],{"class":83,"line":589},[81,1193,1194],{"class":285},"    }),\n",[81,1196,1197],{"class":83,"line":599},[81,1198,1199],{"class":285},"  ],\n",[81,1201,1202],{"class":83,"line":633},[81,1203,431],{"class":285},[15,1205,1206,1207,1210,1211,1214],{},"These tools handle encoding, MIME type detection, and size thresholds automatically. You write normal ",[78,1208,1209],{},"import"," or ",[78,1212,1213],{},"url()"," statements — the bundler decides what to inline based on your configuration.",[10,1216,1218],{"id":1217},"sizing-limits-how-much-is-too-much","Sizing Limits: How Much Is Too Much?",[15,1220,1221],{},"Track total Base64 payload per page. A practical budget:",[166,1223,1224,1237],{},[169,1225,1226],{},[172,1227,1228,1231,1234],{},[175,1229,1230],{},"Page Type",[175,1232,1233],{},"Max Inline Payload",[175,1235,1236],{},"Rationale",[191,1238,1239,1250,1261],{},[172,1240,1241,1244,1247],{},[196,1242,1243],{},"Landing page",[196,1245,1246],{},"\u003C 10 KB",[196,1248,1249],{},"Critical render path must stay fast",[172,1251,1252,1255,1258],{},[196,1253,1254],{},"Content page",[196,1256,1257],{},"\u003C 20 KB",[196,1259,1260],{},"Text-heavy, images are secondary",[172,1262,1263,1266,1269],{},[196,1264,1265],{},"App dashboard",[196,1267,1268],{},"\u003C 30 KB",[196,1270,1271],{},"More assets acceptable, but monitor FCP",[15,1273,1274],{},"Use Lighthouse or WebPageTest to measure the impact. If Base64 payload exceeds your budget, move assets to external files.",[10,1276,1278],{"id":1277},"key-takeaways","Key Takeaways",[1280,1281,1282,1289,1292,1295,1298,1301],"ul",{},[41,1283,1284,1285,1288],{},"Always compress and resize images ",[19,1286,1287],{},"before"," Base64 encoding — savings compound",[41,1290,1291],{},"SVGs should use inline markup or URL-encoded Data URIs instead of Base64 when possible",[41,1293,1294],{},"Implement lazy loading for Base64 images using Intersection Observer or CSS class toggling",[41,1296,1297],{},"Set build-tool thresholds to automate inlining decisions (2–4 KB is typical)",[41,1299,1300],{},"Monitor total inline payload per page and enforce a size budget",[41,1302,1303],{},"Test rendering performance across devices — mobile CPUs pay a higher decode cost",[10,1305,1307],{"id":1306},"try-it-yourself","Try It Yourself",[15,1309,1310,1311,1316],{},"Encode optimized images to Base64 with our ",[1312,1313,1315],"a",{"href":1314},"\u002Ftools\u002Fbase64","Base64 Encoder\u002FDecoder",". Compress your image first, then convert it — and compare the Data URI size to understand the real cost of inlining.",[10,1318,1320],{"id":1319},"related-guides","Related Guides",[1280,1322,1323,1329,1335],{},[41,1324,1325],{},[1312,1326,1328],{"href":1327},"\u002Fguides\u002Fimage-to-base64-guide","Image to Base64: When to Embed Images in HTML and CSS",[41,1330,1331],{},[1312,1332,1334],{"href":1333},"\u002Fguides\u002Fdata-uri-performance","Data URI Performance: Trade-offs of Inlining Resources",[41,1336,1337],{},[1312,1338,1340],{"href":1339},"\u002Fguides\u002Furl-encoding-guide","URL Encoding Guide",[1342,1343,1344],"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 .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 .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 .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":76,"searchDepth":91,"depth":91,"links":1346},[1347,1348,1352,1358,1362,1367,1368,1369,1370],{"id":12,"depth":91,"text":13},{"id":32,"depth":91,"text":33,"children":1349},[1350,1351],{"id":68,"depth":133,"text":69},{"id":163,"depth":133,"text":164},{"id":260,"depth":91,"text":261,"children":1353},[1354,1355,1356,1357],{"id":267,"depth":133,"text":268},{"id":349,"depth":133,"text":350},{"id":390,"depth":133,"text":391},{"id":434,"depth":133,"text":435},{"id":513,"depth":91,"text":514,"children":1359},[1360,1361],{"id":520,"depth":133,"text":521},{"id":823,"depth":133,"text":824},{"id":952,"depth":91,"text":953,"children":1363},[1364,1365,1366],{"id":959,"depth":133,"text":960},{"id":1011,"depth":133,"text":1012},{"id":1137,"depth":133,"text":1138},{"id":1217,"depth":91,"text":1218},{"id":1277,"depth":91,"text":1278},{"id":1306,"depth":91,"text":1307},{"id":1319,"depth":91,"text":1320},"2026-05-28","Optimize Base64 inline images: compress before encoding, SVG vs raster efficiency, lazy-load Data URIs, and automate inlining with build tools.","md",{"immutable":136},"\u002Fguides\u002Fbase64-image-optimization",{"title":5,"description":1372},"guides\u002Fbase64-image-optimization","42VySbhK0f3PYfr2mf6B3zWKxFWv32OTxQPZvm0BhC4",1780401327401]