Следуйте этому рабочему примеру, а затем адаптируйте те же элементы управления к своему собственному изображению. Открыть Конвертер изображения в Base64.
Выберите изображение и просмотрите его идентификацию
Откройте конвертер Image to Base64. Выберите изображение или попробуйте образец. В примере используется 512 × 512 пиксельный favicon-orbit.png, который содержит 202,491 байт. Редактор показывает изображение над его кодом, чтобы вы могли подтвердить, что выбрали нужный ресурс.
PNG, JPG, WebP, GIF, BMP и AVIF поддерживаются, если ваш браузер может декодировать их для предварительного просмотра. Максимальный размер файла составляет 25 МБ, с ограничениями 60 мегапикселей и 16,000 пикселей на сторону. Разметка SVG не принимается этим растровым конвертером.
Инструмент считывает исходные байты файла. Он не использует предварительный просмотр для пересборки изображения, изменения его размера или пережатия. Существующие метаданные и анимация GIF поэтому сохраняются в закодированных данных.
Перед кодированием используйте Resize Image или Image Compressor, если вам нужен меньший ресурс. Сам по себе Base64 не уменьшает размер изображения.
Выберите представление, которое ожидает ваш проект
Откройте Settings и выберите HTML изображение в разделе Code format для этого примера. Результатом является тег img, содержащий data URL Base64. Атрибут alt изначально пуст; напишите полезный замещающий текст, когда изображение передает информацию.
Data URL начинается с префикса, такого как data:image/png;base64, за которым следуют закодированные данные. Plain Base64 содержит только данные. CSS фон оборачивает data URL в объявление background-image. Эти представления служат разным целям, поэтому копируйте форму, запрашиваемую вашим приложением, а не просто меняйте имя файла.
Панель кода обновляется сразу после изменения Code format. Значок копирования копирует текущее представление и выдает подтверждение о копировании. Когда доступ к буферу обмена заблокирован, код выделяется для ручного копирования.
Полный тег HTML img — это не то же самое, что data URL. Используйте только значение src, если в поле требуется URL.
Пример из этого руководства
Попробуйте пример: favicon-orbit.png, 512 × 512 px, 202,491 байт. Выберите HTML изображение в формате кода. Нажмите «Старт» и скачайте favicon-orbit-base64.txt.
- Оригинал PNG
- 512 × 512 px · 202,491 байт
- HTML текстовый вывод
- 270,029 байт
- Кодирование
- Исходные байты; без пережатия
Скачайте код и оцените его размер
Выберите «Старт», затем «Скачать». Пример сохраняет favicon-orbit-base64.txt, содержащий HTML код изображения. Его 270,029 байт больше, чем 202,491 байт исходного файла. Сравнение в статье показывает начало скачанного текста, сокращенное для удобства чтения.
Base64 обычно преобразует три исходных байта в четыре текстовых символа, добавляя примерно треть объема перед небольшой оберткой. Внедрение маленькой иконки делает документ автономным, но размещение больших строк изображений внутри HTML или CSS также увеличивает размер документа и не позволяет кэшировать изображение как отдельный файл.
Кодирование — это не шифрование. Любой, у кого есть полная строка Base64, может восстановить исходное изображение. Обращайтесь с кодом так же осторожно, как с исходным файлом, если он содержит конфиденциальную информацию.
Сокращенный фрагмент в этой статье приведен для пояснения. Используйте полный скачанный TXT или скопируйте весь код из инструмента.
Часто задаваемые вопросы
Снизит ли кодирование качество изображения?
Нет. Кодирование сохраняет исходные байты. Оно не изменяет размер, не сжимает и не перерисовывает изображение.
Почему строка Base64 больше, чем само изображение?
Base64 представляет три входных байта четырьмя текстовыми символами, поэтому обычно добавляется около одной трети объема перед оберткой или префиксом.
Сохраняется ли анимация GIF?
Кодирование сохраняет исходные GIF байты, включая анимацию. Предварительный просмотр может показывать статичный кадр, в то время как закодированные данные сохраняют все кадры.
Безопасен ли Base64 для секретных изображений?
Base64 — это не шифрование. Храните строку в секрете, если исходное изображение является конфиденциальным. Сам конвертер обрабатывает данные локально в вашем браузере.
Превратите нужное изображение в нужный код.
Попробуйте пример или используйте свой файл, и проверьте результат перед публикацией.
