Кодер изображений Base64

Перетащите свое изображение (JPG, PNG, SVG, WEBP) или щелкните, чтобы загрузить. Инструмент мгновенно генерирует строку Base64, готовую к использованию в качестве URI данных в CSS или HTML.

Используйте кодировку Base64 для небольших изображений, таких как значки, логотипы и элементы пользовательского интерфейса (менее 5 КБ). Это исключает HTTP-запросы к этим ресурсам, что может немного улучшить производительность. Для больших изображений лучше использовать внешние URL-адреса.

Используйте его в качестве фонового изображения: background-image: url('data:image/png;base64,iVBORw0KGgo...'); Инструмент автоматически генерирует этот фрагмент CSS, готовый к копированию.

Используйте его как атрибут src тега img: <img src='data:image/png;base64,iVBORw0KGgo...'/>. Инструмент генерирует для вас этот фрагмент HTML.

Да. Кодировка Base64 увеличивает размер файла примерно на 33% по сравнению с двоичным оригиналом. Это компромисс: вы сохраняете HTTP-запрос, но объем данных больше. Это стоит того для очень маленьких изображений, но не для больших фотографий.

Да. Переключитесь в режим декодирования, вставьте строку Base64 (с префиксом data:image/... или без него), и инструмент отобразит изображение и позволит вам загрузить его в виде файла. Это полезно для извлечения внедренных изображений из исходного кода HTML или полезных данных API.

Добавьте JPG, PNG, GIF, WebP или SVG, и инструмент выведет строку Base64 плюс готовые к вставке фрагменты: URI данных, img src и фоновый URL-адрес CSS. Конвертация локальная, поэтому изображение никогда не загружается.

Вставьте Base64 (или URI полных данных), и инструмент отобразит и позволит вам загрузить исходное изображение, что полезно для извлечения встроенного изображения из CSS или HTML.

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

Да, примерно на треть, поскольку двоичный код представлен в виде текста. Вот почему это лучше всего подходит для небольших ресурсов, где отказ от запроса перевешивает размер.

Нет. Кодирование и декодирование происходят исключительно в вашем браузере.