Base64 Image Encoder

Что такое Base64-кодирование изображений?

Base64-кодирование изображений преобразует бинарные данные изображения в ASCII-строку, которую можно встроить непосредственно в HTML, CSS или JSON без ссылки на внешний файл. Результатом является data URI — самодостаточная строка, начинающаяся с data:image/png;base64,, за которой следуют байты изображения, закодированные в Base64. Браузеры обрабатывают data URI так же, как внешние URL изображений: декодируют Base64-содержимое и отображают изображение в строке.

Этот подход определён в RFC 2397 (схема data URI) и RFC 4648 (кодирование Base64). При Base64-кодировании каждые 3 байта бинарных данных пикселей превращаются в 4 ASCII-символа, увеличивая размер данных примерно на 33%. Несмотря на этот оверхед, встроенные изображения устраняют отдельный HTTP-запрос на ресурс — существенная оптимизация для небольших изображений (иконок, логотипов, пикселей отслеживания 1×1), когда задержка на отдельный запрос превышает стоимость дополнительных байт.

Data URI поддерживаются во всех современных браузерах, почтовых клиентах (с оговорками) и любом контексте, принимающем стандартный синтаксис URI. Они широко применяются в одностраничных приложениях, шаблонах HTML-писем, SVG-спрайтах и объявлениях CSS background-image, где сокращение общего числа сетевых запросов улучшает воспринимаемое время загрузки.

Почему стоит использовать этот инструмент?

Этот инструмент конвертирует любое изображение в готовый к использованию data URI прямо в браузере — без загрузки, без сервера, без регистрации.

Случаи применения Base64-кодирования изображений

Структура Data URI

Data URI кодирует формат изображения и бинарное содержимое в одной строке. Понимание структуры помогает при программном создании или разборе data URI:

Сравнение форматов изображений для Base64-кодирования

Выбор формата изображения влияет на размер Base64-вывода, поддержку браузерами и характеристики отображения. Используйте формат, наиболее подходящий для вашего типа контента:

Примеры кода

Как конвертировать изображения в Base64 data URI на популярных языках и в различных окружениях:

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Часто задаваемые вопросы