Конвертор на изображения → Base64

Кодирайте всяко изображение в Base64 data URI или поставете data URI, за да го декодирате обратно в изображение. Копирайте резултата или вземете CSS url() фрагмента. Нищо не напуска устройството ви.

Как работи Изображение към Base64

Изображение към Base64 чете файла с изображение и го кодира като Base64 URI за данни, която можете да вградите директно в HTML, CSS или JSON, без да е необходима отделна заявка за файл. Конвертирането използва FileReader API в браузъра; никакви байтове от изображението не се изпращат на сървър. Можете също така да поставите обратно Base64 низ, за да го декодирате и прегледате изображението, всичко локално.

Base64 URI за данни е с около 33% по-голям от двоичния оригинал, тъй като всяка група от три байта се разширява до четири ASCII символа. Това увеличение на размера е очакваният компромис за удобството от вграждане на изображение в документ или стилова таблица. Инструментът показва и необработения Base64 низ, и готов за употреба HTML img таг фрагмент, и CSS background-image фрагмент за бързо копиране и поставяне в проекта ви.

Написано от Bastien Sulyan

Как да използвате Изображение към Base64, стъпка по стъпка

Пуснете файл с изображение върху зоната за качване или щракнете, за да го намерите. Приемани формати: JPEG, PNG, WebP, GIF, SVG.
URI за Base64 данни се появява незабавно в изходното поле.
Копирайте необработения Base64 низ или използвайте предварително форматирания HTML img таг или CSS background-image фрагмент.
За декодиране поставете Base64 низ в входното поле и превключете в режим на декодиране, за да прегледате изображението.
Щракнете върху бутона за копиране до всеки фрагмент, за да го копирате в клипборда.

Често срещани приложения

Front-end разработчик вгражда малка икона като URI за данни в CSS файл, за да елиминира допълнителна HTTP заявка.
Разработчик вгражда малък зареждащ индикатор като Base64 атрибут src, така че изображението-заместител да е налично преди зареждането на JavaScript пакета.
QA инженер копира Base64 на тестово изображение, за да го постави директно в JSON полезен товар за API тест.
Конструктор на шаблони за имейли вгражда лого на подпис като Base64 URI за данни, тъй като някои имейл клиенти блокират заявки за външни изображения.

Често задавани въпроси

Защо Base64 изходът е с около една трета по-голям от оригиналния файл?

Кодирането Base64 представлява всеки три двоични байта като четири ASCII символа (съотношение 4/3). Изображение от 100 KB в двоичен формат става приблизително 133 KB като Base64 низ. Това е присъщо на схемата за кодиране, а не ограничение на инструмента.

Предава ли се съдържанието на изображението на сървър по време на кодиране?

Не. FileReader API чете двоичния файл от локалния диск и предава резултата директно на функцията за кодиране в JavaScript в раздела на браузъра. Данните за изображението не напускат устройството.

Мога ли да използвам URI за данни в изходния формат в произволен HTML или CSS контекст?

Да. URI за данни, започваща с data:image/jpeg;base64, последвана от кодирания низ, може да се използва като атрибут src на img таг или като стойността url() в CSS свойство background-image. Всички съвременни браузъри поддържат URI за данни. Много големите URI за данни могат да забавят изобразяването на страницата, така че вграждането обикновено е запазено за малки изображения под няколко килобайта.

Поддържа ли инструментът анимирани GIF файлове?

Инструментът кодира пълното двоично съдържание на всеки файл, който предоставите, включително анимирани GIF файлове. Полученото URI за данни, когато се използва като src на img таг, ще възпроизвежда анимацията в браузъри, поддържащи GIF анимация.

Как да направя обратното и да декодирам Base64 низ обратно в изображение?

Превключете инструмента в режим на декодиране, поставете своя Base64 низ (с или без префикса data:) и инструментът ще го декодира и ще предложи двоичното изображение за изтегляне, показвайки и предварителен преглед.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения