Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>1 дек 2025</li>

3 <li>0</li>

4 </ul>Прочтёте статью - и легко разгадаете это: SGVsbG8sIHdvcmxkIQ==

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

7 В разработке часто возникают ситуации, когда нужно встроить изображение в HTML-код, отправить файл через JSON-запрос или передать бинарные данные там, где протокол ожидает только текст. Для всех этих задач используется кодировка Base64, о которой мы поговорим в статье. Вы узнаете, как она устроена и где применяется.

8 Содержание

9 <ul><li><a>Что такое кодировка Base64 и для чего её придумали</a></li>

10 <li><a>Как работает алгоритм кодирования</a></li>

11 <li><a>Как происходит декодирование Base64</a></li>

12 <li><a>Инструменты для работы с Base64</a></li>

13 <li><a>Где используется Base64 и когда его лучше не применять</a></li>

14 </ul>Данные в компьютерах хранятся в двоичном (бинарном) виде - как последовательность нулей и единиц, организованных в байты. Однако многие каналы передачи данных и протоколы разрабатывались для работы исключительно с текстовой информацией в определённых кодировках, таких как<a>ASCII</a>. Особенно это касалось<a>SMTP-протокола</a>для электронной почты, ранних версий HTTP API и HTML-форм.

15 Если попытаться передать бинарные данные через такие каналы напрямую, некоторые байты могут быть интерпретированы как управляющие символы - это приводит к искажению или обрыву данных. Кроме того, протоколы, рассчитанные на 7-битные символы, отбрасывают старший бит в каждом байте, и данные повреждаются.

16 Например, если отправить изображение или PDF-файл через такой канал, часть байтов может совпасть с управляющими символами. В результате к получателю придёт повреждённый файл с бессмысленным набором символов. Base64 придумали, чтобы решить эту проблему.

17 Base64 - это метод кодирования, который преобразует двоичные данные (байты) в текстовую строку из безопасных ASCII-символов: латинских букв (A-Z, a-z), цифр (0-9) и символов "+" и "/". Эти символы точно пройдут через любой текстовый канал без искажений. Дело в том, что метод стандартизирован в <a>RFC 4648</a> - документе, который определяет правила кодирования для универсальной совместимости на любых языках программирования и платформах.

18 При этом вы должны понимать, что Base64 не защищает данные, а просто переводит их в другой формат. Любой человек, у которого есть закодированная строка, может её быстро расшифровать - для этого не нужен никакой ключ, только таблица соответствий или декодер.

19 Поэтому не стоит использовать Base64 для скрытия паролей, токенов или любой другой конфиденциальной информации. Если данные необходимо защитить, используйте алгоритмы шифрования, где есть секретный ключ, без которого расшифровка попросту невозможна.

20 Алгоритм Base64 преобразует каждые три байта исходных данных в четыре текстовых символа. При этом он работает не с буквами, а с их числовым представлением - битами. Вся логика сводится к перегруппировке этих битов и последующему сопоставлению получившихся чисел с символами из алфавита Base64. Давайте разберём этот процесс пошагово на примере и закодируем словоSky.

21 В кодировке ASCII каждый символ представлен числом. БукваS - это число 83 в десятичной системе,k - число 107, а y - 121. В памяти компьютера эти числа хранятся в двоичном виде - как байты по восемь бит:

22 <ul><li>83 → 01010011;</li>

23 <li>107 → 01101011;</li>

24 <li>121 → 01111001.</li>

25 </ul>То есть строкаSkyв двоичном представлении выглядит так:

26 S k y ↓ ↓ ↓ 01010011 01101011 01111001Далее алгоритм объединяет все байты в одну непрерывную цепочку:

27 010100110110101101111001 └────────────────────────┘ 24 бита24-битный блок делится на четыре группы по шесть бит. Каждая группа представляет собой число от 0 до 63, которое используется как индекс для поиска соответствующего символа в таблице алфавита Base64:

28 010100 | 110110 | 101101 | 111001 ↓ ↓ ↓ ↓ 20 54 45 57Посмотрите, мы взяли все эти числа из таблицы:

29 Таблица соответствия алфавита Base64: Index - порядковый номер, Binary - его 6-битное представление, Char - символ из алфавита Base64Скриншот:<a>Dev Blog from SHIFT ASIA</a>/ Skillbox MediaНам осталось взять полученные числа и в этой же таблице найти для каждого соответствующий символ: 20 → U, 54 → 2, 45 → t, 57 → 5. В завершение просто объединяем все символы и получаем строку U2t5.

30 Вот как выглядит полный процесс кодирования словаSkyв Base64:

