Конвертировать Изображение в Base64 Онлайн
Кодируйте изображения в текст Base64 для CSS, HTML и электронных писем.
Для чего нужен
Из изображения в текст одним кликом
Без сервера
Кодирование происходит в вашем браузере. Ваши изображения никогда не покидают устройство.
Готово к вставке
Генерирует полный data URI с префиксом MIME, готовый для HTML, CSS или JSON.
Все форматы
Поддерживает JPG, PNG, WebP, GIF, SVG и любые изображения, поддерживаемые браузером.
Мгновенно
Кодирование происходит немедленно, без загрузки файлов и ожидания ответа сервера.
Как это работает
Три шага — никаких сложностей
Загрузите изображение
Перетащите или выберите изображение для кодирования. Поддерживаются JPG, PNG, WebP, GIF и SVG.
Скопируйте строку Base64
Инструмент автоматически генерирует строку Base64 и полный data URI, готовый к использованию.
Используйте в коде
Вставьте data URI в атрибут src тега img, в CSS background-image или в тело HTML-письма.
FAQ
Остались вопросы?
Base64 — схема кодирования, преобразующая двоичные данные (например, содержимое файла изображения) в строку печатных ASCII-символов. Это позволяет включать данные изображения непосредственно в текстовые форматы, такие как HTML, CSS или JSON, без ссылки на внешний файл.
Base64 полезен для небольших иконок в CSS (позволяет избежать лишнего HTTP-запроса), для изображений в HTML-письмах (некоторые почтовые клиенты блокируют внешние изображения) и для изображений в приложениях, работающих без сервера или в офлайн-среде. Не рекомендуется для больших изображений.
Base64 представляет каждую группу из 3 байт двоичных данных 4 ASCII-символами. Это означает, что каждый байт исходных данных требует 1,33 байта в Base64, что даёт увеличение размера примерно на 33%. Кроме того, браузер должен декодировать строку перед отображением, что создаёт нагрузку на процессор.
Data URI следует формату: data:[тип MIME];base64,[данные]. Например, для PNG: data:image/png;base64,iVBORw0KGgo... Тип MIME указывает браузеру, как интерпретировать данные. Распространённые типы: image/png, image/jpeg, image/webp и image/svg+xml.
Негативно для больших изображений. Base64-изображения не могут кэшироваться браузером отдельно (кэшируются вместе с содержащим их HTML или CSS), увеличивают размер документа и требуют декодирования. Для небольших изображений, таких как иконки (менее 2–3 КБ), преимущество от исключения HTTP-запроса может перевесить издержки по размеру.
Base64 в веб-разработке: когда использовать и когда избегать
Кодирование Base64 было определено в RFC 2045 (1996) как часть стандарта MIME для электронной почты. В веб-контексте data URI (RFC 2397, 1998) позволили встраивать данные изображений непосредственно в HTML и CSS. Это было особенно ценно в первые годы HTTP/1.1, когда каждый HTTP-запрос имел значительную стоимость по задержке, и сокращение числа запросов было ключевой техникой оптимизации.
С появлением HTTP/2 и HTTP/3, допускающих мультиплексирование запросов, аргумент производительности в пользу Base64 существенно ослаб. Тем не менее Base64 остаётся стандартным решением для встраивания изображений в HTML-письма (где почтовые клиенты часто блокируют внешние изображения), в PDF-документы, генерируемые кодом, и в приложения, которым нужно быть полностью автономными (например, Electron-приложения или локально сохранённые страницы).
Практическое правило в современной веб-разработке: используйте Base64 для изображений меньше 2–3 КБ (SVG-иконки, спиннеры, небольшие декоративные разделители), где экономия на HTTP-запросе оправдывает накладные расходы по размеру. Для больших изображений используйте файлы по URL и воспользуйтесь кэшированием браузера и мультиплексированием HTTP/2.