ÐонвеÑÑÐµÑ Ð¸Ð·Ð¾Ð±Ñажений в Base64
ÐонвеÑÑиÑÑйÑе изобÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð² ÑÑÑоки Base64 и обÑаÑно пÑÑмо в ваÑем бÑаÑзеÑе.
ÐеÑеÑаÑиÑе изобÑажение ÑÑда или нажмиÑе Ð´Ð»Ñ Ð²ÑбоÑа
РконвеÑÑеÑе изобÑажений в Base64
ÐонвеÑÑиÑÑйÑе изобÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð² ÑÑÑоки, закодиÑованнÑе в Base64, Ð´Ð»Ñ Ð²ÑÑÑÐ°Ð¸Ð²Ð°Ð½Ð¸Ñ Ð² HTML, CSS или JSON, либо декодиÑÑйÑе ÑÑÑÐ¾ÐºÑ Base64 обÑаÑно в изобÑажение Ð´Ð»Ñ ÑкаÑиваниÑ. ÐÑÑ Ð¾Ð±ÑабоÑка вÑполнÑеÑÑÑ Ð»Ð¾ÐºÐ°Ð»Ñно в ваÑем бÑаÑзеÑе.
Что это за инструмент?
Конвертируйте любое изображение в текстовую строку, закодированную в Base64, или декодируйте существующую строку Base64 обратно в просматриваемое, скачиваемое изображение — всё локально в вашем браузере без загрузки на сервер.
Как использовать
- Перетащите изображение в область загрузки или нажмите на неё, чтобы выбрать файл.
- Строка Base64 появится автоматически — нажмите «Копировать», чтобы использовать её в коде.
- Чтобы пойти в обратную сторону, вставьте строку Base64 вида data:image/... в текстовое поле и нажмите «Предпросмотр».
- Нажмите «Скачать», чтобы сохранить показанное изображение на устройство.
Типичные случаи использования
- Встраивание небольших изображений прямо в HTML или CSS без лишних HTTP-запросов
- Включение изображений в JSON-пейлоады или шаблоны писем
- Быстрая проверка того, как выглядит изображение, закодированное в строку Base64
- Отладка data URI в ответах API
Советы и хитрости
- Кодирование Base64 увеличивает размер файла примерно на 33% — подходит для небольших иконок, а не крупных фотографий.
- Результат включает полный префикс data:image/..., готовый для вставки прямо в атрибут src тега <img>.
Часто задаваемые вопросы
Почему я захотел бы конвертировать изображение в Base64 вместо того, чтобы просто ссылаться на файл?
Встраивание изображения как Base64 избегает отдельного HTTP-запроса, что полезно для небольших иконок или встроенных изображений, упакованных прямо в HTML, CSS или JSON, где дополнительный сетевой раунд не стоит этого.
Является ли кодирование Base64 хорошей идеей для больших фотографий?
Обычно нет. Base64 увеличивает размер файла примерно на 33% и предотвращает отдельное кэширование изображения браузером, поэтому оно лучше зарезервировано для небольших активов вроде значков или логотипов, а не полноразмерных фотографий.
Что означает префикс data:image/...?
Это схема data URI, которая говорит браузеру, что следующая строка — это встроенные данные изображения и указывает MIME-тип (например, image/png), поэтому браузеры знают, как отображать её прямо без отдельного файла.
Могу ли я предпросмотреть изображение из строки Base64, которая у меня уже есть?
Да. Вставьте полную строку data:image/... в текстовое поле декодирования и нажмите «Предпросмотр» для отображения, затем используйте «Скачать» для сохранения в виде обычного файла изображения.
Мои изображения загружаются когда я их конвертирую?
Нет. Кодирование и декодирование происходят локально в вашем браузере — никакие данные изображения не отправляются на сервер.
Конвертируйте изображения в строки Base64 и декодируйте Base64 обратно в изображения прямо в браузере. Бесплатно, быстро, без загрузки на сервер.