🔐
← Назад к руководствам

Как преобразовать изображения в Data URL формата Base64

· Теги: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

Что такое data URL изображения в Base64?

Data URL изображения в Base64 встраивает весь файл изображения непосредственно в веб-документ в виде текстовой строки, устраняя необходимость в отдельном HTTP-запросе для загрузки изображения. Вместо того чтобы браузер загружал внешний файл, данные изображения уже присутствуют в HTML или CSS.

Формат выглядит следующим образом:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Разбор по частям:

  • data: — префикс схемы data URI
  • image/png — MIME-тип встроенного изображения
  • ;base64 — указывает на кодирование Base64
  • ,iVBORw0... — собственно данные изображения в формате Base64

Зачем преобразовывать изображения в Base64?

Встраивание изображений в виде Base64 полезно в нескольких сценариях:

Сокращение HTTP-запросов

Каждый внешний файл изображения требует отдельного HTTP-запроса. Data URL в формате Base64 устраняют эти запросы, что может улучшить время загрузки страницы — особенно на соединениях с высокой задержкой или для страниц с множеством мелких ресурсов.

Самодостаточные документы

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

Страницы, критичные к производительности

Для изображений «над сгибом» и критически важных элементов интерфейса устранение дополнительного кругового обхода может улучшить такие метрики, как Largest Contentful Paint (LCP). Однако это выгодно только для небольших изображений — для крупных изображений встраивание контрпродуктивно.

Работа в офлайн-режиме

Когда изображение встроено как data URL, оно работает без доступа к сети. Это ценно для офлайн-веб-приложений и прогрессивных веб-приложений (PWA).

Как преобразовать изображение в Base64

Способ 1: Использование онлайн-инструмента (самый простой)

Самый быстрый способ преобразовать изображение в Base64 — воспользоваться специализированным онлайн-инструментом. Загрузите или перетащите изображение в наш бесплатный онлайн кодировщик Base64, и вы получите готовый data URL, который можно сразу вставить в код.

Способ 2: Использование JavaScript в браузере

API FileReader предоставляет простой способ преобразования выбранных пользователем изображений в Base64:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Использование с полем выбора файла
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

Способ 3: Использование Canvas API

Если вам нужно изменить размер, обрезать или сжать изображение перед преобразованием в Base64, используйте Canvas API:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Пример: Изменение размера изображения перед преобразованием
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

Способ 4: Использование Node.js

На серверной стороне используйте модуль fs с Buffer для преобразования файлов изображений в Base64:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Определение MIME-типа по расширению
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

Способ 5: Использование командной строки

В Linux и macOS можно использовать встроенную команду base64:

# Кодирование в Base64 и оборачивание в data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

Как использовать изображения Base64 в HTML

Непосредственно в теге <img>:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

Как использовать изображения Base64 в CSS

В качестве фонового изображения:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

Производительность и лучшие практики

Когда изображения Base64 помогают

  • Мелкие иконки и элементы интерфейса размером до 10 КБ
  • Критически важные изображения «над сгибом», блокирующие отрисовку
  • Спрайты и SVG-иконки, используемые на странице
  • Шаблоны электронных писем, где внешние изображения часто блокируются
  • Офлайн-веб-приложения и самодостаточные документы

Когда изображения Base64 вредят

  • Крупные фотографии или изображения высокого разрешения (100 КБ+) — накладные расходы Base64 и задержка парсинга ухудшают производительность
  • Часто изменяющиеся изображения — инвалидация кэша браузера для большого HTML-файла неэффективна
  • Изображения, используемые на многих страницах — внешние файлы выигрывают от общего кэширования браузером
  • Изображения, обслуживаемые через CDN — CDN оптимизируют доставку файлов лучше, чем встроенные данные

Практическое правило 10 КБ

Широко распространённая рекомендация: если изображение меньше 10 КБ, рассмотрите возможность его встраивания в Base64. Если оно больше — подавайте его как отдельный файл. Это балансирует накладные расходы HTTP-запросов и накладные расходы данных в формате Base64 в вашем HTML.

Однако оптимальный порог зависит от конкретной ситуации:

  • Мультиплексирование HTTP/2 снижает штраф за множественные запросы, делая внешние файлы более привлекательными
  • На медленных соединениях устранение запросов может быть ценным даже для более крупных изображений
  • Для ресурсов критического пути отрисовки встраивайте даже более крупные изображения, если это означает на один круговой обход меньше

Соображения по сжатию

Если вы преобразуете JPEG или PNG изображения в Base64, рассмотрите возможность использования WebP. WebP обеспечивает превосходное сжатие при том же уровне качества, что даёт меньшие строки Base64. Многие онлайн-инструменты позволяют перекодировать изображения перед преобразованием в Base64.

Преобразуйте свои изображения в Base64

Готовы встраивать изображения непосредственно в код? Используйте наш бесплатный онлайн кодировщик и декодировщик Base64 для загрузки изображений и получения готовых data URL для HTML, CSS и JavaScript — установка не требуется.