{"id":16,"date":"2026-03-19T14:32:10","date_gmt":"2026-03-19T14:32:10","guid":{"rendered":"https:\/\/netguide.io\/tools\/?p=16"},"modified":"2026-03-19T14:32:10","modified_gmt":"2026-03-19T14:32:10","slug":"base64-encoder-decoder","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/base64-encoder-decoder\/","title":{"rendered":"Base64 Encoder \/ Decoder"},"content":{"rendered":"\n<div class=\"wp-b64-container\">\n    <h3 class=\"wp-b64-title\">Base64 Converter<\/h3>\n\n    <div class=\"wp-b64-group\">\n        <label>Input Text \/ Base64<\/label>\n        <textarea id=\"wp-b64-input\" placeholder=\"Type or paste here...\" oninput=\"autoProcess()\"><\/textarea>\n    <\/div>\n\n    <div class=\"wp-b64-actions\">\n        <button onclick=\"processB64('encode')\" class=\"btn-primary\">Encode to Base64<\/button>\n        <button onclick=\"processB64('decode')\" class=\"btn-secondary\">Decode from Base64<\/button>\n    <\/div>\n\n    <div class=\"wp-b64-group\">\n        <label>Result<\/label>\n        <textarea id=\"wp-b64-output\" readonly placeholder=\"Result will appear here...\"><\/textarea>\n    <\/div>\n\n    <div class=\"wp-b64-footer\">\n        <button onclick=\"copyToClipboard()\" id=\"btn-copy\">Copy Result<\/button>\n        <button onclick=\"clearAll()\" class=\"btn-danger\">Clear<\/button>\n    <\/div>\n\n    <div id=\"wp-b64-error\" class=\"wp-b64-error-msg\">Invalid Base64 input!<\/div>\n\n    <style>\n        .wp-b64-container { max-width: 100%; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 10px; font-family: -apple-system, sans-serif; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }\n        .wp-b64-title { margin: 0 0 15px 0; color: #2271b1; font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n        .wp-b64-group { margin-bottom: 15px; }\n        .wp-b64-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #666; }\n        .wp-b64-group textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace; font-size: 13px; resize: vertical; box-sizing: border-box; }\n        .wp-b64-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }\n        \n        \/* Buttons *\/\n        .wp-b64-container button { padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.2s; }\n        .btn-primary { background: #2271b1; color: #fff; }\n        .btn-primary:hover { background: #135e96; }\n        .btn-secondary { background: #f0f6fb; color: #2271b1; border: 1px solid #2271b1 !important; }\n        .btn-secondary:hover { background: #e1edf7; }\n        .btn-danger { background: #f9f9f9; color: #d63638; border: 1px solid #d63638 !important; }\n        #btn-copy { background: #46b450; color: #fff; flex-grow: 2; }\n        #btn-copy:hover { background: #3da047; }\n        \n        .wp-b64-footer { display: flex; gap: 10px; }\n        .wp-b64-error-msg { display: none; color: #d63638; font-size: 12px; margin-top: 10px; font-weight: bold; text-align: center; }\n        \n        #wp-b64-output { background: #f9f9f9; border-color: #eee; }\n    <\/style>\n\n    <script>\n        const inputArea = document.getElementById('wp-b64-input');\n        const outputArea = document.getElementById('wp-b64-output');\n        const errorMsg = document.getElementById('wp-b64-error');\n\n        function processB64(mode) {\n            errorMsg.style.display = 'none';\n            const val = inputArea.value.trim();\n            if (!val) return;\n\n            try {\n                if (mode === 'encode') {\n                    outputArea.value = btoa(unescape(encodeURIComponent(val)));\n                } else {\n                    outputArea.value = decodeURIComponent(escape(atob(val)));\n                }\n            } catch (e) {\n                errorMsg.style.display = 'block';\n                outputArea.value = '';\n            }\n        }\n\n        function copyToClipboard() {\n            if (!outputArea.value) return;\n            navigator.clipboard.writeText(outputArea.value).then(() => {\n                const btn = document.getElementById('btn-copy');\n                const originalText = btn.innerText;\n                btn.innerText = 'Copied!';\n                setTimeout(() => btn.innerText = originalText, 2000);\n            });\n        }\n\n        function clearAll() {\n            inputArea.value = '';\n            outputArea.value = '';\n            errorMsg.style.display = 'none';\n        }\n\n        \/\/ Feature: Automatically detect if input is likely Base64 and suggest action? \n        \/\/ For now, keep it manual to avoid confusion.\n    <\/script>\n<\/div>\n\n\n\n<p>Hier ist der passende Begleittext f\u00fcr dein Base64-Tool, strukturiert im gleichen Stil wie beim Ceph-Rechner. Zuerst die Bedienung, dann die technische Erkl\u00e4rung und zum Schluss wichtige Sicherheitshinweise.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Erl\u00e4uterung der Funktionen<\/h2>\n\n\n\n<p>Dieses Tool hilft dir dabei, Daten schnell und unkompliziert zwischen dem Standard-Textformat (UTF-8) und dem Base64-Format zu konvertieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Input-Feld:<\/strong> Hier f\u00fcgst du den Text ein, den du umwandeln m\u00f6chtest. Wenn du dekodieren willst, muss hier die Base64-Zeichenfolge (meist endend auf <code>==<\/code>) hinein.<\/li>\n\n\n\n<li><strong>Encode to Base64:<\/strong> Verwandelt deinen lesbaren Text in einen Base64-String. Unser Tool unterst\u00fctzt dabei auch Sonderzeichen und Emojis (UTF-8).<\/li>\n\n\n\n<li><strong>Decode from Base64:<\/strong> Verwandelt eine Base64-Zeichenfolge zur\u00fcck in lesbaren Text. Sollte der Code fehlerhaft sein, erscheint ein Warnhinweis.<\/li>\n\n\n\n<li><strong>Copy Result:<\/strong> Kopiert das Ergebnis mit einem Klick in deine Zwischenablage.<\/li>\n\n\n\n<li><strong>Clear:<\/strong> Leert beide Felder f\u00fcr eine neue Eingabe.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist Base64?<\/h2>\n\n\n\n<p>Base64 ist ein Verfahren zur <strong>Kodierung von Bin\u00e4rdaten in eine Textzeichenfolge<\/strong>. Es wird nicht verwendet, um Daten zu verstecken oder zu verschl\u00fcsseln, sondern um sie sicher zu transportieren.<\/p>\n\n\n\n<p>Der Name leitet sich von den 64 Zeichen ab, die zur Darstellung der Daten verwendet werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gro\u00dfbuchstaben (A-Z)<\/li>\n\n\n\n<li>Kleinbuchstaben (a-z)<\/li>\n\n\n\n<li>Ziffern (0-9)<\/li>\n\n\n\n<li>Die Sonderzeichen <code>+<\/code> und <code>\/<\/code><\/li>\n\n\n\n<li>Das Gleichheitszeichen <code>=<\/code> am Ende dient als &#8220;Padding&#8221; (F\u00fcllzeichen).<\/li>\n<\/ul>\n\n\n\n<p>Da viele \u00e4ltere \u00dcbertragungsprotokolle (wie E-Mail oder HTTP-Header) Probleme mit bin\u00e4ren Daten oder speziellen Steuerzeichen haben, werden diese Daten in &#8220;sicheres&#8221; Base64 umgewandelt. So kommen sie garantiert unver\u00e4ndert beim Empf\u00e4nger an.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Wichtige Tipps &amp; Sicherheit<\/h2>\n\n\n\n<p>Obwohl Base64 im Web-Alltag extrem n\u00fctzlich ist, gibt es ein paar Dinge zu beachten:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Keine Verschl\u00fcsselung:<\/strong> Base64 ist <strong>keine Verschl\u00fcsselung<\/strong>. Jeder kann einen Base64-String in Sekunden zur\u00fcck\u00fcbersetzen. \u00dcbermittle niemals Passw\u00f6rter oder sensible Daten im Base64-Format, ohne eine zus\u00e4tzliche echte Verschl\u00fcsselung (wie SSL\/TLS oder AES) zu nutzen.<\/li>\n\n\n\n<li><strong>Datengr\u00f6\u00dfe:<\/strong> Durch die Umwandlung in Base64 w\u00e4chst die Datenmenge um etwa <strong>33 %<\/strong>. Wenn du sehr gro\u00dfe Dateien (wie hochaufl\u00f6sende Bilder) als Base64-String direkt in HTML einbettest, kann das die Ladezeit deiner Website negativ beeinflussen.<\/li>\n\n\n\n<li><strong>Anwendungsbereiche:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Data-URIs:<\/strong> Einbetten von kleinen Bildern direkt im CSS oder HTML-Code.<\/li>\n\n\n\n<li><strong>Basic Auth:<\/strong> \u00dcbertragung von Anmeldedaten in HTTP-Headern.<\/li>\n\n\n\n<li><strong>Web-Entwicklung:<\/strong> Speichern von komplexen Konfigurationen in JSON-Dateien, die Sonderzeichen enthalten k\u00f6nnten.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>UTF-8 Support:<\/strong> Standard-Base64-Funktionen in Browsern haben oft Probleme mit Sonderzeichen (z.B. <code>\u00f6<\/code>, <code>\u20ac<\/code> oder <code>\ud83d\ude80<\/code>). Dieses Widget nutzt einen speziellen Logik-Baustein, um sicherzustellen, dass deine Umlaute beim Kodieren nicht &#8220;zerschossen&#8221; werden.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Base64 Converter Input Text \/ Base64 Encode to Base64 Decode from Base64 Result Copy Result Clear Invalid Base64 input! Hier [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[25,29,27],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-decoder-encoder","tag-base64","tag-decoder","tag-encoder"],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":2,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/16\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}