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-запит для кожного ресурсу — суттєва оптимізація, коли зображення невеликі (іконки, логотипи, відстежувальні пікселі 1x1), а затримка окремого запиту перевищує вартість додаткових байт.

Data URI підтримуються в усіх сучасних браузерах, поштових клієнтах (з певними застереженнями) та будь-якому контексті, що приймає стандартний синтаксис URI. Вони широко використовуються в односторінкових застосунках, HTML-шаблонах для email, SVG-спрайтах та оголошеннях CSS background-image, де зменшення загальної кількості мережевих запитів покращує суб'єктивний час завантаження.

Чому варто використовувати цей Base64 Image Encoder?

Цей інструмент конвертує будь-яке зображення в готовий до використання 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)"

Часті запитання