Перевод pNG в Base64: таблицы, формулы и онлайн-конвертер

Base64 — это способ представить бинарные данные (например, PNG) как текст. Строка состоит из символов A-Z, a-z, 0-9, + и /. На практике это используют, чтобы встроить картинку прямо в код:

<img src="data:image/png;base64,iVBOR...">

Формула перевода: каждые 3 байта (24 бита) кодируются в 4 символа Base64. Если байтов не кратно 3, добавляются символы '=' (падинг). Итоговый размер:

Пример: файл 300 байт → 300/3=100 блоков → 100*4=400 символов. С учётом служебных (data:image/png;base64, ~23 символа) итог ~423.

Самый быстрый способ для разработчика — консоль. Откройте Chrome DevTools (F12 → Console) и выполните мини-конвертер:

// Загружаем файл как Data URL
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/png';
input.onchange = e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => console.log(reader.result);
  reader.readAsDataURL(file);
};
input.click();

Результат — строка вида data:image/png;base64,... — готова к вставке.

Если нужно сделать это в Node.js (для автоматизации):

const fs = require('fs');
const path = 'image.png';
const base64 = fs.readFileSync(path).toString('base64');
const dataUri = `data:image/png;base64,${base64}`;
console.log(dataUri);

На 2026 год это соотношение строгое — Base64 не сжимает данные, а лишь перекодирует.

Вместо ручного кодирования используйте Конвертер PNG в Base64 — перетащите файл, получите готовую строку. Конфиденциально: всё обрабатывается в браузере.

Другие полезные конвертеры:

• Конвертер Base64 в PNG — обратное преобразование.
• Конвертер JPG в Base64 — если формат JPEG.
• Base64 в PDF и PDF в Base64 — для работы с PDF.

• Забыли MIME-тип. Строка должна начинаться с data:image/png;base64, — иначе браузер не поймёт формат.
• Переполнение буфера. В Node.js fs.readFileSync без кодировки выдаёт Buffer — это нормально. Не указывайте 'utf-8'.
• Размер строки в HTML. Если PNG > 1 MB, вставлять Base64 прямо в атрибут src — плохая практика: страница будет грузиться дольше.
• Лишние пробелы/переносы. В строке Base64 не должно быть пробелов и переносов строк. Если копируете из консоли — проверьте.

Edge case: очень маленький PNG (меньше 3 байт) даст много падинга (=). Например, 1 байт → 4 символа + == → итог 8 символов + префикс.

1. Проверьте, что строка начинается с data:image/png;base64,. Если нет — добавьте вручную.
2. Откройте консоль браузера: F12, вкладка Console.
3. Введите: atob('ваша_строка_без_префикса') — если ошибка, значит Base64 повреждён.
4. Попробуйте открыть строку напрямую: вставьте её в адресную строку браузера и нажмите Enter. Если картинка не отображается — проблема в кодировке.
5. Используйте Конвертер Base64 в PNG для проверки.

Base64 увеличивает размер на 33% и не кешируется отдельно. Для частого использования (логотип на 100 страницах) лучше ссылка на файл.

В 2026 году практические правила:

• Иконки до 10 KB — Base64 ок;
• Изображения 10–100 KB — спорно, зависит от числа повторений;
• Больше 1 MB — всегда внешняя ссылка.

Совет: современные браузеры поддерживают loading="lazy" на картинках — используйте для отложенной загрузки вместо Base64.