{"id":65910,"date":"2026-10-14T12:25:43","date_gmt":"2026-10-14T06:55:43","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=65910"},"modified":"2026-10-14T14:30:18","modified_gmt":"2026-10-14T09:00:18","slug":"image-to-base64","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-to-base64\/","title":{"rendered":"Image to Base64 Converter (and Base64 to Image)"},"content":{"rendered":"<p>Convert any <strong>image to Base64<\/strong> text that you can paste straight into HTML, CSS, JSON or an email template. Choose a data URL, raw Base64, a ready-made &lt;img&gt; tag or a CSS background rule. You can also paste Base64 text to turn it back into an image and download it.<\/p>\n<style>.qt-tool{--qt-accent:var(--global-palette1,#2B6CB0);--qt-accent2:var(--global-palette2,#215387);--qt-ink:var(--global-palette3,#1A202C);--qt-muted:var(--global-palette5,#4A5568);--qt-line:var(--global-palette7,#EDF2F7);--qt-soft:var(--global-palette8,#F7FAFC);--qt-bg:var(--global-palette9,#ffffff);background:#DCE7F3;border:1px solid #AEC3DB;border-radius:12px;padding:20px;margin:0 0 1.75em;color:var(--qt-ink);box-shadow:0 1px 2px rgba(26,32,44,.06)} .qt-tool *{box-sizing:border-box} .qt-tool .qt-label{display:block;font-weight:600;margin:0 0 6px} .qt-tool textarea,.qt-tool input[type=number],.qt-tool input[type=text],.qt-tool input[type=date],.qt-tool input[type=time],.qt-tool input[type=datetime-local],.qt-tool select{width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--qt-ink);background:var(--qt-bg);border:1px solid #CBD5E0;border-radius:8px;padding:10px 12px;margin:0} .qt-tool textarea{min-height:200px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px} .qt-tool textarea.qt-prose{font-family:inherit;font-size:16px} .qt-tool textarea:focus,.qt-tool input:focus,.qt-tool select:focus{outline:2px solid var(--qt-accent);outline-offset:1px;border-color:var(--qt-accent)} .qt-tool .qt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0} .qt-tool .qt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-field label{display:block;font-size:14px;font-weight:600;margin:0 0 4px;color:var(--qt-muted)} .qt-tool .qt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;padding:10px 16px;border-radius:8px;border:1px solid var(--qt-accent);background:var(--qt-accent);color:#fff;cursor:pointer;text-decoration:none;min-height:42px} .qt-tool .qt-btn:hover{background:var(--qt-accent2);border-color:var(--qt-accent2);color:#fff} .qt-tool .qt-btn-ghost{background:var(--qt-bg);color:var(--qt-accent)} .qt-tool .qt-btn-ghost:hover{background:var(--qt-line);color:var(--qt-accent2)} .qt-tool .qt-btn-sm{font-size:14px;padding:6px 10px;min-height:34px} .qt-tool .qt-btn-big{font-size:17px;padding:12px 22px} .qt-tool .qt-check{display:flex;align-items:center;gap:8px;font-size:15px;margin:0;cursor:pointer} .qt-tool .qt-check input{width:18px;height:18px;margin:0;accent-color:var(--qt-accent)} .qt-tool .qt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:12px 0 0} .qt-tool .qt-stat{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:10px;text-align:center} .qt-tool .qt-num{display:block;font-size:24px;font-weight:700;line-height:1.2;color:var(--qt-accent2);font-variant-numeric:tabular-nums} .qt-tool .qt-lab{display:block;font-size:13px;color:var(--qt-muted);margin-top:2px} .qt-tool .qt-sub{font-weight:700;margin:16px 0 6px} .qt-tool .qt-note{font-size:13px;color:var(--qt-muted);margin:14px 0 0} .qt-tool .qt-status{min-height:1.4em;font-size:14px;color:var(--qt-accent2);margin:8px 0 0} .qt-tool .qt-error{color:#C53030} .qt-tool .qt-kw{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:24px;font-size:15px} .qt-tool .qt-kw li{margin:0 0 4px;break-inside:avoid} .qt-tool .qt-kw span{color:var(--qt-muted)} .qt-tool .qt-result{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:18px;margin:12px 0 0;text-align:center;font-size:44px;font-weight:700;line-height:1.25;color:var(--qt-accent2);word-break:break-word;font-variant-numeric:tabular-nums;min-height:94px} .qt-tool .qt-result.qt-many{font-size:22px;text-align:left;line-height:1.6;white-space:pre-wrap} .qt-tool .qt-history{margin:0;padding:0;list-style:none;font-size:14px;color:var(--qt-muted)} .qt-tool .qt-history li{padding:4px 0;border-bottom:1px dashed var(--qt-line);word-break:break-word} .qt-tool .qt-presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .qt-tool .qt-dice{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0;min-height:76px} .qt-tool .qt-die{width:68px;height:68px;border-radius:14px;background:var(--qt-bg);border:2px solid var(--qt-accent);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--qt-ink);box-shadow:0 2px 0 var(--qt-accent2)} .qt-tool .qt-die.qt-pip{font-size:56px;font-weight:400;line-height:1} .qt-tool .qt-die-label{display:block;font-size:11px;font-weight:600;color:var(--qt-muted)} .qt-tool .qt-total{text-align:center;font-size:20px;margin:12px 0 0} .qt-tool .qt-total strong{font-size:32px;color:var(--qt-accent2)} .qt-tool .qt-roll{animation:qtroll .45s ease-out} @keyframes qtroll{0%{transform:rotate(-25deg) scale(.8)}60%{transform:rotate(12deg) scale(1.08)}100%{transform:rotate(0) scale(1)}} .qt-tool .qt-out{background:var(--qt-bg)} .qt-tool p:empty{display:none} .qt-tool p:not(.qt-note){margin:0} .qt-tool .qt-grid:has(.qt-check){grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 16px} .qt-tool .qt-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 18px} .qt-tool .qt-sw{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;border:1px solid rgba(0,0,0,.12);border-radius:8px;min-height:64px;padding:6px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;text-transform:uppercase;transition:transform .1s} .qt-tool .qt-sw:hover,.qt-tool .qt-sw:focus{transform:scale(1.06);outline:2px solid var(--qt-accent);outline-offset:1px} .qt-tool .qt-group{font-size:15px;font-weight:700;margin:14px 0 2px} .qt-tool .qt-seg{display:inline-flex;border:1px solid var(--qt-accent);border-radius:8px;overflow:hidden} .qt-tool .qt-seg button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border:0;background:var(--qt-bg);color:var(--qt-accent);cursor:pointer} .qt-tool .qt-seg button[aria-pressed=true]{background:var(--qt-accent);color:#fff} .qt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 1.75em} .qt-card{display:block;background:var(--global-palette8,#F7FAFC);border:1px solid #D5E0EC;border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--global-palette3,#1A202C);transition:transform .12s,box-shadow .12s} .qt-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,32,44,.10);color:var(--global-palette3,#1A202C)} .qt-card strong{display:block;font-size:18px;color:var(--global-palette1,#2B6CB0);margin:0 0 4px} .qt-card span{display:block;font-size:15px;color:var(--global-palette5,#4A5568);line-height:1.5} @media (max-width:600px){.qt-tool{padding:14px}.qt-tool .qt-swatches{grid-template-columns:repeat(3,1fr)}.qt-tool .qt-kw{columns:1}.qt-tool .qt-result{font-size:36px}.qt-tool .qt-die{width:58px;height:58px;font-size:24px}.qt-tool .qt-die.qt-pip{font-size:48px}} .qt-tool .qt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .qt-tool .qt-two textarea{min-height:180px} .qt-tool .qt-diff{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;margin:12px 0 0;max-height:560px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55} .qt-tool .qt-dl{display:grid;grid-template-columns:3.2em 3.2em 1.4em 1fr;min-width:0} .qt-tool .qt-ln{color:#A0AEC0;text-align:right;padding:0 6px;user-select:none;border-right:1px solid var(--qt-line)} .qt-tool .qt-sign{text-align:center;color:var(--qt-muted);user-select:none} .qt-tool .qt-code{white-space:pre-wrap;word-break:break-word;padding:0 8px 0 2px} .qt-tool .qt-add{background:#F0FFF4} .qt-tool .qt-add .qt-sign{color:#2F855A;font-weight:700} .qt-tool .qt-del{background:#FFF5F5} .qt-tool .qt-del .qt-sign{color:#C53030;font-weight:700} .qt-tool .qt-wadd{background:#9AE6B4;color:inherit;border-radius:2px;padding:0} .qt-tool .qt-wdel{background:#FEB2B2;color:inherit;border-radius:2px;padding:0;text-decoration:line-through} .qt-tool .qt-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;word-break:break-all;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:4px 0 0;min-height:2.4em;color:var(--qt-ink)} .qt-tool .qt-big{font-size:18px;letter-spacing:.04em} .qt-tool .qt-explain{font-size:14px;color:var(--qt-muted);text-align:center;margin:6px 0 0;min-height:1.2em} .qt-tool .qt-result.qt-roman{font-size:32px} .qt-tool .qt-dateout{font-size:24px;font-weight:700;color:var(--qt-accent2);letter-spacing:.03em} .qt-ref{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.5em} .qt-ref th,.qt-ref td{border:1px solid #E2E8F0;padding:6px 10px;text-align:left} .qt-ref th{background:#F7FAFC} @media (max-width:600px){.qt-tool .qt-two{grid-template-columns:1fr}.qt-tool .qt-dl{grid-template-columns:2.6em 2.6em 1.2em 1fr}} .qt-tool .qt-coinwrap{display:flex;justify-content:center;margin:8px 0 0;perspective:900px} .qt-tool .qt-coin{position:relative;width:150px;height:150px;cursor:pointer;transform-style:preserve-3d;border-radius:50%} .qt-tool .qt-coin:focus{outline:3px solid var(--qt-accent);outline-offset:4px} .qt-tool .qt-face{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#FFF3B0,#F6C343 45%,#C9931E 100%);border:6px solid #B7791F;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.18);color:#744210;font-weight:800} .qt-tool .qt-face b{font-size:56px;line-height:1} .qt-tool .qt-face small{font-size:13px;letter-spacing:.12em;margin-top:2px} .qt-tool .qt-face-t{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#F7FAFC,#CBD5E0 45%,#8A99AD 100%);border-color:#718096;color:#2D3748} .qt-tool .qt-coin.qt-show-t{transform:rotateY(180deg)} .qt-tool .qt-coin.qt-flip-h{animation:qtfliph 1s cubic-bezier(.2,.7,.3,1) forwards} .qt-tool .qt-coin.qt-flip-t{animation:qtflipt 1s cubic-bezier(.2,.7,.3,1) forwards} @keyframes qtfliph{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-40px) rotateY(900deg)}100%{transform:translateY(0) rotateY(1800deg)}} @keyframes qtflipt{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-40px) rotateY(990deg)}100%{transform:translateY(0) rotateY(1980deg)}} .qt-tool .qt-small{font-size:15px;font-weight:400;color:var(--qt-muted);text-align:center;margin:6px 0 0;word-break:break-word} .qt-tool .qt-wheelbox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start} .qt-tool .qt-wheel{position:relative;width:100%;max-width:440px;margin:0 auto} .qt-tool .qt-wheel canvas{display:block;width:100%;height:auto;aspect-ratio:1\/1;cursor:pointer;border-radius:50%} .qt-tool .qt-wheel canvas:focus{outline:3px solid var(--qt-accent);outline-offset:3px} .qt-tool .qt-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #1A202C;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3));z-index:2} .qt-tool .qt-wheelbox textarea{min-height:240px} .qt-tool .qt-result.qt-pop{animation:qtpop .4s ease-out} @keyframes qtpop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}} .qt-tool .qt-btn[disabled]{opacity:.6;cursor:wait} .qt-tool .qt-lamp{width:46px;height:46px;border-radius:50%;background:#CBD5E0;border:3px solid #A0AEC0;flex:0 0 auto} .qt-tool .qt-lamp.qt-on{background:#F6E05E;border-color:#D69E2E;box-shadow:0 0 18px 6px rgba(246,224,94,.8)} .qt-tool .qt-result.qt-letters{font-size:72px} .qt-tool .qt-clock{font-size:56px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--qt-ink);background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:14px;margin:12px 0 0;letter-spacing:.02em} .qt-tool .qt-clock.qt-done{color:#C53030;animation:qtpop .4s ease-out} .qt-tool .qt-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .qt-tool .qt-tabs button{font:inherit;font-size:15px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--qt-accent);background:var(--qt-bg);color:var(--qt-accent);cursor:pointer} .qt-tool .qt-tabs button[aria-selected=true]{background:var(--qt-accent);color:#fff} .qt-tool .qt-sent{font-size:17px;line-height:2.4} .qt-tool .qt-sent input{display:inline-block;width:7em;padding:6px 8px;margin:0 4px} .qt-tool .qt-ans{font-weight:700;color:var(--qt-accent2);font-size:20px;margin-left:6px} .qt-tool .qt-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 0;background:var(--qt-bg)} .qt-tool .qt-table th,.qt-tool .qt-table td{border:1px solid #D5E0EC;padding:6px 8px;text-align:left;word-break:break-all;vertical-align:top} .qt-tool .qt-table th{background:#F1F5FA;font-weight:700;word-break:normal} .qt-tool .qt-ok{color:#2F855A;font-weight:700} .qt-tool .qt-ip{font-size:38px;font-weight:700;text-align:center;color:var(--qt-accent2);word-break:break-all;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:16px;margin:0} @media (prefers-reduced-motion:reduce){.qt-tool .qt-coin.qt-flip-h,.qt-tool .qt-coin.qt-flip-t{animation:none}.qt-tool .qt-coin.qt-flip-t{transform:rotateY(180deg)}} @media (max-width:700px){.qt-tool .qt-wheelbox{grid-template-columns:1fr}} @media (max-width:600px){.qt-tool .qt-clock{font-size:40px}.qt-tool .qt-ip{font-size:26px}} .qt-tool .qt-srow{display:flex;gap:10px;align-items:center;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:8px 0 0} .qt-tool .qt-sname{font-size:12px;color:var(--qt-muted);flex:0 0 120px} .qt-tool .qt-sval{flex:1 1 auto;font-size:20px;line-height:1.4;word-break:break-word;min-width:0} @media (max-width:600px){.qt-tool .qt-srow{flex-wrap:wrap}.qt-tool .qt-sname{flex-basis:100%}} .qt-tool .qt-meter{height:22px;background:#CBD5E0;border-radius:11px;overflow:hidden;margin:12px 0 0} .qt-tool .qt-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#38A169 0,#38A169 60%,#D69E2E 80%,#C53030 100%);transition:width .06s linear} .qt-tool video,.qt-tool canvas.qt-snap{display:block;width:100%;max-height:420px;background:#1A202C;border-radius:10px;margin:12px 0 0;object-fit:contain} .qt-tool video.qt-mirror{transform:scaleX(-1)} .qt-tool .qt-kb{display:flex;flex-direction:column;gap:4px;margin:12px 0 0;padding:10px;background:#2D3748;border-radius:10px;outline:none;overflow-x:auto} .qt-tool .qt-kb:focus{box-shadow:0 0 0 3px var(--qt-accent)} .qt-tool .qt-krow{display:flex;gap:4px;min-width:640px} .qt-tool .qt-key{flex:1 1 0;height:36px;border-radius:5px;background:#4A5568;color:#E2E8F0;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;overflow:hidden} .qt-tool .qt-key.qt-kok{background:#2F855A;color:#fff} .qt-tool .qt-key.qt-kon{background:#F6E05E;color:#1A202C} .qt-tool .qt-click{display:flex;align-items:center;justify-content:center;min-height:240px;margin:12px 0 0;border-radius:12px;background:var(--qt-accent);color:#fff;font-size:26px;font-weight:700;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;padding:16px} .qt-tool .qt-click.qt-wait{background:#C53030} .qt-tool .qt-click.qt-go{background:#2F855A} .qt-tool .qt-click.qt-off{background:#718096;cursor:default} .qt-full{position:fixed;inset:0;z-index:999999;cursor:none} .qt-full-tip{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000000;background:rgba(0,0,0,.7);color:#fff;font:14px\/1.4 sans-serif;padding:8px 14px;border-radius:8px} .qt-tool .qt-gparow{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;align-items:end} @media (max-width:600px){.qt-tool .qt-gparow{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px dashed var(--qt-line)}} .qt-tool .qt-hrrow{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px} @media (max-width:600px){.qt-tool .qt-hrrow{grid-template-columns:repeat(2,minmax(0,1fr))}} .qt-tool .qt-tally{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:12px;text-align:center} .qt-tool .qt-tally input{text-align:center;font-weight:600;border-color:transparent;background:transparent} .qt-tool .qt-tally .qt-tnum{font-size:56px;font-weight:700;line-height:1.1;color:var(--qt-accent2);font-variant-numeric:tabular-nums;cursor:pointer;user-select:none} .qt-tool .qt-tallies{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-team{background:var(--qt-bg);border:1px solid var(--qt-line);border-top:4px solid var(--qt-accent);border-radius:10px;padding:10px 12px} .qt-tool .qt-team h3{font-size:16px;margin:0 0 6px} .qt-tool .qt-team ol{margin:0;padding-left:1.3em;font-size:15px} .qt-tool .qt-words{font-size:22px;line-height:1.75;height:5.6em;overflow:hidden;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:8px 14px;margin:12px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .qt-tool .qt-words span{padding:1px 3px;border-radius:4px} .qt-tool .qt-words .qt-cur{background:#FEFCBF} .qt-tool .qt-words .qt-wok{color:#2F855A} .qt-tool .qt-words .qt-wbad{color:#C53030;text-decoration:underline} .qt-tool .qt-words .qt-cur.qt-wtyping{background:#FED7D7} .qt-tool .qt-wlist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px} .qt-tool .qt-wlist span{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:6px;padding:3px 8px;font-size:15px;font-weight:600} .qt-tool .qt-wlist sub{font-size:10px;color:var(--qt-muted);margin-left:2px} .qt-tool h3.qt-wh{font-size:17px;margin:14px 0 2px} .qt-tool input[type=range]{width:100%;accent-color:var(--qt-accent)} .qt-tool .qt-pw{display:flex;gap:8px;align-items:center;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:8px 0 0} .qt-tool .qt-pw code{flex:1 1 auto;font-size:17px;word-break:break-all;background:none;padding:0;min-width:0} .qt-tool .qt-strength{height:10px;border-radius:5px;background:#CBD5E0;overflow:hidden;margin:10px 0 0} .qt-tool .qt-strength span{display:block;height:100%;width:0;transition:width .2s} .qt-tool input[type=color]{width:100%;height:48px;padding:2px;border:1px solid #CBD5E0;border-radius:8px;background:var(--qt-bg);cursor:pointer} .qt-tool .qt-swatch{height:110px;border-radius:10px;border:1px solid rgba(0,0,0,.15);margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:24px;font-size:20px;font-weight:700} .qt-tool .qt-over{color:#C53030;font-weight:700} .qt-tool .qt-drop{border:2px dashed var(--qt-accent);border-radius:10px;padding:28px 12px;text-align:center;cursor:pointer;background:var(--qt-bg);margin:0 0 12px} .qt-tool .qt-drop.qt-hover{background:#E3EEFF} .qt-tool .qt-prev{display:block;max-width:100%;max-height:380px;margin:12px auto 0;border:1px solid var(--qt-line);border-radius:8px;background:repeating-conic-gradient(#E2E8F0 0 25%,#fff 0 50%) 0 0\/16px 16px} .qt-tool .qt-lb{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;font-size:17px;background:#fff;color:#1A202C;border:2px solid var(--qt-accent);margin:3px} .qt-tool .qt-lb.qt-bonus{background:#E53E3E;color:#fff;border-color:#E53E3E} .qt-tool .qt-8{width:230px;height:230px;border-radius:50%;margin:16px auto;background:radial-gradient(circle at 35% 30%,#666,#000 62%);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35)} .qt-tool .qt-8 span{width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,#2747a8,#0b1a4a);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;padding:16px;box-sizing:border-box;line-height:1.25;transition:opacity .3s} .qt-tool .qt-shake{animation:qt-shake .7s} @keyframes qt-shake{0%,100%{transform:translate(0)}20%{transform:translate(-12px,4px) rotate(-6deg)}40%{transform:translate(10px,-6px) rotate(5deg)}60%{transform:translate(-8px,6px) rotate(-4deg)}80%{transform:translate(6px,-3px) rotate(3deg)}} .qt-tool .qt-grid>.qt-field{display:flex;flex-direction:column;justify-content:flex-end} .qt-tool .qt-field input[type=range]{height:46px;padding:0 10px} .qt-tool .qt-field input[type=color]{height:46px} .qt-tool .qt-drop .qt-sub{font-weight:400;font-size:14px;margin:4px 0 0} .qt-tool .qt-board{display:grid;gap:5px;margin:14px auto 0;max-width:100%;user-select:none;-webkit-user-select:none;touch-action:manipulation} .qt-tool .qt-cell{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #AEC3DB;border-radius:6px;font-weight:700;cursor:pointer;aspect-ratio:1;font-size:clamp(14px,4vw,26px);color:#1A202C;padding:0;min-width:0;font-family:inherit;line-height:1} .qt-tool .qt-cell:disabled{cursor:default} .qt-tool .qt-win{background:#C6F6D5;border-color:#38A169} .qt-tool .qt-sel{background:#BEE3F8;border-color:#3182CE} .qt-tool .qt-bad{background:#FED7D7;border-color:#E53E3E} .qt-tool select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:40px;cursor:pointer;border:2px solid #90B4DA;font-weight:600;background-color:#fff;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%232B6CB0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 14px center;background-size:14px 9px} .qt-tool select:hover{border-color:var(--qt-accent);background-color:#F4F8FD} .qt-tool select::-ms-expand{display:none} .qt-next{margin:0 0 1.75em} .qt-next .qt-next-h{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4A5568;margin:0 0 8px} .qt-next-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .qt-next-g a{display:flex;align-items:center;min-height:46px;padding:9px 12px;border:1px solid #AEC3DB;border-radius:8px;background:#F4F8FD;color:#215387;font-weight:600;font-size:15px;line-height:1.3;text-decoration:none} .qt-next-g a:hover,.qt-next-g a:focus{background:#E3EEFF;border-color:#2B6CB0;text-decoration:none} @media (max-width:600px){.qt-next-g{grid-template-columns:repeat(2,1fr)}}<\/style>\n<div class=\"qt-tool\" id=\"qt-ib\">\n<div class=\"qt-drop\" id=\"qt-ib-drop\" role=\"button\" tabindex=\"0\"><strong>Choose an image<\/strong> or drag and drop it here<br \/><span class=\"qt-sub\">You can also paste an image with Ctrl+V. JPG, PNG, WebP, GIF and more.<\/span><\/div>\n<p><input type=\"file\" id=\"qt-ib-file\" accept=\"image\/*\" style=\"display:none\"><\/p>\n<div class=\"qt-grid\">\n<div class=\"qt-field\"><label for=\"qt-ib-kind\">Output<\/label><select id=\"qt-ib-kind\"><option value=\"url\" selected>Data URL<\/option><option value=\"raw\">Base64 only<\/option><option value=\"img\">HTML img tag<\/option><option value=\"css\">CSS background-image<\/option><option value=\"md\">Markdown<\/option><\/select><\/div>\n<\/div>\n<div class=\"qt-field\"><label for=\"qt-ib-out\">Base64 output<\/label><textarea id=\"qt-ib-out\" rows=\"6\" readonly spellcheck=\"false\"><\/textarea><\/div>\n<div class=\"qt-stats\">\n<div class=\"qt-stat\"><span class=\"qt-num\" id=\"qt-ib-a\">&#8211;<\/span><span class=\"qt-lab\">Image size<\/span><\/div>\n<div class=\"qt-stat\"><span class=\"qt-num\" id=\"qt-ib-b\">&#8211;<\/span><span class=\"qt-lab\">Base64 length<\/span><\/div>\n<\/div>\n<div class=\"qt-row\"><button type=\"button\" class=\"qt-btn\" id=\"qt-ib-copy\">Copy output<\/button><\/div>\n<div class=\"qt-status\" id=\"qt-ib-status\" aria-live=\"polite\">Choose an image to start.<\/div>\n<p class=\"qt-sub\">Base64 to image<\/p>\n<div class=\"qt-field\"><label for=\"qt-ib-in\">Paste Base64 or a data URL<\/label><textarea id=\"qt-ib-in\" rows=\"4\" spellcheck=\"false\"><\/textarea><\/div>\n<div class=\"qt-row\"><button type=\"button\" class=\"qt-btn qt-btn-ghost\" id=\"qt-ib-show\">Show image<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost\" id=\"qt-ib-dl\" disabled>Download image<\/button><\/div>\n<div class=\"qt-status\" id=\"qt-ib-status2\" aria-live=\"polite\"><\/div>\n<p><img class=\"qt-prev\" id=\"qt-ib-prev\" alt=\"Image preview\" hidden><\/p>\n<p class=\"qt-note\">Images are processed in your browser. Nothing is uploaded to or stored on our server.<\/p>\n<\/div>\n<p><script>(function () { function qtReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn); } else { fn(); } } function qtCopy(text, statusEl, okMsg) { function done(ok) { if (statusEl) { statusEl.textContent = ok ? (okMsg || 'Copied to clipboard.') : 'Press Ctrl+C (or Cmd+C) to copy.'; } } function fallback() { var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.top = '-1000px'; document.body.appendChild(ta); ta.select(); var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; } document.body.removeChild(ta); done(ok); } if (navigator.clipboard) { if (window.isSecureContext) { navigator.clipboard.writeText(text).then(function () { done(true); }, fallback); return; } } fallback(); } function qtRand32() { var c = window.crypto || window.msCrypto; if (c) { if (c.getRandomValues) { var a = new Uint32Array(1); c.getRandomValues(a); return a[0]; } } return Math.floor(Math.random() * 4294967296); } function qtRandInt(range) { if (range === 4294967296) { return qtRand32(); } var limit = Math.floor(4294967296 \/ range) * range; var x = qtRand32(); while (x >= limit) { x = qtRand32(); } return x % range; } function qtImg(pre, cb) { var inp = document.getElementById(pre + '-file'), drop = document.getElementById(pre + '-drop'); function load(f) { if (!f) { return; } if (!\/^image\\\/\/.test(f.type)) { if (!\/\\.(heic|heif|avif|svg|bmp|ico|tiff?)$\/i.test(f.name)) { cb(null, f, 'That file is not an image.'); return; } } var img = new Image(); img.onload = function () { cb(img, f, ''); }; img.onerror = function () { cb(null, f, 'Your browser cannot open this image type. Try JPG, PNG, WebP or GIF.'); }; img.src = URL.createObjectURL(f); } inp.addEventListener('change', function () { load(inp.files[0]); }); drop.addEventListener('click', function () { inp.click(); }); drop.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); inp.click(); } }); ['dragenter', 'dragover'].forEach(function (t) { drop.addEventListener(t, function (e) { e.preventDefault(); drop.classList.add('qt-hover'); }); }); ['dragleave', 'drop'].forEach(function (t) { drop.addEventListener(t, function (e) { e.preventDefault(); drop.classList.remove('qt-hover'); }); }); drop.addEventListener('drop', function (e) { if (e.dataTransfer.files.length) { load(e.dataTransfer.files[0]); } }); document.addEventListener('paste', function (e) { var it = e.clipboardData ? e.clipboardData.files : null; if (it) { if (it.length) { load(it[0]); } } }); } function qtSize(b) { return b >= 1048576 ? (b \/ 1048576).toFixed(2) + ' MB' : (b \/ 1024).toFixed(1) + ' KB'; } function qtSave(blob, name) { var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; document.body.appendChild(a); a.click(); setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 1500); } function qtDraw(img, w, h, bg) { var sw = img.naturalWidth || img.width, sh = img.naturalHeight || img.height, src = img; while (sw \/ 2 >= w) { if (h > sh \/ 2) { break; } var t = document.createElement('canvas'); t.width = Math.round(sw \/ 2); t.height = Math.round(sh \/ 2); var tc = t.getContext('2d'); tc.imageSmoothingQuality = 'high'; tc.drawImage(src, 0, 0, t.width, t.height); src = t; sw = t.width; sh = t.height; } var c = document.createElement('canvas'); c.width = w; c.height = h; var x = c.getContext('2d'); if (bg) { x.fillStyle = bg; x.fillRect(0, 0, w, h); } x.imageSmoothingQuality = 'high'; x.drawImage(src, 0, 0, w, h); return c; } function qtExt(t) { return { 'image\/jpeg': 'jpg', 'image\/png': 'png', 'image\/webp': 'webp', 'image\/avif': 'avif', 'image\/gif': 'gif' }[t] || 'png'; } function qtBase(n) { return (n || 'image').replace(\/\\.[^.]+$\/, '') || 'image'; } qtReady(function () { var kind = document.getElementById('qt-ib-kind'); if (!kind) { return; } function $(id) { return document.getElementById(id); } var LT = String.fromCharCode(60), data = '', name = 'image', decoded = null; function upd() { if (!data) { return; } var raw = data.slice(data.indexOf(',') + 1), k = kind.value, o = data; if (k === 'raw') { o = raw; } if (k === 'img') { o = LT + 'img src=\"' + data + '\" alt=\"' + name.replace(\/\"\/g, '') + '\">'; } if (k === 'css') { o = 'background-image: url(\"' + data + '\");'; } if (k === 'md') { o = '![' + name + '](' + data + ')'; } $('qt-ib-out').value = o; $('qt-ib-b').textContent = o.length.toLocaleString('en-US'); } qtImg('qt-ib', function (im, f, err) { var st = $('qt-ib-status'); if (!im) { st.textContent = err; st.classList.add('qt-error'); return; } st.classList.remove('qt-error'); name = qtBase(f.name); var rd = new FileReader(); rd.onload = function () { data = String(rd.result); $('qt-ib-a').textContent = qtSize(f.size); upd(); $('qt-ib-prev').src = data; $('qt-ib-prev').hidden = false; st.textContent = f.name + ' converted. Base64 is about a third larger than the file.' + (f.size > 102400 ? ' For images over 100 KB, a normal image file usually loads faster than inline Base64.' : ''); }; rd.readAsDataURL(f); }); kind.addEventListener('change', upd); $('qt-ib-copy').addEventListener('click', function () { qtCopy($('qt-ib-out').value, $('qt-ib-status'), 'Copied.'); }); function sniff(b) { if (\/^\\\/9j\\\/\/.test(b)) { return 'image\/jpeg'; } if (\/^iVBOR\/.test(b)) { return 'image\/png'; } if (\/^R0lG\/.test(b)) { return 'image\/gif'; } if (\/^UklGR\/.test(b)) { return 'image\/webp'; } if (\/^(PHN2|PD94)\/.test(b)) { return 'image\/svg+xml'; } if (\/^AAAA\/.test(b)) { return 'image\/avif'; } if (\/^Qk\/.test(b)) { return 'image\/bmp'; } return 'image\/png'; } $('qt-ib-show').addEventListener('click', function () { var s = $('qt-ib-in').value.trim().replace(\/^url\\([\"']?|[\"']?\\);?$\/g, ''), st = $('qt-ib-status2'); st.classList.remove('qt-error'); var m = s.match(\/^data:([\\w\\\/+.-]+);base64,(.*)$\/i), type, b64; if (m) { type = m[1]; b64 = m[2]; } else { b64 = s; type = sniff(s.replace(\/\\s\/g, '')); } b64 = b64.replace(\/\\s\/g, '').replace(\/-\/g, '+').replace(\/_\/g, '\/'); try { var bin = atob(b64); } catch (e) { st.textContent = 'That is not valid Base64.'; st.classList.add('qt-error'); return; } var u = new Uint8Array(bin.length); for (var i = 0; bin.length > i; i++) { u[i] = bin.charCodeAt(i); } decoded = new Blob([u], { type: type }); var url = URL.createObjectURL(decoded), pv = $('qt-ib-prev'); pv.onload = function () { st.textContent = 'Decoded ' + type + ', ' + pv.naturalWidth + ' \u00d7 ' + pv.naturalHeight + ' px, ' + qtSize(u.length) + '.'; $('qt-ib-dl').disabled = false; }; pv.onerror = function () { st.textContent = 'The Base64 decoded, but it is not an image your browser can show.'; st.classList.add('qt-error'); }; pv.src = url; pv.hidden = false; }); $('qt-ib-dl').addEventListener('click', function () { if (decoded) { qtSave(decoded, 'decoded-image.' + (decoded.type === 'image\/svg+xml' ? 'svg' : qtExt(decoded.type))); } }); }); })();<\/script><\/p>\n<div class=\"qt-next\">\n<p class=\"qt-next-h\">Try another free tool<\/p>\n<div class=\"qt-next-g\"><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-resizer\/\">Image Resizer<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-compressor\/\">Image Compressor<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-converter\/\">Image Converter<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-picker-from-image\/\">Color Picker From Image<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/aspect-ratio-calculator\/\">Aspect Ratio Calculator<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/dns-lookup\/\">DNS Lookup<\/a><\/div>\n<\/div>\n<p><strong>Quick answer:<\/strong> Choose an image and its Base64 data URL appears in the box, starting with <code>data:image\/png;base64,<\/code>. Paste it into an <code>src<\/code> attribute or a CSS <code>url()<\/code> and the image shows without a separate file.<\/p>\n<h2>How to convert an image to Base64<\/h2>\n<ol>\n<li>Click the box to choose an image, drag one in, or paste a screenshot.<\/li>\n<li>Pick the output: a <strong>data URL<\/strong>, <strong>Base64 only<\/strong> for APIs and JSON, a complete <strong>HTML img tag<\/strong>, a <strong>CSS background-image<\/strong> rule or <strong>Markdown<\/strong>.<\/li>\n<li>Click <strong>Copy output<\/strong> and paste it into your code.<\/li>\n<li>To go the other way, paste Base64 text or a data URL in the lower box and click <strong>Show image<\/strong>, then download it.<\/li>\n<\/ol>\n<h2>What is a Base64 image?<\/h2>\n<p>Base64 is a way to write binary data, such as an image file, using only 64 safe text characters: A to Z, a to z, 0 to 9, + and \/. A data URL wraps it with the file type, for example <code>data:image\/jpeg;base64,\/9j\/4AAQ...<\/code>. Browsers treat that text exactly like an image file, so you can put small images directly inside HTML, CSS, SVG, JSON or email code.<\/p>\n<h2>When to use Base64 images<\/h2>\n<ul>\n<li><strong>Good for:<\/strong> tiny icons, logos and placeholders under a few kilobytes, HTML emails that block external images, single-file HTML reports, and APIs that accept images as text.<\/li>\n<li><strong>Not ideal for:<\/strong> photos and large images. Base64 is about 33 percent bigger than the file, cannot be cached separately, and makes your HTML or CSS slower to download and parse.<\/li>\n<\/ul>\n<h2>How to recognise the image type<\/h2>\n<table class=\"qt-ref\">\n<thead>\n<tr>\n<th>Base64 starts with<\/th>\n<th>Image type<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>\/9j\/<\/code><\/td>\n<td>JPEG<\/td>\n<\/tr>\n<tr>\n<td><code>iVBORw0KGgo<\/code><\/td>\n<td>PNG<\/td>\n<\/tr>\n<tr>\n<td><code>R0lGOD<\/code><\/td>\n<td>GIF<\/td>\n<\/tr>\n<tr>\n<td><code>UklGR<\/code><\/td>\n<td>WebP<\/td>\n<\/tr>\n<tr>\n<td><code>PHN2Zy<\/code> or <code>PD94bWw<\/code><\/td>\n<td>SVG<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Shrink the image first with the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-compressor\/\">image compressor<\/a> or <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-resizer\/\">image resizer<\/a> to keep the Base64 short. To encode text instead of images, use the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/base64-encode-decode\/\">Base64 encoder and decoder<\/a>.<\/p>\n<h2>FAQ<\/h2>\n<h3>Is there a size limit?<\/h3>\n<p>Browsers handle data URLs of several megabytes, but keep inline images small for speed.<\/p>\n<h3>Is my image uploaded?<\/h3>\n<p>No. The conversion runs in your browser.<\/p>\n<h2>More free tools<\/h2>\n<div class=\"qt-cards\"><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-resizer\/\"><strong>Image Resizer<\/strong><span>Resize photos to exact pixels or a percentage.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-compressor\/\"><strong>Image Compressor<\/strong><span>Shrink JPG, PNG and WebP file sizes.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-converter\/\"><strong>Image Converter<\/strong><span>Convert images between JPG, PNG and WebP.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-picker-from-image\/\"><strong>Color Picker From Image<\/strong><span>Pick exact colors from any photo or screenshot.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/aspect-ratio-calculator\/\"><strong>Aspect Ratio Calculator<\/strong><span>Resize width and height while keeping the ratio.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/dns-lookup\/\"><strong>DNS Lookup<\/strong><span>Check A, MX, TXT, SPF and DMARC records for any domain.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/what-is-my-ip\/\"><strong>What Is My IP<\/strong><span>See your public IP address, IPv4 or IPv6, and location.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/\"><strong>Web Safe Colors<\/strong><span>All 216 web safe hex codes, click to copy.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\"><strong>Web Safe Fonts List<\/strong><span>Fonts that display the same on almost every device.<\/span><\/a><\/div>\n<p>See all of them on the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/\">QuickOnlineTips free online tools<\/a> page and play our <a href=\"https:\/\/www.quickonlinetips.com\/archives\/games\/\">free online games<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convert any image to Base64 text that you can paste straight into HTML, CSS, JSON or an email template. Choose a data URL, raw Base64, a ready-made &lt;img&gt; tag or a CSS background rule. You can also paste Base64 text to turn it back into an image and download it. Choose an image or drag&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":65595,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-65910","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=65910"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65910\/revisions"}],"predecessor-version":[{"id":66428,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65910\/revisions\/66428"}],"up":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65595"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=65910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}