Шаг ноль: готовим исходник
Прежде чем кодировать, убедитесь, что исходник — финальный. Логотип в нужном размере, текст без опечаток, файл в корректной кодировке. Править закодированную строку потом — плохая идея: проще подготовить исходник заново.
Оцените размер: иконка в 8 КБ даст строку примерно на 11 КБ — отлично для встраивания. Файл на 2 МБ даст почти 3 МБ текста в коде — повод задуматься, а нужно ли встраивать вообще.
Проверьте формат файла: для веба иконки лучше держать в PNG или SVG, фото — в JPG или WebP. Кодировать в Base64 тяжёлый BMP — значит тащить в страницу мегабайты, которых можно было избежать конвертацией.
Кодирование и вставка
Откройте кодер CubTools, загрузите или вставьте исходник. Результат появится сразу — скопируйте его кнопкой, а не выделением вручную: в длинных строках легко потерять символ с краю.
Соберите data-URI: префикс с типом файла, затем ваша строка без пробелов. Вставьте в HTML или CSS. Если строка пойдёт в JavaScript-шаблон, убедитесь, что в ней нет символов, конфликтующих с кавычками строки.
Если иконок несколько — повторяйте цикл для каждой, но вставляйте сразу в общий CSS-файл, чтобы не плодить временные файлы с кусками строк. Порядок: закодировал — вставил — подписал комментарием, что это за иконка.
Проверка и сдача работы
Откройте страницу в браузере и убедитесь, что изображение отображается. Проверьте в двух-трёх браузерах: старые версии иногда капризничают с длинными data-URI.
Затем сделайте обратную проверку: скопируйте строку из кода в декодер и сравните с исходником — так вы поймаете случайную порчу при копировании.
Сохраните исходный файл рядом с проектом, например в папке assets/src. Через полгода, когда логотип обновится, вы закодируете новый файл за минуту — вместо того чтобы пытаться восстановить старый из Base64.
И зафиксируйте решение: оставьте в коде комментарий, что иконка встроена как data-URI и где лежит исходник. Будущий вы (или коллега) скажет спасибо.
План Б: если что-то пошло не так
Строка не вставляется в код — редактор ругается? Проверьте три вещи: нет ли переносов строк внутри, не попали ли кавычки из «умной» автозамены, не обрезана ли строка лимитом поля. Девять из десяти сбоев — именно здесь.
Декодер на принимающей стороне отвергает строку? Уточните алфавит: возможно, вы прислали обычный Base64, а ждут URL-safe. Один символ «+» вместо «-» — и вся интеграция стоит.
Не получается вообще ничего? Откатитесь к исходнику и пройдите цикл заново: подготовка, кодирование, проверка, вставка. Исходник — ваша страховка: пока он цел, любая ошибка поправима за пять минут. Именно поэтому мы храним исходники рядом с проектом.
Фиксируйте удачные параметры: какой алфавит, какие переносы, куда вставляли. В следующий раз цикл займёт минуты вместо получаса разбирательств.
Хороший процесс — это когда каждый шаг очевиден, а ошибки ловятся до того, как навредили.
Шаги
- Подготовьте финальный исходник: нужный размер, UTF-8 для текста.
- Оцените размер — для встраивания подходят файлы до десятков килобайт.
- Закодируйте в CubTools и скопируйте результат кнопкой.
- Соберите data-URI или вставьте строку в нужное место кода.
- Проверьте отображение в браузере.
- Сделайте контрольное декодирование и сравните с исходником.
- Сохраните исходный файл в проекте для будущих правок.
Частые вопросы
В каком порядке делать: кодировать или писать код?
Сначала готовьте исходник до финального состояния, потом кодируйте, потом вставляйте в код. Кодирование недоделанного файла — верный путь к переделке.
Где хранить исходники после встраивания?
В проекте, рядом с кодом: например, в папке assets/src. Закодированная строка — производный артефакт, правится всегда исходник.
Как понять, что строка не повредилась при вставке?
Декодируйте строку прямо из кода обратно и сравните с исходником. Совпало посимвольно — всё в порядке.