Image to Base64 online — convert image to data URI for embedding in HTML and CSS. Free.
Click or drag and drop a file
Перетащите изображение или нажмите на зону загрузки — инструмент мгновенно сконвертирует его в Base64.
With data:URI prefix — добавляет data:image/png;base64,... в начало — готово для использования в CSS и HTML.
HTML <img> tag — оборачивает строку в готовый тег <img src="..."> для вставки прямо в разметку.
Поддерживаются PNG, JPEG, WebP, GIF, SVG и другие форматы изображений.
Конвертация происходит полностью в браузере — файл не отправляется на сервер.
Convert Image to Base64 Online
A free online converter for encoding images into Base64 strings and decoding them back. Get a ready-to-use data:URI for embedding images directly in HTML or CSS without extra HTTP requests.
What is Base64 for images
Base64 is a way to encode binary data (including images) into a string of ASCII characters. Binary bytes of the image are converted into a sequence of 64 characters: Latin letters, digits, +, /, and = for padding.
The result is a long text string that can be embedded directly into HTML, CSS, or JavaScript without creating a separate file. The browser decodes the string back into an image on the fly.
How to convert an image to Base64
- Click the upload area or drag and drop an image file
- Choose options: with data:URI prefix or as an HTML <img> tag
- Copy the result with the "Copy" button
Conversion happens instantly in the browser via the FileReader API — the file never leaves your device.
The data:URI format
Data URI is the standard format for embedding data directly in a URL. For images the structure is:
data:[MIME-type];base64,[BASE64-DATA]
Examples:
- PNG:
data:image/png;base64,iVBORw0KGgo... - JPEG:
data:image/jpeg;base64,/9j/4AAQSkZJRgAB... - SVG:
data:image/svg+xml;base64,PHN2ZyB4bWxucz... - WebP:
data:image/webp;base64,UklGRl4A...
Use cases
| Scenario | Description |
|---|---|
| CSS backgrounds | background-image: url(data:image/png;base64,...) — icons without HTTP requests |
| HTML email | Embedding logos and banners without external links to avoid blocking |
| Inline HTML | <img src="data:image/..."> — single-file documents with no dependencies |
| JSON API | Sending an image in a JSON request body as a Base64 string field |
| localStorage | Storing small images in browser storage |
| Canvas export | canvas.toDataURL() returns Base64 by default |
File size impact
Base64 encoding increases file size by approximately 33%: every 3 bytes of binary data are encoded into 4 Base64 characters. A 10 KB PNG will become ~13.3 KB as a string.
This is fine for small icons (up to 2–5 KB). For larger images, use regular files with a CDN to save bandwidth and allow the browser to cache images independently of the page.
FAQ
Are all image formats supported? Yes — PNG, JPEG, WebP, GIF, SVG, AVIF, BMP, ICO, and any other format the browser understands.
Is there a file size limit? No technical limit — it depends on browser memory. For files larger than 5 MB, consider server-side solutions.
How to decode Base64 back to a file? Use our Base64 Decoder — it supports data:URI image preview.
See also: Base64 Decode · Image Compression · Format Converter · Image Resize
Useful articles
AI Photo Restoration: How to Restore Old and Damaged Photos
How the GFPGAN neural network restores old and damaged photos: technology, capabilities, step-by-step guide, and tips.
AI Photo Colorization: How Neural Networks Bring Old Photos to Life
How neural networks colorize black and white photos: DDColor technology, method comparison, practical tips, and step-by-step guide.