Как пользоваться
- Перетащите изображения в область загрузки, нажмите на неё, чтобы выбрать файлы, или вставьте изображение из буфера обмена. Можно обработать сразу несколько файлов.
- При желании выберите в списке «Преобразовать в» целевой формат (PNG, JPEG или WebP), настройте качество и ограничьте ширину в параметре «Макс. ширина».
- Проверьте размеры, исходный размер файла и размер после кодирования, которые показаны для каждого изображения.
- Скопируйте или скачайте нужный результат: data URI, чистый Base64, тег HTML img, CSS background-image или Markdown.
Как работает преобразование изображения в Base64
Base64 превращает байты файла изображения в обычный текст из 64 символов. Каждые 3 байта становятся 4 символами, поэтому текст примерно на 33% больше файла. Data URI добавляет короткий префикс с типом MIME, например data:image/png;base64,, и благодаря этому браузер может показать такой текст везде, где ожидается URL изображения.
Изображение читается и кодируется локально в вашем браузере. Оно никуда не загружается, поэтому личные скриншоты и неопубликованные макеты остаются на вашем устройстве.
Какой вариант результата копировать?
- Data URI — для атрибутов
src, JavaScript и полей JSON, в которых ожидается URL. - Чистый Base64 — для API, которым нужны только закодированные байты; обычно рядом есть отдельное поле для типа MIME или имени файла.
- Тег HTML img — чтобы вставить его прямо в страницу или шаблон.
- CSS background-image — для значков и декоративных элементов в таблице стилей.
- Markdown — для документации и заметок. Некоторые средства отображения Markdown, в том числе GitHub, не показывают изображения в виде data URI.
Поддерживаемые форматы вкратце
По первым символам строки Base64 можно определить тип файла, потому что в них закодирована сигнатура формата.
| Формат | Тип MIME | Начало строки Base64 |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy или PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | зависит от файла |
| TIFF | image/tiff | SUkqAA или TU0AKg |
Когда встраивать изображение выгодно
Data URI избавляет от лишнего сетевого запроса и делает файл самодостаточным. Это подходит для небольших значков и логотипов размером в несколько килобайт, HTML-отчётов в одном файле, крошечных размытых заглушек и изображений, передаваемых внутри JSON. Для больших фотографий это неудачный выбор: лишняя треть объёма, отсутствие отдельного кеширования в браузере и более тяжёлый файл HTML или CSS, который нужно загрузить до начала отрисовки, обычно обходятся дороже сэкономленного запроса. Если ваш сайт отправляет заголовок Content-Security-Policy, для встроенных изображений также нужно разрешить data: в img-src.
Часто задаваемые вопросы
Загружаются ли мои изображения на сервер?
Нет. Браузер читает каждый файл и кодирует его на вашем устройстве. Ничего не отправляется ни на base64.is, ни куда-либо ещё.
Почему текст Base64 больше самого изображения?
Base64 использует 4 символа на каждые 3 байта, поэтому результат примерно на 33% больше, плюс префикс data URI. Чтобы сократить его, задайте максимальную ширину или преобразуйте изображение в WebP или JPEG с более низким качеством.
Можно ли преобразовать несколько изображений сразу?
Да. Выберите или перетащите несколько файлов. Для каждого изображения выводятся отдельный предпросмотр, размеры и результаты, и у каждого результата есть кнопки «Копировать» и «Скачать».
Работают ли изображения Base64 в HTML-письмах?
cid:.