31 Sky ↓ S k y ↓ ↓ ↓ 83 107 121 (ASCII-коды символов) ↓ ↓ ↓ 01010011 01101011 01111001 (байты по 8 бит) ↓ 010100110110101101111001 (единый 24-битный блок) ↓ 010100 110110 101101 111001 (4 группы по 6 бит) ↓ ↓ ↓ ↓ 20 54 45 57 (значения для таблицы Base64) ↓ ↓ ↓ ↓ U 2 t 5 (символы Base64) ↓ U2t5Паддинг в Base64 - это символ = в конце закодированной строки, который появляется, когда исходные данные не делятся на три байта без остатка. Он показывает, что последний блок данных был неполным.

32 В примере со словомSkyпаддинг не понадобился, потому что Base64 всегда<a>обрабатывает</a>данные блоками по три байта и длина исходных данных (три байта = 24 бита) делится на три без остатка. Однако если попробовать закодировать словоGo, получится так:

33 Go ↓ G o ↓ ↓ 71 111 (ASCII-коды символов) ↓ ↓ 01000111 01101111 (байты по 8 бит) ↓ 0100011101101111 (единый 16-битный блок) ↓ 010001 110110 1111 (получаем неполный блок) ↓ ↓ ↓ 010001 110110 111100 (дополняем нулями до 6 бит) ↓ ↓ ↓ 17 54 60 (значения для Base64) ↓ ↓ ↓ R 2 8 = (символы Base64 + паддинг) ↓ R28=Декодирование - это процесс, который восстанавливает исходные двоичные данные из Base64-строки. Алгоритм проходит те же шаги, но в обратном порядке. Давайте декодируемR28=обратно в словоGo.

34 Сначала алгоритм отбрасывает символы паддинга и преобразует каждый оставшийся символ обратно в его 6-битное значение:

35 R28= ↓ R 2 8 ↓ ↓ ↓ 17 54 60Затем каждое число преобразуется в 6-битную группу, после чего все группы объединяются в единую битовую последовательность:

36 17 54 60 ↓ ↓ ↓ 010001 110110 111100 ↓ 010001110110111100Продолжаем и полученную битовую цепочку делим на байты по 8 бит. Поскольку у нас был паддинг, последние биты 00 нужно отбросить:

37 010001110110111100 ↓ 01000111 01101111 00 ↓ 01000111 01101111 ↓ 71 111Обращаемся к ASCII и преобразуем полученные числа в символы:

38 71 111 ↓ ↓ G o ↓ GoКодировать и декодировать информацию в Base64 вручную - сложно и непродуктивно. Поэтому на практике разработчики используют инструменты, которые делают всё автоматически и без ошибок.

39 Онлайн-сервисы для разовых задач.Если нужно быстро закодировать строку или файл один раз, удобнее всего воспользоваться онлайн-сервисами. Например, попробуйте<a>base64.guru</a>. Он умеет работать с текстом, изображениями и файлами, а также содержит справочные материалы по RFC 4648 и примеры кода на разных языках.

40 Давайте закодируем файл smile.png. Выбираем кодер Изображение в Base64, загружаем файл и жмём Кодировать изображение в Base64.

41 Скриншот:<a>Base 64 Guru</a>/ Skillbox MediaТеперь декодируем строку обратно в изображение. Копируем её, выбираем декодер Base64, загружаем строку и нажимаем Декодировать Base64 в изображение. Получаем исходный смайлик.

42 Скриншот:<a>Base 64 Guru</a>/ Skillbox MediaСреди других сервисов можно использовать<a>base64encode.org</a>и <a>CyberChef</a>. А ещё рекомендуем<a>попробовать</a>наш кастомный декодер, который мы сделали для этой статьи. Его фишка в том, что он не просто кодирует, но и показывает все шаги преобразования текста в строку Base64 и обратно. Например, вот так кодируется знакомое словоSky:

43 Скриншот: декодер Base64 / Skillbox MediaВстроенные методы языков программирования.Практически во всех языках есть функции для кодирования и декодирования. Такой подход позволяет встраивать Base64-операции в логику приложения без внешних зависимостей. К пример, вот как это выглядит в JavaScript:

44 // Кодирование строки const text = 'Hello, world!'; const encoded = btoa(text); console.log(encoded); // SGVsbG8sIHdvcmxkIQ== // Декодирование строки const decoded = atob(encoded); console.log(decoded); // Hello, world!Автоматизация в сборщиках проектов.В крупных проектах с большим количеством изображений и файлов преобразовывать каждый вручную неэффективно. Поэтому этой рутиной занимаются сборщики:

45 <ul><li>Во время сборки проекта сборщик анализирует все файлы и проверяет размер каждого изображения или ресурса.</li>

