Private by design. Processed in your browser on your device. No account required. How it works
Workflow guide

Use Base64 Images Without Breaking the File

Encode small images as Base64, add the correct data URL prefix when needed, and avoid oversized CSS, HTML, or JSON payloads.

3 min read Updated Jul 13, 2026 Reviewed guide
Your files stay on your device while you use our browser-based tools.
Quick answer

What you need to know

Base64 turns output file bytes into text and makes the raw data about one-third larger. Choose the JPEGConvert route that matches the format you want because these pages may convert or re-encode the uploaded image before producing Base64; use a normal file URL for large or reused images.

Best for
Developers and technical users embedding or transporting image data in CSS, HTML, JSON, forms, or APIs.
Start with
Convert to Base64
Privacy
Processed in your browser
Do this first

Encode and Verify an Image

Choose the output format first, then copy the right Base64 form and decode-test the result.

  1. 1

    Prepare the source image

    Resize or compress it first and choose JPG, PNG, WebP, GIF, or SVG based on the content.

  2. 2

    Choose the matching route

    Use JPG to Base64, PNG to Base64, or another named page for the output format you need; the general Convert to Base64 page targets JPG.

  3. 3

    Choose data URL or raw Base64

    Copy a full data URL for CSS or HTML, or switch to raw Base64 when an API asks for the encoded characters only.

  4. 4

    Decode one test

    Decode the final stored or transmitted value and compare its format, dimensions, and appearance with the converter output.

01

Know What Base64 Changes

Base64 itself changes binary bytes into text characters. It does not compress an image or improve its quality.

  • The encoded text is usually about one-third larger than the original binary data before other compression.
  • Decoding complete Base64 recovers the bytes that were encoded.
  • A Base64 string needs separate format information unless the surrounding field already defines it.
02

Know What JPEGConvert Encodes

JPEGConvert image-to-Base64 pages call an image conversion route before returning the text, so the encoded bytes may not match the original upload byte for byte.

  • Use a format-specific page when the output must be JPG, PNG, WebP, GIF, SVG, or another named format.
  • The general Convert to Base64 page produces JPG output.
  • Compare decoded output with the converter result, not with the original file bytes.
03

Use the Right String in the Destination

Browsers need a MIME type and Base64 marker in a data URL, while many APIs expect raw Base64 without that prefix.

  • A PNG data URL starts with data:image/png;base64, before the encoded text.
  • Use the MIME type returned by the converter and do not guess from the old filename.
  • Use file URLs for large or reused images, and check request or field-size limits for long strings.
Quick questions

FAQ

Does Base64 make an image smaller?

No. Base64 usually makes the raw data about one-third larger. Compress or resize the image before encoding if size matters.

What is the difference between raw Base64 and a data URL?

Raw Base64 is only the encoded text. A data URL adds a prefix such as data:image/png;base64, so a browser knows the media type and encoding.

Why does my Base64 image not display?

Common causes include a missing or wrong MIME type, a truncated string, added spaces, unsafe JSON escaping, or an API that expects raw Base64 instead of a data URL.

Can Base64 be converted back into the original image?

Base64 can recover the bytes it contains. JPEGConvert may convert or re-encode the upload first, so decoding restores that output image, not necessarily the original upload byte for byte.

Remember this

The short version

  • Base64 represents image bytes as text; it is not image compression.
  • Choose the matching JPEGConvert format route and the correct data URL or raw output.
  • Prefer normal file URLs for large or repeatedly used images.
Ready to work

Open the tool you need

Pick the step that matches your file. Each tool runs in your browser.

Reviewed by JPEGConvert workflow team Updated Jul 13, 2026

Compared with the current controls and output behavior of the linked JPEGConvert tools.

