[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"blog-post-base64-encoding-explained":3},{"id":4,"title":5,"author":6,"body":7,"description":452,"draft":453,"extension":454,"lang":455,"meta":456,"navigation":356,"path":457,"pubDate":458,"relatedTool":459,"seo":460,"stem":461,"tags":462,"__hash__":467},"blog\u002Fblog\u002Fbase64-encoding-explained.mdx","Base64 Encoding Explained: What It Is and When to Use It","ujiffy team",{"type":8,"value":9,"toc":438},"minimark",[10,14,19,40,58,65,69,72,75,82,92,96,99,104,107,147,150,154,173,177,188,196,211,215,218,222,225,229,235,241,247,263,267,270,292,295,418,422,425,434],[11,12,13],"p",{},"Base64 is one of those things that every developer encounters eventually, but many misunderstand. The most common misconception: that Base64 encoding is a form of security or encryption. It's not. At all. Let's clear that up — and then talk about what Base64 actually is, how it works, and when you genuinely need it.",[15,16,18],"h2",{"id":17},"what-is-base64","What Is Base64?",[11,20,21,22,26,27,31,32,35,36,39],{},"Base64 is an ",[23,24,25],"strong",{},"encoding scheme"," that converts binary data into a string of ASCII characters. The name comes from the fact that it uses 64 printable characters to represent the data: the 26 uppercase letters (A–Z), 26 lowercase letters (a–z), 10 digits (0–9), plus ",[28,29,30],"code",{},"+"," and ",[28,33,34],{},"\u002F"," (with ",[28,37,38],{},"="," used for padding).",[11,41,42,43,46,47,50,51,54,55,57],{},"Here's the key point: ",[23,44,45],{},"encoding is not encryption",". When you Base64-encode something, you're not hiding it. Anyone who sees a Base64 string can instantly decode it — no key, no password. If you Base64-encode the text ",[28,48,49],{},"hello",", you get ",[28,52,53],{},"aGVsbG8=",". Run that through a decoder and you get ",[28,56,49],{}," right back.",[11,59,60,61,64],{},"Base64 exists for a completely different reason: ",[23,62,63],{},"compatibility",". Some systems — email protocols, URLs, HTML attributes, certain APIs — were designed to handle text, not arbitrary binary data. Base64 is a way to take binary data (like an image or a file) and represent it using only safe, printable ASCII characters so it can travel through these text-based systems without getting corrupted.",[15,66,68],{"id":67},"how-base64-works-the-short-version","How Base64 Works (The Short Version)",[11,70,71],{},"Binary data is a stream of bytes — each byte is 8 bits. Base64 works by taking 3 bytes (24 bits) at a time and splitting them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet.",[11,73,74],{},"Why 6 bits? Because 2⁶ = 64, which is exactly the number of characters in the encoding alphabet.",[11,76,77,78,81],{},"The result: every 3 bytes of input become 4 characters of Base64 output. This means Base64-encoded data is about ",[23,79,80],{},"33% larger"," than the original. That's the trade-off — broader compatibility at the cost of size.",[11,83,84,85,87,88,91],{},"If the input isn't a multiple of 3 bytes, padding characters (",[28,86,38],{}," or ",[28,89,90],{},"==",") are added to the end to make the output length a multiple of 4.",[15,93,95],{"id":94},"when-do-developers-actually-use-base64","When Do Developers Actually Use Base64?",[11,97,98],{},"Base64 shows up in a surprising number of places in everyday web development:",[100,101,103],"h3",{"id":102},"data-urls-inline-images","Data URLs (Inline Images)",[11,105,106],{},"When you embed an image directly into HTML or CSS without a separate file, you use a Data URL. The image's binary content is Base64-encoded and placed inline:",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...\" \u002F>\n","html","",[28,115,116],{"__ignoreMap":113},[117,118,121,125,129,133,135,138,142,144],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sMK4o","\u003C",[117,126,128],{"class":127},"swJcz","img",[117,130,132],{"class":131},"spNyl"," src",[117,134,38],{"class":123},[117,136,137],{"class":123},"\"",[117,139,141],{"class":140},"sfazB","data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...",[117,143,137],{"class":123},[117,145,146],{"class":123}," \u002F>\n",[11,148,149],{},"This technique is useful for small icons or images you want to bundle into a single file, eliminating an extra HTTP request.",[100,151,153],{"id":152},"jwt-json-web-tokens","JWT (JSON Web Tokens)",[11,155,156,157,159,160,31,163,159,165,168,169,172],{},"JWTs use Base64URL encoding (a URL-safe variant of Base64, replacing ",[28,158,30],{}," with ",[28,161,162],{},"-",[28,164,34],{},[28,166,167],{},"_","). The header and payload sections of a JWT are Base64URL-encoded JSON objects — which is why you can paste a JWT into a decoder and read the claims directly. ",[23,170,171],{},"This is not encrypted."," The signature section verifies integrity, but the payload is readable by anyone.",[100,174,176],{"id":175},"http-basic-authentication","HTTP Basic Authentication",[11,178,179,180,183,184,187],{},"When a browser or API client sends Basic Auth credentials, the ",[28,181,182],{},"username:password"," string is Base64-encoded and included in the ",[28,185,186],{},"Authorization"," header:",[108,189,194],{"className":190,"code":192,"language":193},[191],"language-text","Authorization: Basic dXNlcjpwYXNzd29yZA==\n","text",[28,195,192],{"__ignoreMap":113},[11,197,198,199,202,203,206,207,210],{},"Decoding ",[28,200,201],{},"dXNlcjpwYXNzd29yZA=="," gives you ",[28,204,205],{},"user:password",". This is why ",[23,208,209],{},"Basic Auth must always be used over HTTPS"," — the credentials are trivially reversible.",[100,212,214],{"id":213},"email-attachments-mime","Email Attachments (MIME)",[11,216,217],{},"The MIME standard, which governs how email handles attachments, uses Base64 to encode binary files. When you receive an email with a PDF attachment, that PDF is Base64-encoded in the raw email source. Email servers, which were originally designed for plain text, can then safely transport it.",[100,219,221],{"id":220},"storing-binary-data-in-json-or-xml","Storing Binary Data in JSON or XML",[11,223,224],{},"JSON doesn't have a native binary type. When an API needs to include binary data (like a thumbnail or a cryptographic key) in a JSON response, Base64 encoding is the standard approach.",[15,226,228],{"id":227},"common-misconceptions","Common Misconceptions",[11,230,231,234],{},[23,232,233],{},"\"Base64 is encryption\"","\nNo. It is trivially reversible. Never use Base64 to \"protect\" sensitive data. Use proper encryption (AES, RSA, etc.) for that.",[11,236,237,240],{},[23,238,239],{},"\"Base64 compresses data\"","\nThe opposite is true. Base64 makes data larger by ~33%. It's a size trade-off you accept in exchange for compatibility.",[11,242,243,246],{},[23,244,245],{},"\"I should Base64-encode passwords before storing them\"","\nAbsolutely not. Passwords should be hashed with a proper algorithm like bcrypt, Argon2, or scrypt. Base64 provides zero security.",[11,248,249,252,253,159,255,257,258,159,260,262],{},[23,250,251],{},"\"Base64URL and Base64 are the same thing\"","\nClose but not identical. Base64URL replaces ",[28,254,30],{},[28,256,162],{},", ",[28,259,34],{},[28,261,167],{},", and omits padding. This makes it safe to use in URLs and filenames without percent-encoding.",[15,264,266],{"id":265},"how-to-encode-and-decode-base64-online","How to Encode and Decode Base64 Online",[11,268,269],{},"You don't need to write code to Base64-encode or decode something. ujiffy's free Base64 tool lets you:",[271,272,273,280,286,289],"ul",{},[274,275,276,279],"li",{},[23,277,278],{},"Encode"," any text or binary input to Base64",[274,281,282,285],{},[23,283,284],{},"Decode"," any Base64 string back to its original form",[274,287,288],{},"Works entirely in your browser — nothing is sent to a server",[274,290,291],{},"Supports both standard Base64 and Base64URL",[11,293,294],{},"Quick reference for developers who need it in code:",[108,296,300],{"className":297,"code":298,"language":299,"meta":113,"style":113},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F JavaScript\nbtoa(\"hello\")          \u002F\u002F encode → \"aGVsbG8=\"\natob(\"aGVsbG8=\")       \u002F\u002F decode → \"hello\"\n\n\u002F\u002F Python\nimport base64\nbase64.b64encode(b\"hello\")        # → b'aGVsbG8='\nbase64.b64decode(\"aGVsbG8=\")     # → b'hello'\n","js",[28,301,302,308,331,351,358,364,374,397],{"__ignoreMap":113},[117,303,304],{"class":119,"line":120},[117,305,307],{"class":306},"sHwdD","\u002F\u002F JavaScript\n",[117,309,311,315,319,321,323,325,328],{"class":119,"line":310},2,[117,312,314],{"class":313},"s2Zo4","btoa",[117,316,318],{"class":317},"sTEyZ","(",[117,320,137],{"class":123},[117,322,49],{"class":140},[117,324,137],{"class":123},[117,326,327],{"class":317},")          ",[117,329,330],{"class":306},"\u002F\u002F encode → \"aGVsbG8=\"\n",[117,332,334,337,339,341,343,345,348],{"class":119,"line":333},3,[117,335,336],{"class":313},"atob",[117,338,318],{"class":317},[117,340,137],{"class":123},[117,342,53],{"class":140},[117,344,137],{"class":123},[117,346,347],{"class":317},")       ",[117,349,350],{"class":306},"\u002F\u002F decode → \"hello\"\n",[117,352,354],{"class":119,"line":353},4,[117,355,357],{"emptyLinePlaceholder":356},true,"\n",[117,359,361],{"class":119,"line":360},5,[117,362,363],{"class":306},"\u002F\u002F Python\n",[117,365,367,371],{"class":119,"line":366},6,[117,368,370],{"class":369},"s7zQu","import",[117,372,373],{"class":317}," base64\n",[117,375,377,380,382,384,386,389,392,394],{"class":119,"line":376},7,[117,378,379],{"class":317},"base64.b64encode(b",[117,381,137],{"class":123},[117,383,49],{"class":140},[117,385,137],{"class":123},[117,387,388],{"class":317},")        # → b",[117,390,391],{"class":123},"'",[117,393,53],{"class":140},[117,395,396],{"class":123},"'\n",[117,398,400,403,405,407,409,412,414,416],{"class":119,"line":399},8,[117,401,402],{"class":317},"base64.b64decode(",[117,404,137],{"class":123},[117,406,53],{"class":140},[117,408,137],{"class":123},[117,410,411],{"class":317},")     # → b",[117,413,391],{"class":123},[117,415,49],{"class":140},[117,417,396],{"class":123},[15,419,421],{"id":420},"final-thoughts","Final Thoughts",[11,423,424],{},"Base64 is a workhorse encoding that quietly powers a huge chunk of the modern web — from inline images to auth headers to JWTs. Understanding what it is (and what it isn't) helps you use it correctly and avoid the security mistake of treating it like encryption. It's a compatibility tool, not a security tool. Use it accordingly.",[11,426,427],{},[428,429,431],"a",{"href":430},"\u002Ftools\u002Fbase64-encoder",[23,432,433],{},"Try ujiffy Base64 Encoder →",[435,436,437],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":113,"searchDepth":310,"depth":310,"links":439},[440,441,442,449,450,451],{"id":17,"depth":310,"text":18},{"id":67,"depth":310,"text":68},{"id":94,"depth":310,"text":95,"children":443},[444,445,446,447,448],{"id":102,"depth":333,"text":103},{"id":152,"depth":333,"text":153},{"id":175,"depth":333,"text":176},{"id":213,"depth":333,"text":214},{"id":220,"depth":333,"text":221},{"id":227,"depth":310,"text":228},{"id":265,"depth":310,"text":266},{"id":420,"depth":310,"text":421},"Base64 isn't encryption — learn what it actually does, why developers use it to encode images and API credentials, and how to encode\u002Fdecode online for free.",false,"mdx","en",{},"\u002Fblog\u002Fbase64-encoding-explained","2025-05-18","base64-encoder",{"title":5,"description":452},"blog\u002Fbase64-encoding-explained",[463,464,465,466],"base64","encoding","developer tools","web development","nLZeUyDMSWgRl3vXF2ihcGGLOvgEwAsng8w_lRJVEXw",1778839888533]