Картинка в Base64
Бесплатно · без регистрацииПревратите картинку в Base64 data-URI для CSS или HTML — файл не покидает браузер.
Превратите картинку в Base64 data-URI, который можно вставить прямо в CSS или HTML — без отдельного запроса за файлом. Перетащите файл и скопируйте data-URI, CSS-правило фона или тег <img>. Картинка читается в браузере и не загружается на сервер.
- ✓Data-URI, CSS или <img> в один клик
- ✓PNG, JPG, SVG, GIF и WebP
- ✓Показывает размер оригинала и кодированного
- ✓Живое превью картинки
- ✓Работает в браузере — ничего не загружается
Кому подходит
- Встроить иконку в CSS
- Вставить логотип в HTML-письмо
- Избежать лишнего запроса за картинкой
- Вставить картинку в файл данных
Как это работает
- 1Перетащите картинку или выберите файл.
- 2Смотрите превью и размеры.
- 3Скопируйте data-URI, CSS-правило или тег <img>.
- 4Вставьте в свой код.
Частые вопросы
Что такое Base64 data-URI?+
Это картинка, закодированная как текст (data:image/png;base64,…), которую можно встроить прямо в CSS или HTML, чтобы браузер не запрашивал отдельный файл.
Когда стоит встраивать картинку?+
Мелкие иконки и спрайты — хорошие кандидаты: встраивание экономит запрос. Base64 примерно на 33% больше файла, так что для крупных картинок невыгодно.
Какие форматы подходят?+
Любая растровая или векторная картинка, которую читает браузер — PNG, JPG, SVG, GIF, WebP и другие.
Моя картинка загружается?+
Нет. Файл читается локально через FileReader браузера; он не покидает устройство.
Вам может пригодиться
Некоторые ссылки — партнёрские, подробнее
Похожие инструменты
Форматирование, проверка и минификация JSON в браузере.
Кодирование и декодирование Base64, с поддержкой UTF-8.
Декодируйте заголовок и payload JWT в браузере.
Проверяйте регулярные выражения с подсветкой совпадений.
Кодирование и декодирование URL и query-строк.
Генерация случайных UUID v4, в том числе списком.