[{"data":1,"prerenderedAt":1841},["ShallowReactive",2],{"blog-base64-image-seo-data-uris":3},[4,1019],{"id":5,"title":6,"alt":7,"author":8,"body":9,"category":990,"description":991,"extension":992,"faq":993,"image":7,"meta":1006,"navigation":1007,"path":1008,"publishedAt":1009,"seo":1010,"stem":1011,"tags":1012,"updatedAt":7,"__hash__":1018},"blog\u002Fen\u002Fbase64-image-seo-data-uris.md","Base64 Image SEO: When Data URIs Help and When They Hurt",null,"kodewright",{"type":10,"value":11,"toc":969},"minimark",[12,16,25,30,40,51,54,58,67,159,222,225,228,232,237,248,251,255,262,269,273,291,298,307,311,335,344,348,440,449,453,456,506,534,548,552,567,659,666,786,797,867,870,874,890,898,912,916,920,926,930,933,937,943,947,954,958,965],[13,14,15],"p",{},"Inlining images as Base64 data URIs is almost never a page speed win in 2026. It makes sense for icons under a few kilobytes and for blurred placeholders. A hero image, a product photo or anything you want ranking in Google Images should stay a normal file with its own URL. The \"fewer HTTP requests\" argument for inlining was built for HTTP\u002F1.1, and HTTP\u002F2 multiplexing removed most of the cost it was fighting.",[13,17,18,19,24],{},"This doesn't explain what Base64 is (the ",[20,21,23],"a",{"href":22},"\u002Fblog\u002Fencoding-vs-encryption","encoding vs encryption guide"," covers that). It's about what inlining does to bytes, caching and Core Web Vitals, measured, so you can decide per asset.",[26,27,29],"h2",{"id":28},"what-a-data-uri-actually-is","What a data URI actually is",[13,31,32,33,39],{},"A data URI puts the file's bytes into the URL itself. The syntax, per ",[20,34,38],{"href":35,"rel":36},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FURI\u002FReference\u002FSchemes\u002Fdata",[37],"nofollow","MDN",":",[41,42,47],"pre",{"className":43,"code":45,"language":46},[44],"language-text","data:[\u003Cmedia-type>][;base64],\u003Cdata>\n\n\u003Cimg src=\"data:image\u002Fwebp;base64,UklGRj4+AABXRUJQVlA4IDI+AAC...\" alt=\"...\">\n","text",[48,49,45],"code",{"__ignoreMap":50},"",[13,52,53],{},"The browser decodes the string and paints it without a network request. That is the only advantage. All the trade-offs come from the fact that the image now lives inside another file.",[26,55,57],{"id":56},"the-33-overhead-mostly-disappears-with-gzip","The 33% overhead mostly disappears with gzip",[13,59,60,61,66],{},"Base64 maps 3 bytes to 4 ASCII characters (",[20,62,65],{"href":63,"rel":64},"https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc4648",[37],"RFC 4648","), so the raw string is about a third bigger. Most guides stop there. But you never send the raw string: it sits inside HTML or CSS, and your server compresses those. I measured a real 1200×630 WebP hero from this blog and a 24px lock icon SVG on macOS:",[41,68,72],{"className":69,"code":70,"language":71,"meta":50,"style":50},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","base64 -i hero.webp | tr -d '\\n' | wc -c            # Base64 size\nbase64 -i hero.webp | tr -d '\\n' | gzip -9c | wc -c # what actually goes over the wire\n","bash",[48,73,74,121],{"__ignoreMap":50},[75,76,79,83,87,90,94,97,100,103,106,109,111,114,117],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sBMFI","base64",[75,84,86],{"class":85},"sfazB"," -i",[75,88,89],{"class":85}," hero.webp",[75,91,93],{"class":92},"sMK4o"," |",[75,95,96],{"class":81}," tr",[75,98,99],{"class":85}," -d",[75,101,102],{"class":92}," '",[75,104,105],{"class":85},"\\n",[75,107,108],{"class":92},"'",[75,110,93],{"class":92},[75,112,113],{"class":81}," wc",[75,115,116],{"class":85}," -c",[75,118,120],{"class":119},"sHwdD","            # Base64 size\n",[75,122,124,126,128,130,132,134,136,138,140,142,144,147,150,152,154,156],{"class":77,"line":123},2,[75,125,82],{"class":81},[75,127,86],{"class":85},[75,129,89],{"class":85},[75,131,93],{"class":92},[75,133,96],{"class":81},[75,135,99],{"class":85},[75,137,102],{"class":92},[75,139,105],{"class":85},[75,141,108],{"class":92},[75,143,93],{"class":92},[75,145,146],{"class":81}," gzip",[75,148,149],{"class":85}," -9c",[75,151,93],{"class":92},[75,153,113],{"class":81},[75,155,116],{"class":85},[75,157,158],{"class":119}," # what actually goes over the wire\n",[160,161,162,184],"table",{},[163,164,165],"thead",{},[166,167,168,172,175,178,181],"tr",{},[169,170,171],"th",{},"Asset",[169,173,174],{},"Original",[169,176,177],{},"Base64",[169,179,180],{},"Original, gzip -9",[169,182,183],{},"Base64, gzip -9",[185,186,187,205],"tbody",{},[166,188,189,193,196,199,202],{},[190,191,192],"td",{},"hero.webp (1200×630)",[190,194,195],{},"32,436 B",[190,197,198],{},"43,248 B (+33%)",[190,200,201],{},"32,474 B",[190,203,204],{},"32,765 B (+1%)",[166,206,207,210,213,216,219],{},[190,208,209],{},"icon.svg (24×24)",[190,211,212],{},"269 B",[190,214,215],{},"360 B (+34%)",[190,217,218],{},"207 B",[190,220,221],{},"289 B (+40%)",[13,223,224],{},"Gzip claws back almost all of the Base64 overhead on already-compressed binary formats, so over the wire the hero costs roughly 1% more. If the transfer size were the whole story, inlining that hero would be nearly free.",[13,226,227],{},"The SVG goes the other way. SVG is text that compresses well on its own, and Base64 scrambles the repetition gzip relies on, so the inlined version stays 40% heavier after compression. That's why SVGs should be URL-encoded rather than Base64-encoded (more on that below).",[26,229,231],{"id":230},"where-inlining-actually-costs-you","Where inlining actually costs you",[233,234,236],"h3",{"id":235},"caching-is-gone","Caching is gone",[13,238,239,240,243,244,247],{},"A file at ",[48,241,242],{},"\u002Fimages\u002Flogo.webp"," is downloaded once and served from cache on every later page view. A data URI is cached only as part of the file that contains it. If that's your HTML, and SSR HTML is usually sent with ",[48,245,246],{},"no-cache"," or a short max-age, the image is re-downloaded on every page view. Inline a 4 KB logo into the layout, and a visitor who views 6 pages downloads it 6 times: 24 KB instead of 4 KB.",[13,249,250],{},"Inlining into an external CSS file is less bad, because the stylesheet is cached. But then any change to the image invalidates the whole stylesheet, and every user re-downloads all your CSS for a one-icon tweak.",[233,252,254],{"id":253},"render-blocking-bytes","Render-blocking bytes",[13,256,257,258,261],{},"CSS blocks rendering. Every kilobyte of Base64 you put in a stylesheet is a kilobyte the browser must download and parse before it paints anything, including the text that is usually your LCP element. A normal ",[48,259,260],{},"\u003Cimg>"," is fetched in parallel by the preload scanner and doesn't hold up first paint.",[13,263,264,265,268],{},"The same applies to the HTML: inlined images push everything after them further down the byte stream. A 40 KB data URI in the ",[48,266,267],{},"\u003Chead>"," (from a misconfigured page builder or a framework inlining an OG image) delays every byte of content that follows.",[233,270,272],{"id":271},"lcp-gets-harder-not-easier","LCP gets harder, not easier",[13,274,275,276,279,280,283,284,287,288,290],{},"If the LCP element is the inlined image, it can't paint before the HTML containing it has arrived and been parsed. It also can't take ",[48,277,278],{},"fetchpriority=\"high\""," or a ",[48,281,282],{},"\u003Clink rel=\"preload\">"," head start, and ",[48,285,286],{},"loading=\"lazy\""," saves nothing, because the bytes are already in the document. A normal image with ",[48,289,278],{}," usually wins on a real connection: the text paints as soon as the HTML and CSS arrive, while the preload scanner fetches the hero in parallel.",[13,292,293],{},[294,295],"img",{"alt":296,"src":297},"Base64 data URI vs separate image file network waterfall: inlined hero delays first paint and LCP until the whole HTML arrives, while a separate hero.webp loads in parallel","\u002Fimages\u002Fblog\u002Fbase64-image-seo-data-uris\u002Fwaterfall.webp",[13,299,300,301,306],{},"Google's threshold for a \"good\" LCP is ",[20,302,305],{"href":303,"rel":304},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[37],"2.5 seconds at the 75th percentile",". Check against your own field data before believing any rule of thumb, including mine.",[233,308,310],{"id":309},"its-invisible-to-image-search-signals","It's invisible to image search signals",[13,312,313,318,319,322,323,327,328,331,332,334],{},[20,314,317],{"href":315,"rel":316},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fgoogle-images",[37],"Google's image SEO docs"," do say you can inline images as data URIs in ",[48,320,321],{},"\u003Cimg src>",", and add that inlining \"can considerably increase the size of the page\". The same page states that ",[324,325,326],"strong",{},"Google doesn't index CSS images",", so a ",[48,329,330],{},"background-image: url(data:...)"," is invisible to Image search either way. My own view on ",[48,333,260],{}," data URIs: an image with no stable URL can't be linked to, hotlinked, shared or referenced in an image sitemap, so it builds no signals of its own. For a photo you want to rank, that is reason enough to keep it as a file.",[13,336,337,338,343],{},"There's also a hard size limit. Googlebot ",[20,339,342],{"href":340,"rel":341},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fcrawling-indexing\u002Fgooglebot",[37],"processes only the first 2 MB"," of an HTML file. A few large inlined images in a long page can push the actual content past that cut-off.",[26,345,347],{"id":346},"where-inlining-does-pay-off","Where inlining does pay off",[160,349,350,362],{},[163,351,352],{},[166,353,354,356,359],{},[169,355,171],{},[169,357,358],{},"Inline?",[169,360,361],{},"Why",[185,363,364,375,386,397,408,420,430],{},[166,365,366,369,372],{},[190,367,368],{},"UI icons under ~1–2 KB used in CSS",[190,370,371],{},"Yes, URL-encoded SVG",[190,373,374],{},"Saves a request for something tiny; text compresses well",[166,376,377,380,383],{},[190,378,379],{},"Blurred LQIP placeholder (~20×12 px)",[190,381,382],{},"Yes, Base64",[190,384,385],{},"Shows something while the real image loads; small enough not to matter",[166,387,388,391,394],{},[190,389,390],{},"Single-use email signature or HTML email images",[190,392,393],{},"Sometimes",[190,395,396],{},"Some clients block remote images; others block data URIs. Test your targets",[166,398,399,402,405],{},[190,400,401],{},"Logo in a site-wide layout",[190,403,404],{},"No",[190,406,407],{},"Re-sent on every page view; cache it instead",[166,409,410,413,415],{},[190,411,412],{},"Hero \u002F LCP image",[190,414,404],{},[190,416,417,418],{},"Use a file with ",[48,419,278],{},[166,421,422,425,427],{},[190,423,424],{},"Product or article photos",[190,426,404],{},[190,428,429],{},"Need a stable URL for Image search",[166,431,432,435,437],{},[190,433,434],{},"Anything over 4 KB",[190,436,404],{},[190,438,439],{},"Caching and render-blocking costs outweigh the saved request",[13,441,442,443,448],{},"A note on placeholders: since ",[20,444,447],{"href":445,"rel":446},"https:\u002F\u002Fchromium.googlesource.com\u002Fchromium\u002Fsrc\u002F+\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fspeed\u002Fmetrics_changelog\u002F2023_04_lcp.md",[37],"Chrome 112",", images with less than 0.05 bits of image data per displayed pixel are ignored as LCP candidates. A tiny blurred Base64 placeholder stretched to full width falls below that, so it won't \"fake\" a fast LCP. The real image still has to arrive. The placeholder improves perceived loading; it won't move your metric.",[26,450,452],{"id":451},"encode-svgs-as-urls-not-base64","Encode SVGs as URLs, not Base64",[13,454,455],{},"For SVG, skip Base64 entirely and percent-encode the markup:",[41,457,461],{"className":458,"code":459,"language":460,"meta":50,"style":50},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".icon-lock {\n  background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2'%3E...%3C\u002Fsvg%3E\");\n}\n","css",[48,462,463,474,500],{"__ignoreMap":50},[75,464,465,468,471],{"class":77,"line":78},[75,466,467],{"class":92},".",[75,469,470],{"class":81},"icon-lock",[75,472,473],{"class":92}," {\n",[75,475,476,480,482,486,489,492,495,497],{"class":77,"line":123},[75,477,479],{"class":478},"sqsOY","  background-image",[75,481,39],{"class":92},[75,483,485],{"class":484},"s2Zo4"," url",[75,487,488],{"class":92},"(",[75,490,491],{"class":92},"\"",[75,493,494],{"class":85},"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2'%3E...%3C\u002Fsvg%3E",[75,496,491],{"class":92},[75,498,499],{"class":92},");\n",[75,501,503],{"class":77,"line":502},3,[75,504,505],{"class":92},"}\n",[13,507,508,509,512,513,516,517,512,520,523,524,516,527,530,531,533],{},"The rules that matter: swap double quotes for single quotes inside the SVG so they don't close the CSS string, encode ",[48,510,511],{},"\u003C"," and ",[48,514,515],{},">"," as ",[48,518,519],{},"%3C",[48,521,522],{},"%3E",", and always encode ",[48,525,526],{},"#",[48,528,529],{},"%23",". An unencoded ",[48,532,526],{}," in a hex color starts a URL fragment, and the browser drops everything after it, a classic reason an inline SVG silently renders as nothing. On the lock icon above, the URL-encoded form was 286 bytes, 204 gzipped, against 289 gzipped for Base64.",[13,535,536,537,541,542,547],{},"You can do this by hand in the ",[20,538,540],{"href":539},"\u002Furl-encode-decode","URL Encoder",", which is safer than a random online converter if the SVG is unreleased brand artwork: it runs entirely in your browser and the markup never reaches a server. For a build pipeline, the ",[20,543,546],{"href":544,"rel":545},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmini-svg-data-uri",[37],"mini-svg-data-uri"," package does the same and handles the edge cases.",[26,549,551],{"id":550},"check-what-your-build-is-already-inlining","Check what your build is already inlining",[13,553,554,555,562,563,566],{},"You may be inlining without knowing it. Vite (and so Nuxt, SvelteKit and Astro) has ",[20,556,559],{"href":557,"rel":558},"https:\u002F\u002Fvite.dev\u002Fconfig\u002Fbuild-options",[37],[48,560,561],{},"build.assetsInlineLimit",", default ",[48,564,565],{},"4096"," bytes: any imported asset under 4 KiB is turned into a Base64 data URL in the bundle. That default is reasonable. Raising it to 50 KB \"to cut requests\" brings back every cost above.",[41,568,572],{"className":569,"code":570,"language":571,"meta":50,"style":50},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    build: {\n      \u002F\u002F keep the default, or tighten it; 0 disables inlining\n      assetsInlineLimit: 4096,\n    },\n  },\n})\n","ts",[48,573,574,579,597,607,617,623,638,644,650],{"__ignoreMap":50},[75,575,576],{"class":77,"line":78},[75,577,578],{"class":119},"\u002F\u002F nuxt.config.ts\n",[75,580,581,585,588,591,594],{"class":77,"line":123},[75,582,584],{"class":583},"s7zQu","export",[75,586,587],{"class":583}," default",[75,589,590],{"class":484}," defineNuxtConfig",[75,592,488],{"class":593},"sTEyZ",[75,595,596],{"class":92},"{\n",[75,598,599,603,605],{"class":77,"line":502},[75,600,602],{"class":601},"swJcz","  vite",[75,604,39],{"class":92},[75,606,473],{"class":92},[75,608,610,613,615],{"class":77,"line":609},4,[75,611,612],{"class":601},"    build",[75,614,39],{"class":92},[75,616,473],{"class":92},[75,618,620],{"class":77,"line":619},5,[75,621,622],{"class":119},"      \u002F\u002F keep the default, or tighten it; 0 disables inlining\n",[75,624,626,629,631,635],{"class":77,"line":625},6,[75,627,628],{"class":601},"      assetsInlineLimit",[75,630,39],{"class":92},[75,632,634],{"class":633},"sbssI"," 4096",[75,636,637],{"class":92},",\n",[75,639,641],{"class":77,"line":640},7,[75,642,643],{"class":92},"    },\n",[75,645,647],{"class":77,"line":646},8,[75,648,649],{"class":92},"  },\n",[75,651,653,656],{"class":77,"line":652},9,[75,654,655],{"class":92},"}",[75,657,658],{"class":593},")\n",[13,660,661,662,665],{},"To find inlined images on a live page, open DevTools, go to the Network tab and filter by ",[48,663,664],{},"data:",", or run this in the console:",[41,667,671],{"className":668,"code":669,"language":670,"meta":50,"style":50},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[...document.querySelectorAll('img[src^=\"data:\"]')]\n  .map(i => ({ alt: i.alt, kb: (i.src.length \u002F 1024).toFixed(1) }))\n","js",[48,672,673,701],{"__ignoreMap":50},[75,674,675,678,681,684,686,689,691,693,696,698],{"class":77,"line":78},[75,676,677],{"class":593},"[",[75,679,680],{"class":92},"...",[75,682,683],{"class":593},"document",[75,685,467],{"class":92},[75,687,688],{"class":484},"querySelectorAll",[75,690,488],{"class":593},[75,692,108],{"class":92},[75,694,695],{"class":85},"img[src^=\"data:\"]",[75,697,108],{"class":92},[75,699,700],{"class":593},")]\n",[75,702,703,706,709,711,715,719,722,725,728,730,733,735,738,741,744,746,749,751,754,756,759,762,765,768,770,773,775,778,781,783],{"class":77,"line":123},[75,704,705],{"class":92},"  .",[75,707,708],{"class":484},"map",[75,710,488],{"class":593},[75,712,714],{"class":713},"sHdIc","i",[75,716,718],{"class":717},"spNyl"," =>",[75,720,721],{"class":593}," (",[75,723,724],{"class":92},"{",[75,726,727],{"class":601}," alt",[75,729,39],{"class":92},[75,731,732],{"class":593}," i",[75,734,467],{"class":92},[75,736,737],{"class":593},"alt",[75,739,740],{"class":92},",",[75,742,743],{"class":601}," kb",[75,745,39],{"class":92},[75,747,748],{"class":593}," (i",[75,750,467],{"class":92},[75,752,753],{"class":593},"src",[75,755,467],{"class":92},[75,757,758],{"class":593},"length ",[75,760,761],{"class":92},"\u002F",[75,763,764],{"class":633}," 1024",[75,766,767],{"class":593},")",[75,769,467],{"class":92},[75,771,772],{"class":484},"toFixed",[75,774,488],{"class":593},[75,776,777],{"class":633},"1",[75,779,780],{"class":593},") ",[75,782,655],{"class":92},[75,784,785],{"class":593},"))\n",[13,787,788,789,792,793,796],{},"For CSS, this lists the sizes of the biggest inlined assets in your build output (",[48,790,791],{},".output\u002Fpublic"," for Nuxt, ",[48,794,795],{},"dist"," for plain Vite):",[41,798,800],{"className":69,"code":799,"language":71,"meta":50,"style":50},"find .output\u002Fpublic -name '*.css' -exec grep -ho 'url(data:[^)]*' {} + | awk '{ print length }' | sort -n | tail\n",[48,801,802],{"__ignoreMap":50},[75,803,804,807,810,813,815,818,820,823,826,829,831,834,836,839,842,844,847,849,852,854,856,859,862,864],{"class":77,"line":78},[75,805,806],{"class":81},"find",[75,808,809],{"class":85}," .output\u002Fpublic",[75,811,812],{"class":85}," -name",[75,814,102],{"class":92},[75,816,817],{"class":85},"*.css",[75,819,108],{"class":92},[75,821,822],{"class":85}," -exec",[75,824,825],{"class":85}," grep",[75,827,828],{"class":85}," -ho",[75,830,102],{"class":92},[75,832,833],{"class":85},"url(data:[^)]*",[75,835,108],{"class":92},[75,837,838],{"class":85}," {}",[75,840,841],{"class":85}," +",[75,843,93],{"class":92},[75,845,846],{"class":81}," awk",[75,848,102],{"class":92},[75,850,851],{"class":85},"{ print length }",[75,853,108],{"class":92},[75,855,93],{"class":92},[75,857,858],{"class":81}," sort",[75,860,861],{"class":85}," -n",[75,863,93],{"class":92},[75,865,866],{"class":81}," tail\n",[13,868,869],{},"Anything above a few kilobytes is a candidate to move back to a file.",[26,871,873],{"id":872},"when-you-do-need-the-base64-string","When you do need the Base64 string",[13,875,876,877,881,882,885,886,889],{},"For the cases that pass the table above (a placeholder, an email image, a test fixture), the ",[20,878,880],{"href":879},"\u002Fbase64-encode-decode","Base64 Encoder\u002FDecoder"," takes a file and returns the raw Base64 string locally. It returns the string only, so add the prefix yourself: ",[48,883,884],{},"data:image\u002Fwebp;base64,"," for WebP, ",[48,887,888],{},"data:image\u002Fpng;base64,"," for PNG. A wrong MIME type usually still renders in Chrome but can fail in stricter clients, email ones especially.",[13,891,892,893,897],{},"If you run a redirect-heavy migration at the same time, the ",[20,894,896],{"href":895},"\u002Fblog\u002Fbulk-url-encoding-for-seo","bulk URL encoding guide"," covers the percent-encoding side of the same problem.",[13,899,900,901,904,905,512,908,911],{},"The quick audit for an existing site: run the console snippet on your top three templates, move every inlined image over 4 KB back to a file with proper ",[48,902,903],{},"width",", ",[48,906,907],{},"height",[48,909,910],{},"fetchpriority"," attributes, and switch any Base64 SVGs in your CSS to URL-encoded ones.",[26,913,915],{"id":914},"faq","FAQ",[233,917,919],{"id":918},"does-google-index-base64-data-uri-images","Does Google index Base64 data URI images?",[13,921,922,923,925],{},"Data URIs in an ",[48,924,321],{}," are supported according to Google's own image docs. CSS background images are not indexed at all, data URI or not. For images you want to rank, a normal file URL is still the better choice because it can be linked, shared and listed in an image sitemap.",[233,927,929],{"id":928},"do-base64-images-load-faster","Do Base64 images load faster?",[13,931,932],{},"For an icon of a few hundred bytes that's needed on first paint, slightly. For anything bigger, losing the separate cache entry and adding weight to render-blocking HTML or CSS outweighs the one saved request, especially over HTTP\u002F2 or HTTP\u002F3, where extra requests are cheap.",[233,934,936],{"id":935},"how-much-bigger-is-a-base64-image","How much bigger is a Base64 image?",[13,938,939,940,942],{},"The raw string is about 33% larger. With gzip on the response, most of that comes back for already-compressed formats: my WebP test went from +33% to about +1%. I'd expect JPEG and PNG to behave similarly, but measure your own files: encode one in the ",[20,941,880],{"href":879}," and compare the length with the original file size. Text formats like SVG keep most of the overhead, which is why they should be URL-encoded instead.",[233,944,946],{"id":945},"whats-vites-default-inline-limit","What's Vite's default inline limit?",[13,948,949,950,953],{},"4096 bytes. Assets you import below that size end up as Base64 in your JS or CSS bundle. Set ",[48,951,952],{},"build.assetsInlineLimit: 0"," to turn inlining off, or pass a function to decide per file.",[233,955,957],{"id":956},"can-i-use-data-uris-in-an-open-graph-image-tag","Can I use data URIs in an Open Graph image tag?",[13,959,960,961,964],{},"No. Facebook, LinkedIn, Slack and X fetch ",[48,962,963],{},"og:image"," from an absolute URL with their own crawlers. A data URI isn't something they can fetch, so the link gets shared without a preview. Render a real 1200×630 file and point the tag at it.",[966,967,968],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":50,"searchDepth":123,"depth":123,"links":970},[971,972,973,979,980,981,982,983],{"id":28,"depth":123,"text":29},{"id":56,"depth":123,"text":57},{"id":230,"depth":123,"text":231,"children":974},[975,976,977,978],{"id":235,"depth":502,"text":236},{"id":253,"depth":502,"text":254},{"id":271,"depth":502,"text":272},{"id":309,"depth":502,"text":310},{"id":346,"depth":123,"text":347},{"id":451,"depth":123,"text":452},{"id":550,"depth":123,"text":551},{"id":872,"depth":123,"text":873},{"id":914,"depth":123,"text":915,"children":984},[985,986,987,988,989],{"id":918,"depth":502,"text":919},{"id":928,"depth":502,"text":929},{"id":935,"depth":502,"text":936},{"id":945,"depth":502,"text":946},{"id":956,"depth":502,"text":957},"Security","Inlining images as Base64 data URIs rarely speeds up a page. Measured overhead, caching and LCP costs, and the small cases where inlining does pay off.","md",[994,996,998,1000,1003],{"question":919,"answer":995},"Google's image documentation says you can inline images as data URIs in an img src, so they are supported. Images set through CSS background-image are not indexed at all, whether they are data URIs or normal URLs.",{"question":929,"answer":997},"Only when the image is tiny and needed for first paint. For anything larger than a few kilobytes, the lost browser caching and the extra weight in render-blocking HTML or CSS cost more than the saved request.",{"question":936,"answer":999},"Base64 turns every 3 bytes into 4 characters, so the raw string is about 33% larger. With gzip or Brotli on the HTML or CSS, most of that comes back: a 32,436-byte WebP was 43,248 bytes as Base64 but 32,765 bytes gzipped.",{"question":1001,"answer":1002},"What is the default inline limit in Vite and Nuxt?","Vite's build.assetsInlineLimit defaults to 4096 bytes (4 KiB). Imported assets below that size become Base64 data URLs in the build. Nuxt uses Vite, so the same default applies unless you change it in vite.build.",{"question":1004,"answer":1005},"Can I use a data URI as an Open Graph image?","No. Social crawlers fetch og:image as an absolute URL. A data URI there is not fetchable, so the shared link shows no preview image.",{},true,"\u002Fen\u002Fbase64-image-seo-data-uris","2026-10-11",{"title":6,"description":991},"en\u002Fbase64-image-seo-data-uris",[1013,1014,1015,1016,1017],"base64 image seo","data uri","core web vitals","lcp","base64 encoder","Dt6fUxIC163LE5uuAd60b3a-ahxn9tgbcz9fPr22_Q8",{"id":1020,"title":1021,"alt":7,"author":8,"body":1022,"category":990,"description":1819,"extension":992,"faq":1820,"image":7,"meta":1833,"navigation":1007,"path":1834,"publishedAt":1009,"seo":1835,"stem":1836,"tags":1837,"updatedAt":7,"__hash__":1840},"blog\u002Fuk\u002Fbase64-image-seo-data-uris.md","Base64-зображення і SEO: коли data URI шкодять сайту",{"type":10,"value":1023,"toc":1798},[1024,1027,1034,1038,1044,1049,1052,1056,1063,1132,1185,1188,1191,1195,1199,1208,1211,1215,1221,1227,1231,1246,1252,1260,1264,1284,1292,1296,1388,1395,1399,1402,1436,1458,1469,1473,1485,1551,1557,1645,1654,1708,1711,1715,1728,1735,1745,1747,1751,1757,1761,1764,1768,1775,1779,1785,1789,1795],[13,1025,1026],{},"Вбудовування зображень як Base64 data URI у 2026 році майже ніколи не пришвидшує сторінку. Воно має сенс для іконок до кількох кілобайтів і для розмитих плейсхолдерів. Hero-зображення, фото товару чи будь-що, що ви хочете бачити в Google Images, має лишатися звичайним файлом із власною URL-адресою. Аргумент «менше HTTP-запитів» з'явився в часи HTTP\u002F1.1, а мультиплексування в HTTP\u002F2 прибрало більшу частину тієї ціни, з якою він боровся.",[13,1028,1029,1030,1033],{},"Що таке Base64, я тут не пояснюю (про це є ",[20,1031,1032],{"href":22},"гайд про кодування і шифрування","). Ця стаття про те, що інлайн робить із байтами, кешуванням і Core Web Vitals, з вимірами, щоб ви могли вирішувати для кожного ресурсу окремо.",[26,1035,1037],{"id":1036},"що-насправді-таке-data-uri","Що насправді таке data URI",[13,1039,1040,1041,39],{},"Data URI вміщує байти файлу просто в URL. Синтаксис за ",[20,1042,38],{"href":35,"rel":1043},[37],[41,1045,1047],{"className":1046,"code":45,"language":46},[44],[48,1048,45],{"__ignoreMap":50},[13,1050,1051],{},"Браузер декодує рядок і малює зображення без мережевого запиту. Це єдина перевага. Усі компроміси випливають із того, що зображення тепер живе всередині іншого файлу.",[26,1053,1055],{"id":1054},"оверхед-у-33-майже-зникає-після-gzip","Оверхед у 33% майже зникає після gzip",[13,1057,1058,1059,1062],{},"Base64 перетворює 3 байти на 4 ASCII-символи (",[20,1060,65],{"href":63,"rel":1061},[37],"), тому сирий рядок приблизно на третину більший. На цьому більшість гайдів і зупиняються. Але сирий рядок ніхто не передає: він лежить усередині HTML або CSS, а їх сервер стискає. Я поміряв справжнє hero-зображення WebP 1200×630 із цього блогу та SVG-іконку замка 24 px на macOS:",[41,1064,1066],{"className":69,"code":1065,"language":71,"meta":50,"style":50},"base64 -i hero.webp | tr -d '\\n' | wc -c            # розмір у Base64\nbase64 -i hero.webp | tr -d '\\n' | gzip -9c | wc -c # скільки реально йде мережею\n",[48,1067,1068,1097],{"__ignoreMap":50},[75,1069,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094],{"class":77,"line":78},[75,1071,82],{"class":81},[75,1073,86],{"class":85},[75,1075,89],{"class":85},[75,1077,93],{"class":92},[75,1079,96],{"class":81},[75,1081,99],{"class":85},[75,1083,102],{"class":92},[75,1085,105],{"class":85},[75,1087,108],{"class":92},[75,1089,93],{"class":92},[75,1091,113],{"class":81},[75,1093,116],{"class":85},[75,1095,1096],{"class":119},"            # розмір у Base64\n",[75,1098,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129],{"class":77,"line":123},[75,1100,82],{"class":81},[75,1102,86],{"class":85},[75,1104,89],{"class":85},[75,1106,93],{"class":92},[75,1108,96],{"class":81},[75,1110,99],{"class":85},[75,1112,102],{"class":92},[75,1114,105],{"class":85},[75,1116,108],{"class":92},[75,1118,93],{"class":92},[75,1120,146],{"class":81},[75,1122,149],{"class":85},[75,1124,93],{"class":92},[75,1126,113],{"class":81},[75,1128,116],{"class":85},[75,1130,1131],{"class":119}," # скільки реально йде мережею\n",[160,1133,1134,1151],{},[163,1135,1136],{},[166,1137,1138,1141,1144,1146,1149],{},[169,1139,1140],{},"Ресурс",[169,1142,1143],{},"Оригінал",[169,1145,177],{},[169,1147,1148],{},"Оригінал, gzip -9",[169,1150,183],{},[185,1152,1153,1169],{},[166,1154,1155,1157,1160,1163,1166],{},[190,1156,192],{},[190,1158,1159],{},"32 436 Б",[190,1161,1162],{},"43 248 Б (+33%)",[190,1164,1165],{},"32 474 Б",[190,1167,1168],{},"32 765 Б (+1%)",[166,1170,1171,1173,1176,1179,1182],{},[190,1172,209],{},[190,1174,1175],{},"269 Б",[190,1177,1178],{},"360 Б (+34%)",[190,1180,1181],{},"207 Б",[190,1183,1184],{},"289 Б (+40%)",[13,1186,1187],{},"На вже стиснутих бінарних форматах gzip забирає майже весь оверхед Base64, тож по мережі hero коштує десь на 1% більше. Якби вся справа була в обсязі передачі, інлайн цього hero був би майже безкоштовним.",[13,1189,1190],{},"З SVG усе навпаки. SVG — це текст, який і сам добре стискається, а Base64 руйнує повтори, на які спирається gzip, тож вбудована версія лишається на 40% важчою навіть після стиснення. Саме тому SVG варто кодувати як URL, а не як Base64 (про це нижче).",[26,1192,1194],{"id":1193},"де-інлайн-справді-вам-коштує","Де інлайн справді вам коштує",[233,1196,1198],{"id":1197},"кешування-зникає","Кешування зникає",[13,1200,1201,1202,1204,1205,1207],{},"Файл ",[48,1203,242],{}," завантажується один раз, а на наступних сторінках береться з кешу. Data URI кешується лише разом із файлом, у якому лежить. Якщо це HTML, а SSR-HTML зазвичай віддають із ",[48,1206,246],{}," або коротким max-age, зображення завантажується заново на кожній сторінці. Вбудуйте логотип на 4 КБ у лейаут, і відвідувач, який переглянув 6 сторінок, завантажить його 6 разів: 24 КБ замість 4.",[13,1209,1210],{},"Інлайн у зовнішній CSS-файл менш шкідливий, бо таблиця стилів кешується. Але тоді будь-яка зміна зображення інвалідує весь файл стилів, і кожен користувач заново завантажує весь ваш CSS через правку однієї іконки.",[233,1212,1214],{"id":1213},"байти-що-блокують-рендеринг","Байти, що блокують рендеринг",[13,1216,1217,1218,1220],{},"CSS блокує рендеринг. Кожен кілобайт Base64 у таблиці стилів браузер мусить завантажити й розпарсити, перш ніж щось намалювати, зокрема текст, який зазвичай і є вашим елементом LCP. Звичайний ",[48,1219,260],{}," preload scanner завантажує паралельно, і перший рендер на нього не чекає.",[13,1222,1223,1224,1226],{},"З HTML те саме: вбудовані зображення відсувають усе, що йде після них, далі в потоці байтів. Data URI на 40 КБ у ",[48,1225,267],{}," (від криво налаштованого конструктора сторінок або фреймворку, що вбудував OG-зображення) затримує кожен байт контенту після нього.",[233,1228,1230],{"id":1229},"lcp-стає-гіршим-а-не-кращим","LCP стає гіршим, а не кращим",[13,1232,1233,1234,1236,1237,1239,1240,1242,1243,1245],{},"Якщо елемент LCP — це вбудоване зображення, воно не може з'явитися раніше, ніж HTML, у якому воно лежить, буде отримано й розпарсено. Йому також не допоможуть ",[48,1235,278],{}," чи ",[48,1238,282],{},", а ",[48,1241,286],{}," нічого не економить, бо байти вже в документі. Звичайне зображення з ",[48,1244,278],{}," на реальному з'єднанні зазвичай виграє: текст малюється, щойно прийшли HTML і CSS, а preload scanner тим часом паралельно тягне hero.",[13,1247,1248],{},[294,1249],{"alt":1250,"src":1251},"Base64 data URI проти окремого файлу зображення у waterfall: вбудований hero відкладає first paint і LCP до кінця завантаження HTML, а окремий hero.webp вантажиться паралельно","\u002Fimages\u002Fblog\u002Fbase64-image-seo-data-uris\u002Fwaterfall-uk.webp",[13,1253,1254,1255,1259],{},"Поріг Google для «доброго» LCP — ",[20,1256,1258],{"href":303,"rel":1257},[37],"2,5 секунди на 75-му перцентилі",". Звіряйтеся зі своїми польовими даними, перш ніж вірити будь-якому емпіричному правилу, зокрема моєму.",[233,1261,1263],{"id":1262},"сигнали-для-пошуку-зображень-втрачаються","Сигнали для пошуку зображень втрачаються",[13,1265,1266,1270,1271,1273,1274,1277,1278,1280,1281,1283],{},[20,1267,1269],{"href":315,"rel":1268},[37],"Документація Google щодо SEO зображень"," справді дозволяє вбудовувати зображення як data URI в ",[48,1272,321],{}," і додає, що інлайн «може суттєво збільшити розмір сторінки». На тій самій сторінці сказано, що ",[324,1275,1276],{},"Google не індексує CSS-зображення",", тож ",[48,1279,330],{}," для пошуку зображень невидимий у будь-якому разі. Моя думка щодо data URI в ",[48,1282,260],{},": на зображення без сталої URL-адреси не можна послатися, його не можна поширити чи додати в sitemap зображень, тож власних сигналів воно не набирає. Для фото, яке має ранжуватися, цього достатньо, щоб лишити його файлом.",[13,1285,1286,1287,1291],{},"Є ще й жорсткий ліміт розміру. Googlebot ",[20,1288,1290],{"href":340,"rel":1289},[37],"обробляє лише перші 2 МБ"," HTML-файлу. Кілька великих вбудованих зображень на довгій сторінці можуть виштовхнути реальний контент за цю межу.",[26,1293,1295],{"id":1294},"де-інлайн-таки-окупається","Де інлайн таки окупається",[160,1297,1298,1310],{},[163,1299,1300],{},[166,1301,1302,1304,1307],{},[169,1303,1140],{},[169,1305,1306],{},"Вбудовувати?",[169,1308,1309],{},"Чому",[185,1311,1312,1323,1334,1345,1356,1368,1378],{},[166,1313,1314,1317,1320],{},[190,1315,1316],{},"UI-іконки до ~1–2 КБ у CSS",[190,1318,1319],{},"Так, SVG у URL-кодуванні",[190,1321,1322],{},"Економить запит на щось крихітне; текст добре стискається",[166,1324,1325,1328,1331],{},[190,1326,1327],{},"Розмитий LQIP-плейсхолдер (~20×12 px)",[190,1329,1330],{},"Так, Base64",[190,1332,1333],{},"Показує щось, поки вантажиться справжнє зображення; надто малий, щоб на щось впливати",[166,1335,1336,1339,1342],{},[190,1337,1338],{},"Зображення в підписі листа чи HTML-розсилці",[190,1340,1341],{},"Іноді",[190,1343,1344],{},"Одні клієнти блокують віддалені зображення, інші — data URI. Тестуйте на своїх",[166,1346,1347,1350,1353],{},[190,1348,1349],{},"Логотип у спільному лейауті сайту",[190,1351,1352],{},"Ні",[190,1354,1355],{},"Передається з кожною сторінкою; краще кешуйте",[166,1357,1358,1361,1363],{},[190,1359,1360],{},"Hero \u002F LCP-зображення",[190,1362,1352],{},[190,1364,1365,1366],{},"Окремий файл із ",[48,1367,278],{},[166,1369,1370,1373,1375],{},[190,1371,1372],{},"Фото товарів і статей",[190,1374,1352],{},[190,1376,1377],{},"Потрібна стала URL-адреса для пошуку зображень",[166,1379,1380,1383,1385],{},[190,1381,1382],{},"Усе, що більше за 4 КБ",[190,1384,1352],{},[190,1386,1387],{},"Втрати на кешуванні й блокуванні рендерингу більші за зекономлений запит",[13,1389,1390,1391,1394],{},"Щодо плейсхолдерів: починаючи з ",[20,1392,447],{"href":445,"rel":1393},[37],", зображення, що мають менше ніж 0,05 біта даних на відображений піксель, не враховуються як кандидати в LCP. Крихітний розмитий Base64-плейсхолдер, розтягнутий на всю ширину, опиняється нижче цього порога, тож «підробити» швидкий LCP він не зможе. Справжнє зображення однаково має завантажитися. Плейсхолдер покращує сприйняте завантаження, але метрику не зрушить.",[26,1396,1398],{"id":1397},"кодуйте-svg-як-url-а-не-base64","Кодуйте SVG як URL, а не Base64",[13,1400,1401],{},"Для SVG пропустіть Base64 і закодуйте розмітку відсотковим кодуванням:",[41,1403,1404],{"className":458,"code":459,"language":460,"meta":50,"style":50},[48,1405,1406,1414,1432],{"__ignoreMap":50},[75,1407,1408,1410,1412],{"class":77,"line":78},[75,1409,467],{"class":92},[75,1411,470],{"class":81},[75,1413,473],{"class":92},[75,1415,1416,1418,1420,1422,1424,1426,1428,1430],{"class":77,"line":123},[75,1417,479],{"class":478},[75,1419,39],{"class":92},[75,1421,485],{"class":484},[75,1423,488],{"class":92},[75,1425,491],{"class":92},[75,1427,494],{"class":85},[75,1429,491],{"class":92},[75,1431,499],{"class":92},[75,1433,1434],{"class":77,"line":502},[75,1435,505],{"class":92},[13,1437,1438,1439,1441,1442,1444,1445,1441,1447,1449,1450,1444,1452,1454,1455,1457],{},"Правила, які мають значення: замініть подвійні лапки всередині SVG на одинарні, щоб вони не закрили CSS-рядок, закодуйте ",[48,1440,511],{}," і ",[48,1443,515],{}," як ",[48,1446,519],{},[48,1448,522],{}," і завжди кодуйте ",[48,1451,526],{},[48,1453,529],{},". Незакодований ",[48,1456,526],{}," у hex-кольорі починає фрагмент URL, і браузер відкидає все після нього: класична причина, чому вбудований SVG мовчки нічого не показує. Для іконки замка вище URL-кодована форма зайняла 286 байтів, після gzip — 204, проти 289 для Base64 після gzip.",[13,1459,1460,1461,1464,1465,1468],{},"Вручну це можна зробити в ",[20,1462,1463],{"href":539},"URL кодувальнику \u002F декодувальнику",". Якщо SVG — це ще не опублікований брендовий арт, це безпечніше, ніж випадковий онлайн-конвертер: усе працює у вашому браузері, і розмітка не потрапляє на жоден сервер. Для пайплайна збірки те саме робить пакет ",[20,1466,546],{"href":544,"rel":1467},[37],", і він закриває крайні випадки.",[26,1470,1472],{"id":1471},"перевірте-що-вже-вбудовує-ваша-збірка","Перевірте, що вже вбудовує ваша збірка",[13,1474,1475,1476,1481,1482,1484],{},"Можливо, ви вже вбудовуєте зображення, навіть не знаючи про це. У Vite (а отже, і в Nuxt, SvelteKit та Astro) є ",[20,1477,1479],{"href":557,"rel":1478},[37],[48,1480,561],{}," зі значенням за замовчуванням ",[48,1483,565],{}," байтів: будь-який імпортований ресурс, менший за 4 KiB, перетворюється на Base64 data URL у бандлі. Таке значення розумне. Підняти його до 50 КБ, «щоб скоротити запити», означає повернути всі витрати, описані вище.",[41,1486,1488],{"className":569,"code":1487,"language":571,"meta":50,"style":50},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    build: {\n      \u002F\u002F залиште значення за замовчуванням або зменште його; 0 вимикає інлайн\n      assetsInlineLimit: 4096,\n    },\n  },\n})\n",[48,1489,1490,1494,1506,1514,1522,1527,1537,1541,1545],{"__ignoreMap":50},[75,1491,1492],{"class":77,"line":78},[75,1493,578],{"class":119},[75,1495,1496,1498,1500,1502,1504],{"class":77,"line":123},[75,1497,584],{"class":583},[75,1499,587],{"class":583},[75,1501,590],{"class":484},[75,1503,488],{"class":593},[75,1505,596],{"class":92},[75,1507,1508,1510,1512],{"class":77,"line":502},[75,1509,602],{"class":601},[75,1511,39],{"class":92},[75,1513,473],{"class":92},[75,1515,1516,1518,1520],{"class":77,"line":609},[75,1517,612],{"class":601},[75,1519,39],{"class":92},[75,1521,473],{"class":92},[75,1523,1524],{"class":77,"line":619},[75,1525,1526],{"class":119},"      \u002F\u002F залиште значення за замовчуванням або зменште його; 0 вимикає інлайн\n",[75,1528,1529,1531,1533,1535],{"class":77,"line":625},[75,1530,628],{"class":601},[75,1532,39],{"class":92},[75,1534,634],{"class":633},[75,1536,637],{"class":92},[75,1538,1539],{"class":77,"line":640},[75,1540,643],{"class":92},[75,1542,1543],{"class":77,"line":646},[75,1544,649],{"class":92},[75,1546,1547,1549],{"class":77,"line":652},[75,1548,655],{"class":92},[75,1550,658],{"class":593},[13,1552,1553,1554,1556],{},"Щоб знайти вбудовані зображення на живій сторінці, відкрийте DevTools, вкладку Network і відфільтруйте за ",[48,1555,664],{},", або виконайте в консолі:",[41,1558,1559],{"className":668,"code":669,"language":670,"meta":50,"style":50},[48,1560,1561,1583],{"__ignoreMap":50},[75,1562,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581],{"class":77,"line":78},[75,1564,677],{"class":593},[75,1566,680],{"class":92},[75,1568,683],{"class":593},[75,1570,467],{"class":92},[75,1572,688],{"class":484},[75,1574,488],{"class":593},[75,1576,108],{"class":92},[75,1578,695],{"class":85},[75,1580,108],{"class":92},[75,1582,700],{"class":593},[75,1584,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643],{"class":77,"line":123},[75,1586,705],{"class":92},[75,1588,708],{"class":484},[75,1590,488],{"class":593},[75,1592,714],{"class":713},[75,1594,718],{"class":717},[75,1596,721],{"class":593},[75,1598,724],{"class":92},[75,1600,727],{"class":601},[75,1602,39],{"class":92},[75,1604,732],{"class":593},[75,1606,467],{"class":92},[75,1608,737],{"class":593},[75,1610,740],{"class":92},[75,1612,743],{"class":601},[75,1614,39],{"class":92},[75,1616,748],{"class":593},[75,1618,467],{"class":92},[75,1620,753],{"class":593},[75,1622,467],{"class":92},[75,1624,758],{"class":593},[75,1626,761],{"class":92},[75,1628,764],{"class":633},[75,1630,767],{"class":593},[75,1632,467],{"class":92},[75,1634,772],{"class":484},[75,1636,488],{"class":593},[75,1638,777],{"class":633},[75,1640,780],{"class":593},[75,1642,655],{"class":92},[75,1644,785],{"class":593},[13,1646,1647,1648,1650,1651,1653],{},"Для CSS ця команда виводить розміри найбільших вбудованих ресурсів у результатах збірки (",[48,1649,791],{}," для Nuxt, ",[48,1652,795],{}," для чистого Vite):",[41,1655,1656],{"className":69,"code":799,"language":71,"meta":50,"style":50},[48,1657,1658],{"__ignoreMap":50},[75,1659,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706],{"class":77,"line":78},[75,1661,806],{"class":81},[75,1663,809],{"class":85},[75,1665,812],{"class":85},[75,1667,102],{"class":92},[75,1669,817],{"class":85},[75,1671,108],{"class":92},[75,1673,822],{"class":85},[75,1675,825],{"class":85},[75,1677,828],{"class":85},[75,1679,102],{"class":92},[75,1681,833],{"class":85},[75,1683,108],{"class":92},[75,1685,838],{"class":85},[75,1687,841],{"class":85},[75,1689,93],{"class":92},[75,1691,846],{"class":81},[75,1693,102],{"class":92},[75,1695,851],{"class":85},[75,1697,108],{"class":92},[75,1699,93],{"class":92},[75,1701,858],{"class":81},[75,1703,861],{"class":85},[75,1705,93],{"class":92},[75,1707,866],{"class":81},[13,1709,1710],{},"Усе, що більше за кілька кілобайтів, — кандидат на повернення в окремий файл.",[26,1712,1714],{"id":1713},"коли-base64-рядок-таки-потрібен","Коли Base64-рядок таки потрібен",[13,1716,1717,1718,1721,1722,1724,1725,1727],{},"Для випадків, що пройшли таблицю вище (плейсхолдер, зображення в листі, тестова фікстура), ",[20,1719,1720],{"href":879},"Base64 кодувальник \u002F декодувальник"," приймає файл і локально повертає сирий Base64-рядок. Він повертає лише рядок, тож префікс додайте самі: ",[48,1723,884],{}," для WebP, ",[48,1726,888],{}," для PNG. Неправильний MIME-тип у Chrome зазвичай усе одно рендериться, але в суворіших клієнтах, особливо поштових, може зламатися.",[13,1729,1730,1731,1734],{},"Якщо паралельно у вас міграція з купою редиректів, ",[20,1732,1733],{"href":895},"гайд про масове URL-кодування"," розбирає ту саму проблему з боку відсоткового кодування.",[13,1736,1737,1738,904,1740,1441,1742,1744],{},"Швидкий аудит наявного сайту: запустіть консольний сніпет на трьох основних шаблонах, поверніть кожне вбудоване зображення понад 4 КБ в окремий файл із нормальними атрибутами ",[48,1739,903],{},[48,1741,907],{},[48,1743,910],{}," та переведіть усі Base64 SVG у вашому CSS на URL-кодування.",[26,1746,915],{"id":914},[233,1748,1750],{"id":1749},"чи-індексує-google-зображення-у-форматі-base64-data-uri","Чи індексує Google зображення у форматі Base64 data URI?",[13,1752,1753,1754,1756],{},"За власною документацією Google, data URI в ",[48,1755,321],{}," підтримуються. Фонові CSS-зображення не індексуються взагалі, data URI це чи ні. Для зображень, які мають ранжуватися, звичайна URL-адреса файлу все одно кращий вибір: на неї можна послатися, її можна поширити й додати в sitemap зображень.",[233,1758,1760],{"id":1759},"чи-завантажуються-base64-зображення-швидше","Чи завантажуються Base64-зображення швидше?",[13,1762,1763],{},"Для іконки на кілька сотень байтів, потрібної для першого рендеру, трохи швидше. Для всього більшого втрата окремого запису в кеші та зайва вага в HTML чи CSS, які блокують рендеринг, переважують один зекономлений запит, особливо на HTTP\u002F2 чи HTTP\u002F3, де додаткові запити дешеві.",[233,1765,1767],{"id":1766},"наскільки-base64-зображення-більше-за-оригінал","Наскільки Base64-зображення більше за оригінал?",[13,1769,1770,1771,1774],{},"Сирий рядок приблизно на 33% більший. Коли відповідь стискається gzip, для вже стиснутих форматів більша частина цього оверхеду зникає: у моєму тесті з WebP він упав із +33% до приблизно +1%. Думаю, JPEG і PNG поводяться схоже, але поміряйте свої файли: закодуйте один у ",[20,1772,1773],{"href":879},"Base64 кодувальнику \u002F декодувальнику"," і порівняйте довжину з розміром оригіналу. Текстові формати на кшталт SVG зберігають більшу частину оверхеду, тому їх краще кодувати як URL.",[233,1776,1778],{"id":1777},"який-ліміт-інлайну-за-замовчуванням-у-vite","Який ліміт інлайну за замовчуванням у Vite?",[13,1780,1781,1782,1784],{},"4096 байтів. Ресурси, які ви імпортуєте і які менші за цей розмір, потрапляють у JS- або CSS-бандл як Base64. Встановіть ",[48,1783,952],{},", щоб вимкнути інлайн, або передайте функцію, щоб вирішувати для кожного файлу окремо.",[233,1786,1788],{"id":1787},"чи-можна-використати-data-uri-в-тегу-open-graph-зображення","Чи можна використати data URI в тегу Open Graph зображення?",[13,1790,1791,1792,1794],{},"Ні. Facebook, LinkedIn, Slack і X завантажують ",[48,1793,963],{}," своїми краулерами за абсолютною URL-адресою. Data URI вони завантажити не можуть, тож посилання поширюється без прев'ю. Згенеруйте справжній файл 1200×630 і вкажіть у тегу його.",[966,1796,1797],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":50,"searchDepth":123,"depth":123,"links":1799},[1800,1801,1802,1808,1809,1810,1811,1812],{"id":1036,"depth":123,"text":1037},{"id":1054,"depth":123,"text":1055},{"id":1193,"depth":123,"text":1194,"children":1803},[1804,1805,1806,1807],{"id":1197,"depth":502,"text":1198},{"id":1213,"depth":502,"text":1214},{"id":1229,"depth":502,"text":1230},{"id":1262,"depth":502,"text":1263},{"id":1294,"depth":123,"text":1295},{"id":1397,"depth":123,"text":1398},{"id":1471,"depth":123,"text":1472},{"id":1713,"depth":123,"text":1714},{"id":914,"depth":123,"text":915,"children":1813},[1814,1815,1816,1817,1818],{"id":1749,"depth":502,"text":1750},{"id":1759,"depth":502,"text":1760},{"id":1766,"depth":502,"text":1767},{"id":1777,"depth":502,"text":1778},{"id":1787,"depth":502,"text":1788},"Вбудовування зображень як Base64 data URI рідко пришвидшує сторінку. Виміряний оверхед, втрати на кешуванні й LCP та випадки, коли інлайн виправданий.",[1821,1823,1825,1827,1830],{"question":1750,"answer":1822},"У документації Google щодо зображень сказано, що data URI в атрибуті src тегу img підтримуються. Зображення, задані через CSS background-image, не індексуються взагалі, незалежно від того, data URI це чи звичайна URL-адреса.",{"question":1760,"answer":1824},"Лише тоді, коли зображення крихітне й потрібне для першого рендеру. Для всього, що більше за кілька кілобайтів, втрачене кешування та зайва вага в HTML чи CSS, які блокують рендеринг, коштують більше, ніж зекономлений запит.",{"question":1767,"answer":1826},"Base64 перетворює кожні 3 байти на 4 символи, тож сирий рядок приблизно на 33% більший. Gzip або Brotli на HTML чи CSS повертають більшу частину цього: WebP на 32 436 байтів у Base64 займав 43 248 байтів, а після gzip — 32 765.",{"question":1828,"answer":1829},"Який ліміт інлайну за замовчуванням у Vite і Nuxt?","build.assetsInlineLimit у Vite за замовчуванням дорівнює 4096 байтів (4 KiB). Імпортовані ресурси, менші за цей поріг, стають Base64 data URL у збірці. Nuxt працює на Vite, тож той самий ліміт діє, доки ви не зміните його у vite.build.",{"question":1831,"answer":1832},"Чи можна вказати data URI як Open Graph зображення?","Ні. Краулери соцмереж завантажують og:image за абсолютною URL-адресою. Data URI вони завантажити не можуть, тож посилання поширюється без прев'ю.",{},"\u002Fuk\u002Fbase64-image-seo-data-uris",{"title":1021,"description":1819},"uk\u002Fbase64-image-seo-data-uris",[1838,1014,1015,1016,1839],"base64 зображення seo","base64 кодувальник","0ni6RFuwMCEgDmdU0LuvGZHwLp7omO_rwjRZNqfpWqA",1794303500231]