46 <li>Если файл меньше заданного порога (обычно 4-10 КБ), сборщик конвертирует его в Base64 и встраивает в CSS или JavaScript.</li>

47 <li>Если больше порога - сборщик оставляет его отдельным файлом, который браузер загрузит по обычной ссылке.</li>

48 </ul>Среди популярных сборщиков вы можете попробовать<a>Webpack</a>,<a>Vite</a>,<a>Parcel</a>и <a>Rollup</a>. Только имейте в виду, что для работы любого сборщика потребуется Node.js и базовая настройка проекта через<a>npm</a>или<a>yarn</a>.

49 Base64 - это универсальный стандарт, который работает везде: на серверах, в браузерах, в API и мобильных приложениях. Давайте посмотрим, в каких областях разработки он применяется чаще всего.

50 Веб-разработка.Мелкие изображения и иконки встраивают в HTML или CSS, чтобы уменьшить количество HTTP-запросов и ускорить загрузку страницы. Например, добавим маленькую иконку в HTML:

51 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ..." alt="icon">Или фоновое изображение в CSS:

52 .icon { background-image: url(data:image/png;base64,iVBORw0KGg...); }Также в CSS-файл через Base64 можно подключить веб-шрифты:

53 @font-face { font-family: 'CustomFont'; src: url(data:font/woff2;base64,d09GMgABAAAAAH8QAA8AAAAAV...) format('woff2'); }В JavaScript можно конвертировать содержимое HTML5 Canvas в Base64 с помощью метода toDataURL (). Это удобно, когда нужно сохранить изображение, нарисованное пользователем, на клиенте или отправить графику на сервер без создания отдельного файла:

54 const canvas = document.getElementById('myCanvas'); const dataURL = canvas.toDataURL('image/png'); // dataURL: "data:image/png;base64,iVBORw0KGgo..."API и передача данных.Base64 позволяет передавать бинарные данные (изображения, PDF-файлы, аудио) через<a>REST API</a>в формате<a>JSON</a>или<a>XML</a>без использования<a>multipart-форматов</a>. Это очень помогает, когда клиент и сервер обмениваются данными через протоколы, которые не поддерживают бинарные форматы напрямую.

55 Например, мобильное приложение может отправить фотографию профиля пользователя на сервер через простой JSON-запрос:

56 { "userId": "12345", "profilePhoto": "iVBORw0KGgoAAAANSUhEUgAAAAUA...", "timestamp": "2025-11-27T10:13:00Z" }Сервер получает строку Base64, декодирует её и сохраняет файл. Без Base64 пришлось бы использовать multipart/form-data, что усложнило бы код и потребовало дополнительной обработки на стороне сервера.

57 Электронная почта.Все прикреплённые файлы в письмах кодируются в Base64 перед отправкой согласно стандарту<a>MIME</a>. Затем почтовый клиент получателя декодирует эту строку и показывает файл в его исходном виде. Например, когда вы отправляете письмо с прикреплённым PDF-файлом, он выглядит примерно так:

58 Content-Type: application/pdf; name="document.pdf" Content-Transfer-Encoding: base64 JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQg... [закодированное содержимое файла] ...RU9GCg==Криптография и безопасность.Ключи шифрования, SSL-/TLS-сертификаты и цифровые подписи часто хранятся в текстовом формате Base64. Это упрощает их копирование, передачу и хранение в конфигурационных файлах. Например,<a>SSL-сертификат</a>выглядит так:

59 -----BEGIN CERTIFICATE----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAn6... -----END CERTIFICATE-----Несмотря на универсальность, Base64 не подходит для работы с большими файлами. Причина в том, что закодированные данные увеличиваются примерно на 33% по сравнению с исходным размером. Например, изображение размером 100 КБ после кодирования в Base64 займёт около 133 КБ, а файл в 1 МБ превратится в 1,33 МБ - это довольно ощутимая разница для производительности веб-страницы.

60 Ещё один момент - влияние на SEO и доступность. Поисковые системы не индексируют изображения в Base64, а скринридеры могут обрабатывать их некорректно. Если эти моменты важны для вашего проекта, лучше использовать обычный<a>тег <img></a>с атрибутом alt.

61 И напоследок напомним о безопасности: Base64 - это способ кодирования, а не шифрования. Любой человек или программа может декодировать строку обратно в исходный вид. Поэтому никогда не используйте Base64 для защиты конфиденциальных данных - для этого есть свои алгоритмы шифрования вроде<a>AES</a>,<a>RSA</a>или<a>bcrypt</a>.

62 <a>Курс с трудоустройством: "Профессия Разработчик + ИИ" Узнать о курсе</a>