https://www.grigora.co/_next/static/chunks/pages/tools/image-to-base64-converter-563ff8f1fcf8e089.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9288],{17835:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/tools/image-to-base64-converter",function(){return a(93042)}])},93042:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return N}});var r=a(91309),n=a(85893),o=a(9008),s=a.n(o),i=a(41664),l=a.n(i),c=a(67294),d=a(8971),h=a(33628),p=a(88501),m=a(66649),u="Image to Base64 Converter",x="image-to-base64-converter",g="https://www.grigora.co/tools/".concat(x,"/"),f="Free Online Image to Base64 Data URI Converter | Grigora",b="Convert an image to a Base64 data URI online for CSS or HTML. The file is read in your browser and never uploaded anywhere.",y=[{question:"When is a data URI worth using?",answer:"For small assets that would otherwise cost a request, such as an icon or a one pixel gradient, and for emails where an external image would be blocked. For anything of real size a normal file reference is better."},{question:"Why is the base64 bigger than my file?",answer:"Base64 encodes three bytes as four characters, so expect roughly a third more, plus the data URI prefix. A 10 KB image becomes about 13.5 KB of text."},{question:"Does it work with SVG?",answer:"Yes, though for SVG a URL encoded data URI is usually smaller than base64 and stays readable in the stylesheet."},{question:"Will the image be uploaded?",answer:"No. The file is read with the browser FileReader and converted in the page. It never leaves your machine."},{question:"Can I convert several images at once?",answer:"One at a time here. For a whole sprite sheet or icon set, a build step is a better fit than a manual conversion."}],w=["base64-to-image-converter","image-to-webp-converter","image-size-compressor"],j=[{title:"Open the tool",body:"Image to Base64 Converter opens empty, with image file on the left and data uri on the right.",alt:"Empty Image to Base64 Converter before any input"},{title:"Choose your file",body:"Pick a file and it is read in the browser. Nothing is uploaded.",alt:"Image to Base64 Converter with input in place"},{title:"Read the result",body:"The result appears on the right, ready to download.",alt:"Image to Base64 Converter showing its result"}],v=[];function N(){var e=(0,r._)(c.useState(null),2),t=e[0],a=e[1];return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s(),{children:[(0,n.jsx)("title",{children:f}),(0,n.jsx)("meta",{name:"description",content:b}),(0,n.jsx)("link",{rel:"canonical",href:g}),(0,n.jsx)("meta",{property:"og:title",content:f}),(0,n.jsx)("meta",{property:"og:description",content:b}),(0,n.jsx)("meta",{property:"og:url",content:g}),(0,n.jsx)("meta",{property:"og:type",content:"website"}),(0,n.jsx)("meta",{property:"og:image",content:"https://www.grigora.co/tools/thumbnail/".concat(x,".webp")}),(0,n.jsx)("meta",{name:"twitter:image",content:"https://www.grigora.co/tools/thumbnail/".concat(x,".webp")}),(0,n.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,n.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:y.map(function(e){return{"@type":"Question",name:e.question,acceptedAnswer:{"@type":"Answer",text:e.answer}}})})}}),(0,n.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"https://schema.org","@type":"SoftwareApplication",name:u,applicationCategory:"DeveloperApplication",operatingSystem:"Any",url:g,offers:{"@type":"Offer",price:"0",priceCurrency:"USD"}})}})]}),(0,n.jsx)("div",{className:"bg-gradient-to-b from-[#F5F3FF] via-white to-white px-4 pb-12 pt-10 sm:px-6 lg:px-8",children:(0,n.jsxs)("div",{className:"mx-auto max-w-6xl",children:[(0,n.jsxs)("nav",{className:"mb-5 flex flex-wrap items-center gap-1 text-sm text-gray-500","aria-label":"Breadcrumb",children:[(0,n.jsx)(l(),{href:"/",className:"hover:text-[#623ce7]",children:"Home"}),(0,n.jsx)("span",{"aria-hidden":"true",children:"›"}),(0,n.jsx)(l(),{href:"/tools/",className:"hover:text-[#623ce7]",children:"Free SEO Tools"}),(0,n.jsx)("span",{"aria-hidden":"true",children:"›"}),(0,n.jsx)("span",{className:"text-gray-700",children:u})]}),(0,n.jsx)("h1",{className:"mb-5 text-3xl font-extrabold leading-tight tracking-tight text-gray-900 md:text-4xl",children:"Convert an image to a Base64 data URI online"}),(0,n.jsx)(h.Z,{transform:m.YL,options:v,inputLabel:"Image file",outputLabel:"Data URI",placeholder:"",sample:"",accept:"image/*",fileHint:"PNG, JPEG, GIF, WebP or SVG",actionLabel:"Convert to base64",autoRun:!1,renderOutput:function(e){return(0,n.jsxs)("div",{className:"space-y-3",children:[(0,n.jsx)("img",{src:e.preview,alt:"Preview of the converted image",className:"max-h-52 rounded-lg border border-gray-200"}),(0,n.jsx)("textarea",{readOnly:!0,value:e.output,onFocus:function(e){return e.target.select()},className:"h-40 w-full resize-y rounded-lg border border-gray-200 p-3 font-mono text-xs"})]})}}),(0,n.jsx)("p",{className:"mt-8 max-w-3xl text-lg leading-relaxed text-gray-600",children:"Produces a complete data URI ready to drop into a background-image rule or an img src. The file is read in the browser, so nothing is uploaded, which matters when the asset is not public yet. Also called an image to data URI encoder. Expect the Base64 to be about a third larger than the file."})]})}),(0,n.jsx)(p.Z,{slug:x,steps:j,heading:"How to use the ".concat(u,", step by step"),intro:"Real screenshots of the tool, captured while running it."}),(0,n.jsxs)("section",{className:"mx-auto max-w-3xl px-4 py-14 sm:px-6 lg:px-8",children:[(0,n.jsx)("h2",{className:"mb-6 text-2xl font-extrabold text-gray-900",children:"Questions people ask"}),(0,n.jsx)("div",{className:"divide-y divide-gray-200 rounded-2xl border border-gray-200",children:y.map(function(e,r){return(0,n.jsxs)("div",{children:[(0,n.jsxs)("button",{type:"button",onClick:function(){return a(t===r?null:r)},className:"flex min-h-[56px] w-full items-center justify-between gap-4 px-5 py-4 text-left","aria-expanded":t===r,"aria-controls":"faq-answer-".concat(r),children:[(0,n.jsx)("span",{className:"font-semibold text-gray-900",children:e.question}),(0,n.jsx)(d.Z,{className:"h-4 w-4 flex-shrink-0 text-gray-400 transition-transform ".concat(t===r?"rotate-180":"")})]}),(0,n.jsx)("p",{id:"faq-answer-".concat(r),className:"px-5 pb-4 leading-relaxed text-gray-600 ".concat(t===r?"":"hidden"),children:e.answer})]},e.question)})}),(0,n.jsx)("h2",{className:"mb-4 mt-12 text-2xl font-extrabold text-gray-900",children:"Related tools"}),(0,n.jsx)("div",{className:"grid gap-3 sm:grid-cols-3",children:w.map(function(e){return(0,n.jsx)(l(),{href:"/tools/".concat(e,"/"),className:"rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 hover:border-[#623ce7] hover:text-[#623ce7]",children:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join(" ")},e)})})]})]})}}},function(e){e.O(0,[5675,8501,3919,9774,2888,179],function(){return e(e.s=17835)}),_N_E=e.O()}]);