[{"data":1,"prerenderedAt":662},["ShallowReactive",2],{"blog-base64-encoding-when-and-why":3},{"id":4,"title":5,"body":6,"category":651,"date":652,"description":653,"extension":654,"meta":655,"navigation":406,"path":656,"readingTime":421,"seo":657,"stem":658,"tool":659,"updated":660,"__hash__":661},"blog\u002Fblog\u002Fbase64-encoding-when-and-why.md","Base64 Encoding: When and Why",{"type":7,"value":8,"toc":629},"minimark",[9,13,16,21,24,63,74,84,90,94,175,189,193,198,201,234,269,273,283,289,292,296,299,303,306,349,353,357,360,364,367,371,378,382,386,442,446,500,504,557,561,613,617,625],[10,11,12],"p",{},"Base64 encoding converts binary data into a text representation using 64 printable ASCII characters. It is one of the most commonly used encoding schemes in web development — appearing in data URIs, email attachments, API authentication headers, and JWT tokens. Yet many developers confuse encoding with encryption, or use Base64 in situations where it adds overhead without benefit.",[10,14,15],{},"This guide explains how Base64 works, when to use it, and when not to.",[17,18,20],"h2",{"id":19},"how-base64-works","How Base64 Works",[10,22,23],{},"Base64 takes every 3 bytes (24 bits) of input and splits them into 4 groups of 6 bits each. Each 6-bit group maps to one of 64 characters:",[25,26,27,35,41,47,57],"ul",{},[28,29,30,34],"li",{},[31,32,33],"code",{},"A-Z"," (0-25)",[28,36,37,40],{},[31,38,39],{},"a-z"," (26-51)",[28,42,43,46],{},[31,44,45],{},"0-9"," (52-61)",[28,48,49,52,53,56],{},[31,50,51],{},"+"," (62) and ",[31,54,55],{},"\u002F"," (63)",[28,58,59,62],{},[31,60,61],{},"="," for padding when the input length is not a multiple of 3",[10,64,65,66,69,70,73],{},"For example, the text ",[31,67,68],{},"\"Hi\""," (2 bytes: ",[31,71,72],{},"0x48 0x69","):",[75,76,81],"pre",{"className":77,"code":79,"language":80},[78],"language-text","Binary:    01001000 01101001\n6-bit:     010010 000110 1001xx\nPadded:    010010 000110 100100\nBase64:    S      G      k      =\nResult:    \"SGk=\"\n","text",[31,82,79],{"__ignoreMap":83},"",[10,85,86,87,89],{},"The ",[31,88,61],{}," padding ensures the encoded output length is always a multiple of 4.",[17,91,93],{"id":92},"base64-variants","Base64 Variants",[95,96,97,116],"table",{},[98,99,100],"thead",{},[101,102,103,107,110,113],"tr",{},[104,105,106],"th",{},"Variant",[104,108,109],{},"Characters 62-63",[104,111,112],{},"Padding",[104,114,115],{},"Use case",[117,118,119,139,158],"tbody",{},[101,120,121,125,132,136],{},[122,123,124],"td",{},"Standard (RFC 4648)",[122,126,127,129,130],{},[31,128,51],{}," ",[31,131,55],{},[122,133,134],{},[31,135,61],{},[122,137,138],{},"Email (MIME), PEM certificates",[101,140,141,144,152,155],{},[122,142,143],{},"URL-safe (RFC 4648 §5)",[122,145,146,129,149],{},[31,147,148],{},"-",[31,150,151],{},"_",[122,153,154],{},"Optional",[122,156,157],{},"URLs, filenames, JWTs",[101,159,160,163,169,172],{},[122,161,162],{},"Base64url (no pad)",[122,164,165,129,167],{},[31,166,148],{},[31,168,151],{},[122,170,171],{},"None",[122,173,174],{},"JWTs, compact tokens",[10,176,177,178,180,181,183,184,180,186,188],{},"The URL-safe variant replaces ",[31,179,51],{}," with ",[31,182,148],{}," and ",[31,185,55],{},[31,187,151],{}," because the standard characters have special meaning in URLs and filenames.",[17,190,192],{"id":191},"when-to-use-base64","When to Use Base64",[194,195,197],"h3",{"id":196},"_1-embedding-binary-data-in-text-formats","1. Embedding binary data in text formats",[10,199,200],{},"HTML, CSS, JSON, and XML are text formats. To include an image, font, or other binary data inline, Base64 encode it:",[75,202,206],{"className":203,"code":204,"language":205,"meta":83,"style":83},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...\" \u002F>\n","html",[31,207,208],{"__ignoreMap":83},[209,210,213,217,221,225,227,231],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"sVt8B","\u003C",[209,218,220],{"class":219},"s9eBZ","img",[209,222,224],{"class":223},"sScJk"," src",[209,226,61],{"class":215},[209,228,230],{"class":229},"sZZnC","\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...\"",[209,232,233],{"class":215}," \u002F>\n",[75,235,239],{"className":236,"code":237,"language":238,"meta":83,"style":83},"language-css shiki shiki-themes github-light github-dark",".icon { background-image: url(data:image\u002Fsvg+xml;base64,PHN2Zy...); }\n","css",[31,240,241],{"__ignoreMap":83},[209,242,243,246,249,253,256,259,262,266],{"class":211,"line":212},[209,244,245],{"class":223},".icon",[209,247,248],{"class":215}," { ",[209,250,252],{"class":251},"sj4cs","background-image",[209,254,255],{"class":215},": ",[209,257,258],{"class":251},"url",[209,260,261],{"class":215},"(",[209,263,265],{"class":264},"s4XuR","data:image\u002Fsvg+xml;base64,PHN2Zy...",[209,267,268],{"class":215},"); }\n",[194,270,272],{"id":271},"_2-http-basic-authentication","2. HTTP Basic Authentication",[10,274,86,275,278,279,282],{},[31,276,277],{},"Authorization: Basic"," header encodes ",[31,280,281],{},"username:password"," in Base64:",[75,284,287],{"className":285,"code":286,"language":80},[78],"Authorization: Basic YWxpY2U6cGFzc3dvcmQ=\n",[31,288,286],{"__ignoreMap":83},[10,290,291],{},"This is encoding, not encryption — the credentials are readable by anyone who sees the header. Always use HTTPS.",[194,293,295],{"id":294},"_3-email-attachments-mime","3. Email attachments (MIME)",[10,297,298],{},"Email was designed for 7-bit ASCII text. Binary attachments are Base64-encoded within MIME (Multipurpose Internet Mail Extensions) parts so they survive transit through mail servers.",[194,300,302],{"id":301},"_4-storing-binary-data-in-json","4. Storing binary data in JSON",[10,304,305],{},"JSON has no binary type. Binary values like cryptographic keys, hashes, or file content are commonly Base64-encoded as strings:",[75,307,311],{"className":308,"code":309,"language":310,"meta":83,"style":83},"language-json shiki shiki-themes github-light github-dark","{\n  \"publicKey\": \"MIIBIjANBgkqhki...\",\n  \"signature\": \"MEUCIQC7...\"\n}\n","json",[31,312,313,318,332,343],{"__ignoreMap":83},[209,314,315],{"class":211,"line":212},[209,316,317],{"class":215},"{\n",[209,319,321,324,326,329],{"class":211,"line":320},2,[209,322,323],{"class":251},"  \"publicKey\"",[209,325,255],{"class":215},[209,327,328],{"class":229},"\"MIIBIjANBgkqhki...\"",[209,330,331],{"class":215},",\n",[209,333,335,338,340],{"class":211,"line":334},3,[209,336,337],{"class":251},"  \"signature\"",[209,339,255],{"class":215},[209,341,342],{"class":229},"\"MEUCIQC7...\"\n",[209,344,346],{"class":211,"line":345},4,[209,347,348],{"class":215},"}\n",[17,350,352],{"id":351},"when-not-to-use-base64","When NOT to Use Base64",[194,354,356],{"id":355},"not-for-security","Not for security",[10,358,359],{},"Base64 is not encryption. It is a reversible encoding with no key — anyone can decode it. Never Base64-encode passwords, tokens, or secrets and consider them \"hidden.\"",[194,361,363],{"id":362},"not-for-large-files","Not for large files",[10,365,366],{},"Base64 increases data size by approximately 33% (3 bytes become 4 characters). A 1 MB image becomes ~1.37 MB when Base64-encoded. For large assets, use direct binary transfer (multipart upload, binary HTTP body) instead.",[194,368,370],{"id":369},"not-for-url-parameters-usually","Not for URL parameters (usually)",[10,372,373,374,377],{},"While Base64url exists, URL-encoding the original data is often simpler. Base64 is warranted when the data is binary; for text data, URL encoding (",[31,375,376],{},"encodeURIComponent",") is more appropriate.",[17,379,381],{"id":380},"base64-in-code","Base64 in Code",[194,383,385],{"id":384},"javascript","JavaScript",[75,387,390],{"className":388,"code":389,"language":384,"meta":83,"style":83},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Encode\nbtoa('Hello World')           \u002F\u002F \"SGVsbG8gV29ybGQ=\"\n\n\u002F\u002F Decode\natob('SGVsbG8gV29ybGQ=')     \u002F\u002F \"Hello World\"\n\n\u002F\u002F For Unicode text (btoa only handles Latin-1)\nconst encode = (str) => btoa(new TextEncoder().encode(str).reduce((s, b) => s + String.fromCharCode(b), ''));\nconst decode = (b64) => new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));\n",[31,391,392,397,402,408,413,419,424,430,436],{"__ignoreMap":83},[209,393,394],{"class":211,"line":212},[209,395,396],{},"\u002F\u002F Encode\n",[209,398,399],{"class":211,"line":320},[209,400,401],{},"btoa('Hello World')           \u002F\u002F \"SGVsbG8gV29ybGQ=\"\n",[209,403,404],{"class":211,"line":334},[209,405,407],{"emptyLinePlaceholder":406},true,"\n",[209,409,410],{"class":211,"line":345},[209,411,412],{},"\u002F\u002F Decode\n",[209,414,416],{"class":211,"line":415},5,[209,417,418],{},"atob('SGVsbG8gV29ybGQ=')     \u002F\u002F \"Hello World\"\n",[209,420,422],{"class":211,"line":421},6,[209,423,407],{"emptyLinePlaceholder":406},[209,425,427],{"class":211,"line":426},7,[209,428,429],{},"\u002F\u002F For Unicode text (btoa only handles Latin-1)\n",[209,431,433],{"class":211,"line":432},8,[209,434,435],{},"const encode = (str) => btoa(new TextEncoder().encode(str).reduce((s, b) => s + String.fromCharCode(b), ''));\n",[209,437,439],{"class":211,"line":438},9,[209,440,441],{},"const decode = (b64) => new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));\n",[194,443,445],{"id":444},"python","Python",[75,447,450],{"className":448,"code":449,"language":444,"meta":83,"style":83},"language-python shiki shiki-themes github-light github-dark","import base64\n\n# Encode\nbase64.b64encode(b'Hello World')        # b'SGVsbG8gV29ybGQ='\n\n# Decode\nbase64.b64decode('SGVsbG8gV29ybGQ=')    # b'Hello World'\n\n# URL-safe\nbase64.urlsafe_b64encode(b'data')       # b'ZGF0YQ=='\n",[31,451,452,457,461,466,471,475,480,485,489,494],{"__ignoreMap":83},[209,453,454],{"class":211,"line":212},[209,455,456],{},"import base64\n",[209,458,459],{"class":211,"line":320},[209,460,407],{"emptyLinePlaceholder":406},[209,462,463],{"class":211,"line":334},[209,464,465],{},"# Encode\n",[209,467,468],{"class":211,"line":345},[209,469,470],{},"base64.b64encode(b'Hello World')        # b'SGVsbG8gV29ybGQ='\n",[209,472,473],{"class":211,"line":415},[209,474,407],{"emptyLinePlaceholder":406},[209,476,477],{"class":211,"line":421},[209,478,479],{},"# Decode\n",[209,481,482],{"class":211,"line":426},[209,483,484],{},"base64.b64decode('SGVsbG8gV29ybGQ=')    # b'Hello World'\n",[209,486,487],{"class":211,"line":432},[209,488,407],{"emptyLinePlaceholder":406},[209,490,491],{"class":211,"line":438},[209,492,493],{},"# URL-safe\n",[209,495,497],{"class":211,"line":496},10,[209,498,499],{},"base64.urlsafe_b64encode(b'data')       # b'ZGF0YQ=='\n",[194,501,503],{"id":502},"command-line","Command Line",[75,505,509],{"className":506,"code":507,"language":508,"meta":83,"style":83},"language-bash shiki shiki-themes github-light github-dark","# Encode\necho -n 'Hello World' | base64\n\n# Decode\necho 'SGVsbG8gV29ybGQ=' | base64 -d\n","bash",[31,510,511,516,534,538,542],{"__ignoreMap":83},[209,512,513],{"class":211,"line":212},[209,514,465],{"class":515},"sJ8bj",[209,517,518,521,524,527,531],{"class":211,"line":320},[209,519,520],{"class":251},"echo",[209,522,523],{"class":251}," -n",[209,525,526],{"class":229}," 'Hello World'",[209,528,530],{"class":529},"szBVR"," |",[209,532,533],{"class":223}," base64\n",[209,535,536],{"class":211,"line":334},[209,537,407],{"emptyLinePlaceholder":406},[209,539,540],{"class":211,"line":345},[209,541,479],{"class":515},[209,543,544,546,549,551,554],{"class":211,"line":415},[209,545,520],{"class":251},[209,547,548],{"class":229}," 'SGVsbG8gV29ybGQ='",[209,550,530],{"class":529},[209,552,553],{"class":223}," base64",[209,555,556],{"class":251}," -d\n",[17,558,560],{"id":559},"common-mistakes","Common Mistakes",[562,563,564,582,588,597],"ol",{},[28,565,566,574,575,577,578,581],{},[567,568,569,570,573],"strong",{},"Using ",[31,571,572],{},"btoa()"," with Unicode"," — ",[31,576,572],{}," only handles Latin-1 characters. Encoding emoji or non-Latin text throws an error. Use ",[31,579,580],{},"TextEncoder"," first.",[28,583,584,587],{},[567,585,586],{},"Double encoding"," — encoding data that is already Base64-encoded. The output is valid Base64 but decoding once gives you Base64 text, not the original data.",[28,589,590,593,594,596],{},[567,591,592],{},"Missing padding"," — some systems strip ",[31,595,61],{}," padding. Most decoders handle this, but some strict parsers reject unpadded input.",[28,598,599,602,603,183,605,607,608,183,610,612],{},[567,600,601],{},"Standard vs URL-safe confusion"," — using ",[31,604,51],{},[31,606,55],{}," in URLs causes parsing errors. Use Base64url (",[31,609,148],{},[31,611,151],{},") for anything that goes in a URL or filename.",[17,614,616],{"id":615},"try-it","Try It",[10,618,619,624],{},[620,621,623],"a",{"href":622},"\u002Ftools\u002Fencoder-decoder","StackCache Base64 Encoder & Decoder"," converts between text and Base64 (standard and URL-safe), URL encoding, and HTML entities — all locally in your browser with no upload.",[626,627,628],"style",{},"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 .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 pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":83,"searchDepth":320,"depth":320,"links":630},[631,632,633,639,644,649,650],{"id":19,"depth":320,"text":20},{"id":92,"depth":320,"text":93},{"id":191,"depth":320,"text":192,"children":634},[635,636,637,638],{"id":196,"depth":334,"text":197},{"id":271,"depth":334,"text":272},{"id":294,"depth":334,"text":295},{"id":301,"depth":334,"text":302},{"id":351,"depth":320,"text":352,"children":640},[641,642,643],{"id":355,"depth":334,"text":356},{"id":362,"depth":334,"text":363},{"id":369,"depth":334,"text":370},{"id":380,"depth":320,"text":381,"children":645},[646,647,648],{"id":384,"depth":334,"text":385},{"id":444,"depth":334,"text":445},{"id":502,"depth":334,"text":503},{"id":559,"depth":320,"text":560},{"id":615,"depth":320,"text":616},"Guides","2026-09-08","Learn what Base64 encoding is, how it works, when to use it, and common misconceptions. Includes examples in JavaScript, Python, and the command line.","md",{},"\u002Fblog\u002Fbase64-encoding-when-and-why",{"title":5,"description":653},"blog\u002Fbase64-encoding-when-and-why","encoder-decoder",null,"otS6m68e5moQQ2tRw31iYs-UML6OEgTNAiXhmoLTzX4",1788868139305]