Что такое Вase64
Base64 представляет собой метод кодирования различных двоичных данных в формат ASCII текст. Алгоритм стал называться Base64 в 1992 году — 64 символа — это 64 значений разрядов, имеющих разные применения. Первоначальное название алгоритма — “печатаемое кодирование”. Вase64 превращает любые символы в алфавит, состоящий из латинских букв, цифр и символов “+ и /”. Каждые 6 бит информации на входе преобразуются в один из символов 64-буквенного алфавита. Для этого берется обычный стандартный алфавит A-Z, a-z, 0-9,+,/ и знак = в конце как заполняющий символ. Отсюда, на 3 байта информации припадает 4 символа. Данный способ кодирования позволяет преобразовывать в читаемую строку любые изображения, звуковые файлы, даже эмодзи и китайские иероглифы.
Другие варианты Base64 в веб-разработке встречаются крайне редко.
Для чего нужен Вase64
Как известно, различные форматы передачи и хранения информации взамен бинарных кодов (html, url схемы, xml и т.п.) используют текст. В случае, когда требуется передать бинарные данные, а формат передачи информации текстовый, применяют base64.
Кодирование картинок в текст используется в сайтостроении. Чтобы ускорить работу сайта, можно уменьшить количество подгружаемых веб-сервером файлов, вставив их в CSS в виде base64.
Включение картинки напрямую в CSS в виде base64, дает возможность браузеру отобразить ее при первой отрисовке страницы без лишних обращений к серверу.
Включив шрифты в CSS в виде base64, вы можете быть уверены, что кастомный шрифт уже будет правильно отображен во время первой отрисовки страницы, а не спустя какое-то время (которое обычно браузер тратит на подгрузку внешнего шрифта).
Другие варианты использования base64:
- работа c canvas;
- вставка изображений в email;
- передача картинок и других данных в XML;
- для иконок социальных сетей (Twitter, Facebook и др.).
Лучше использовать для маленьких изображений, в крупных код в HTML будет очень длинным.
Для быстрой загрузки изображений и их преобразования в строку base64 вы можете воспользоваться данным онлайн конвертером.
- Загрузите файл картинки.
- Подберите опцию готового кода для вставки на сайт.
- Перенесите сюда изображение в фотмате: ipg, gif, jpeg, png, svg.
- Получите результат.