Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Конвертер изображения в Base64 превращает файл изображения в data URL — одну строку текста, которая начинается с data:image/png;base64, (или с типа вашего файла), а за ней следуют байты изображения в кодировке Base64. Выберите PNG, JPG, GIF, SVG, WebP или любое другое изображение — появится текст и превью, готовые к копированию.
Файл читается через FileReader браузера, поэтому никуда не загружается. Data URL можно использовать везде, где работает обычный адрес изображения: в <img src>, в CSS background-image: url(...), в JSON-данных или в шаблоне письма. Base64 увеличивает объём данных примерно на треть по сравнению с исходным файлом, поэтому лучше всего подходит для небольших изображений.
Когда использовать
- Нужно встроить небольшую иконку или логотип в CSS, чтобы страница делала на один запрос меньше.
- Нужно поместить изображение внутрь единственного самодостаточного HTML-файла, например отчёта или демо.
- Нужно отправить изображение в JSON-запросе к API, который не принимает multipart-загрузки.
- Нужно добавить встроенное изображение в HTML-подпись письма или в тестовую фикстуру.
Пример
Ввод
pixel.png (1 × 1 px, синий, 69 байт)Вывод
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCВопросы об этом инструменте
Почему текст Base64 больше моего изображения?
Base64 записывает каждые 3 байта четырьмя текстовыми символами, поэтому результат примерно на 33% больше файла. Изображение размером 30 КБ превращается примерно в 40 КБ текста. Сжатие Gzip или Brotli на сервере частично это компенсирует.
Когда не стоит встраивать изображение?
Не делайте этого для больших фотографий и для изображений, которые используются на многих страницах. Обычный файл изображения браузер кеширует один раз, а встроенное изображение загружается заново с каждым HTML- или CSS-файлом, который его содержит.
Как использовать результат в CSS?
Оберните его в url(): background-image: url("data:image/png;base64,...");. Для SVG-иконок URL-кодированный SVG часто получается компактнее Base64; подготовить его поможет страница «Кодирование URL».
Как превратить Base64 обратно в изображение?
Вставьте data URL целиком в адресную строку браузера и сохраните изображение или декодируйте часть после запятой с помощью декодера Base64, если нужны исходные байты.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.