(function() { const title = document.querySelector('h1'); const actionRegion = document.querySelector('.action-container, .action-body'); if (!title || !actionRegion || title.querySelector('.tool-hero-mark')) return; const path = window.location.pathname.replace(/\/$/, ''); if (!path || path === '/' || path.startsWith('/converters') || path === '/about' || path === '/contact' || path === '/support' || path === '/privacy-policy') { return; } const lowerKey = path.replace(/^\/(video|audio)\//, '').replace(/^\//, '').toLowerCase(); if (!lowerKey) return; let category = 'image'; if (path.startsWith('/video/')) category = 'video'; if (path.startsWith('/audio/')) category = 'audio'; const isUtility = lowerKey.includes('ascii') || lowerKey === 'check-my-file' || lowerKey.includes('resizer') || lowerKey.includes('metadata') || lowerKey.includes('compress') || lowerKey.includes('base64') || lowerKey.includes('background') || lowerKey.includes('crop') || lowerKey.includes('watermark') || lowerKey.includes('remove-pages') || lowerKey.includes('unlock') || lowerKey.includes('protect') || lowerKey.includes('editor') || lowerKey.includes('excel') || lowerKey.includes('upscale') || lowerKey.includes('merge') || lowerKey.includes('split') || lowerKey.includes('ocr') || lowerKey.includes('sign') || lowerKey.includes('trim') || lowerKey.includes('favicon'); if (category === 'image' && isUtility) category = 'tool'; const labelMap = { jpg: 'JPG', jpeg: 'JPEG', png: 'PNG', gif: 'GIF', svg: 'SVG', pdf: 'PDF', heic: 'HEIC', jfif: 'JFIF', webp: 'WEBP', bmp: 'BMP', ico: 'ICO', word: 'DOCX', docx: 'DOCX', excel: 'Excel', xls: 'XLS', xlsx: 'Excel', mp4: 'MP4', mov: 'MOV', avi: 'AVI', mp3: 'MP3', aac: 'AAC', flac: 'FLAC', wav: 'WAV', webm: 'WEBM', cr2: 'CR2', arw: 'ARW', nef: 'NEF', raf: 'RAF' }; const formatLabel = (value) => labelMap[value] || value.toUpperCase(); function getFormatMeta(key) { if (key === 'check-my-file') { return {primary: 'Check', secondary: 'File', connector: 'dot'}; } const directMatch = key.match(/^([a-z0-9]+)-to-([a-z0-9]+)$/); const convertMatch = key.match(/^convert-([a-z0-9]+)-to-([a-z0-9]+)$/); const convertToMatch = key.match(/^convert-to-([a-z0-9]+)$/); if (directMatch) { return {primary: formatLabel(directMatch[1]), secondary: formatLabel(directMatch[2]), connector: 'arrow'}; } if (convertMatch) { return {primary: formatLabel(convertMatch[1]), secondary: formatLabel(convertMatch[2]), connector: 'arrow'}; } if (convertToMatch) { return {primary: 'Any', secondary: formatLabel(convertToMatch[1]), connector: 'arrow'}; } if (key.startsWith('compress-')) { return {primary: 'Compress', secondary: formatLabel(key.replace('compress-', '')), connector: 'dot'}; } if (key.includes('base64') && key.includes('decode')) { return {primary: 'Base64', secondary: 'Decode', connector: 'dot'}; } if (key.startsWith('base64-to-')) { return {primary: 'Base64', secondary: formatLabel(key.replace('base64-to-', '')), connector: 'arrow'}; } if (key.includes('-to-base64')) { const from = key.replace('convert-', '').replace('-to-base64', ''); return {primary: formatLabel(from), secondary: 'Base64', connector: 'arrow'}; } if (key.includes('base64')) { return {primary: 'Base64', secondary: 'Encode', connector: 'dot'}; } if (key.includes('ascii')) { return {primary: 'ASCII', secondary: 'Art', connector: 'dot'}; } if (key.includes('resizer')) { return {primary: 'Resize', secondary: 'Pixels', connector: 'dot'}; } if (key.includes('remove-pages')) { return {primary: 'Remove', secondary: 'Pages', connector: 'dot'}; } if (key.includes('crop') && key.includes('pdf')) { return {primary: 'Crop', secondary: 'PDF', connector: 'dot'}; } if (key.includes('pdf-editor')) { return {primary: 'Edit', secondary: 'PDF', connector: 'dot'}; } if (key.includes('unlock')) { return {primary: 'Unlock', secondary: 'PDF', connector: 'dot'}; } if (key.includes('protect')) { return {primary: 'Protect', secondary: 'PDF', connector: 'dot'}; } if (key.includes('pdf') && key.includes('metadata')) { return {primary: 'Clean', secondary: 'Metadata', connector: 'dot'}; } if (key.includes('metadata')) { return {primary: 'EXIF', secondary: 'Clean', connector: 'dot'}; } if (key.includes('background')) { return {primary: 'Remove', secondary: 'Background', connector: 'dot'}; } if (key.includes('crop')) { return {primary: 'Crop', secondary: 'Image', connector: 'dot'}; } if (key.includes('watermark')) { return {primary: 'Watermark', secondary: 'Image', connector: 'dot'}; } if (key.includes('upscale')) { return {primary: 'Upscale', secondary: 'Image', connector: 'dot'}; } if (key.includes('merge')) { return {primary: 'Merge', secondary: 'PDF', connector: 'dot'}; } if (key.includes('split')) { return {primary: 'Split', secondary: 'PDF', connector: 'dot'}; } if (key.includes('ocr')) { return {primary: 'OCR', secondary: 'PDF', connector: 'dot'}; } if (key.includes('sign')) { return {primary: 'Sign', secondary: 'PDF', connector: 'dot'}; } if (key.includes('trim')) { return {primary: 'Trim', secondary: 'Video', connector: 'dot'}; } return {primary: 'Tool', secondary: '', connector: 'dot'}; } function getIconClass(key, categoryName) { const toFormat = key.split('-to-')[1]; if (key === 'check-my-file') return 'bi-file-earmark-check'; if (key.includes('ascii')) return 'bi-textarea-t'; if (key.includes('resizer')) return 'bi-aspect-ratio'; if (key.includes('metadata')) return 'bi-shield-slash'; if (key.includes('compress')) return 'bi-file-earmark-zip'; if (key.includes('base64')) return 'bi-journal-code'; if (key.includes('background')) return 'bi-scissors'; if (key.includes('crop')) return 'bi-crop'; if (key.includes('watermark')) return 'bi-type'; if (key.includes('remove-pages')) return 'bi-trash'; if (key.includes('unlock')) return 'bi-unlock'; if (key.includes('protect')) return 'bi-lock'; if (key.includes('editor')) return 'bi-pencil-square'; if (key.includes('excel')) return 'bi-file-earmark-spreadsheet'; if (key.includes('upscale')) return 'bi-arrows-angle-expand'; if (key.includes('merge')) return 'bi-files'; if (key.includes('split')) return 'bi-scissors'; if (key.includes('ocr')) return 'bi-file-earmark-text'; if (key.includes('sign')) return 'bi-pen'; if (key.includes('trim')) return 'bi-scissors'; if (toFormat) { switch (toFormat) { case 'jpg': case 'jpeg': return 'bi-filetype-jpg'; case 'png': return 'bi-filetype-png'; case 'gif': return 'bi-filetype-gif'; case 'svg': return 'bi-filetype-svg'; case 'pdf': return 'bi-filetype-pdf'; case 'word': case 'docx': return 'bi-file-earmark-word'; case 'xls': case 'xlsx': case 'excel': return 'bi-file-earmark-spreadsheet'; case 'heic': return 'bi-filetype-heic'; case 'webp': return 'bi-filetype-webp'; case 'bmp': return 'bi-filetype-bmp'; case 'ico': return 'bi-file-image'; case 'mp4': return 'bi-filetype-mp4'; case 'mov': return 'bi-filetype-mov'; case 'mp3': return 'bi-filetype-mp3'; case 'wav': return 'bi-filetype-wav'; case 'avi': return 'bi-filetype-avi'; default: return 'bi-file-earmark-image'; } } if (categoryName === 'video') return 'bi-film'; if (categoryName === 'audio') return 'bi-music-note-beamed'; if (categoryName === 'image') return 'bi-file-earmark-image'; return 'bi-gear'; } const formatMeta = getFormatMeta(lowerKey); const connectorIcon = formatMeta.connector === 'arrow' ? 'bi-arrow-right-short' : 'bi-dot'; const iconClass = getIconClass(lowerKey, category); const mark = document.createElement('span'); mark.className = `tool-hero-mark converter-mark converter-mark--${category}`; const iconWrap = document.createElement('span'); iconWrap.className = 'converter-mark__icon'; const icon = document.createElement('i'); icon.className = iconClass; iconWrap.appendChild(icon); mark.appendChild(iconWrap); const formatWrap = document.createElement('span'); formatWrap.className = 'converter-format'; const primary = document.createElement('span'); primary.className = 'format-pill'; primary.textContent = formatMeta.primary; formatWrap.appendChild(primary); if (formatMeta.secondary) { const connector = document.createElement('span'); connector.className = 'format-connector'; const connectorIconEl = document.createElement('i'); connectorIconEl.className = connectorIcon; connector.appendChild(connectorIconEl); formatWrap.appendChild(connector); const secondary = document.createElement('span'); secondary.className = 'format-pill format-pill--secondary'; secondary.textContent = formatMeta.secondary; formatWrap.appendChild(secondary); } mark.appendChild(formatWrap); title.classList.add('tool-hero-title'); title.prepend(mark); })();