Изображение в Base64

Превратите изображение в data URL в Base64, который можно вставить прямо в HTML, CSS, Markdown или JSON.

Ваши файлы никогда не покидают устройство

Перетащите сюда изображение

Выбрать изображение

PNG, JPEG, WebP, GIF, BMP, AVIF или SVG. Или перетащите его в любое место этой страницы.

Открывается на этом устройстве. Ничего не загружается.

Одно изображение за раз, до 10 МБ. PNG, JPEG, WebP, GIF, BMP, AVIF и SVG.

Как преобразовать изображение в Base64

Выберите изображение или перетащите его на страницу.
Выберите нужную форму: data URL, чистый Base64, CSS, тег HTML img или Markdown.
Нажмите Копировать или скачайте текст файлом.

Встраивание изображений в виде текста

HTML, CSS, JSON, Markdown и тела писем — это текст, а изображения — двоичные данные. Base64 соединяет их: он записывает байты изображения 64 безопасными символами, и всю картинку можно поместить в правило таблицы стилей, тег img или файл конфигурации без отдельной загрузки.

Инструмент читает файл в вашем браузере, определяет его настоящий тип по первым байтам и собирает выбранный вами фрагмент вокруг закодированного текста. Само изображение не меняется: если декодировать Base64, получится точная копия исходного файла.

Советы

Сначала уменьшите изображение инструментом «Сжать изображение» или «Изменить размер изображения»: каждый сэкономленный байт в Base64 даёт ещё треть сверху.
Для простых значков SVG часто меньше любого PNG, даже в виде Base64.
Чтобы декодировать Base64 обратно в файл или закодировать любой другой файл, используйте «Кодирование и декодирование Base64».

Вопросы и ответы

Что такое data URL?

Способ поместить байты файла прямо в ссылку. Он начинается с data:, затем идёт тип файла, например image/png, и ;base64,, а после них — текст Base64. Браузеры показывают его так же, как если бы изображение было загружено из отдельного файла.

Почему Base64 больше изображения?

Base64 записывает каждые 3 байта четырьмя текстовыми символами, поэтому текст примерно на 33 процента больше файла. Веб-серверы, сжимающие текст, возвращают часть этого объёма, но встроенное изображение всё равно больше того же изображения, отдаваемого отдельно.

Когда стоит встраивать изображение?

Для мелочей: значков, крошечных фонов и заглушек размером до нескольких килобайт, а также когда нужен один самодостаточный файл HTML или письмо. Большие изображения лучше хранить отдельными файлами, потому что data URL нельзя кэшировать отдельно, и он загружается заново вместе с каждой страницей или таблицей стилей, где встречается. Инструмент предупредит вас, если размер превысит 100 КБ.

Как определяется тип файла?

По байтам внутри файла, а не по имени, поэтому PNG, сохранённый с расширением .jpg, всё равно получит image/png. Файлы SVG распознаются по тексту и получают тип image/svg+xml.

Моё изображение загружается на сервер?

Нет. Изображение читается и кодируется в вашем браузере, на вашем устройстве.