Кодиране на изображение в Base64 / Data URI

URI на данни е URL адрес, който директно съдържа данните на ресурс вместо посочете към отдалечен файл. Общата му форма е data:[][;base64],. За изображение обикновено имаме data:image/png;base64,iVBORw0KGgo…. Ресурсът е вграден в HTML, CSS или JSON и се зарежда без допълнителна HTTP заявка.

Често срещани мотивации:

• Намалете HTTP заявките: интегрирайте икона директно в CSS, вместо да я зареждате в допълнение към документа
• Подпис на имейл с вградено изображение: няма риск изображението да бъде блокирано като отдалечено съдържание
• Уеб компоненти / уеб работници: където зареждането на външен ресурс често създава проблем с обхват или CORS
• Локално хранилище (LocalStorage, IndexedDB, база данни): сериализиране на миниизображение на аватар в низ
• Самостоятелни фрагменти: самостоятелен HTML файл, без външни зависимости

Някои конкретни контексти, при които кодирането на изображения Base64 е оправдано:

• SVG вградени икони в CSS (background-image: url("data:image/svg+xml;base64,…"))
• Персонализирани имейл подписи с лого
• Бързо създаване на прототипи на самостоятелна страница, споделена по имейл
• Самостоятелни уеб компоненти (един файл с възможност за разгръщане)
• Генериране на PDF от страна на браузъра (jsPDF) с вградени миниатюри
• Тестови данни (мокове), които съдържат изображения

Три стъпки:

1. Качете вашето изображение (PNG, JPG, SVG, WebP, GIF) през зоната за пускане
2. Щракнете върху „Кодиране“
3. Копирайте получения URI на данни със специалния бутон и го поставете във вашия HTML, CSS или JSON

Base64 не е сребърен куршум. Някои предпазни мерки:

• Base64 увеличава размера с ~33%: 4 ASCII знака за всеки 3 двоични байта
• Кодираните изображения не се кешират отделно от браузъра; те се презареждат с HTML/CSS, който ги съдържа
• Предпочита се за изображения под 10 KB; освен това външен файл обикновено е по-ефективен
• За SVG предпочитайте URL кодиране (чрез encodeURIComponent) вместо Base64: резултатът е по-кратък и остава анализируем като текст
• Съвременни инструменти за изграждане (Webpack, Vite) автоматизират избора Base64 срещу Base64. външен файл чрез конфигурируем размер на прага

HTML:

CSS:

.icon {
  фон: url("данни:изображение/svg+xml;base64,PHN2ZyB4bWxucz0i…") без повторение;
  ширина: 16px;
  височина: 16px;
}

JSON (фалшиви данни):

Каква е разликата между Base64 и двоичния файл?

Двоичният представлява необработените байтове на файл. Base64 е кодиране, което трансформира тези байтове в 64 печатни ASCII знака (A-Z, a-z, 0-9, +, /). Текстовите контексти (HTML, JSON, имейл) не го правят не може да носи двоичен; Base64 решава този проблем с цената на режийни разходи за размер от 33%.

Защо моят URI адрес за данни е толкова дълъг?

Изображение от 30 KB в двоичен формат става ~40 KB в Base64. И всеки символ е ASCII байт, така че да, веригата е дълга. Това е присъщо на кодирането. За големи изображения запазете външен файл.

Всички ли браузъри поддържат URI адреси за данни?

Да, без изключение сред съвременните браузъри (Chrome, Firefox, Safari, Edge от IE8 дори). Ограничения исторически: IE8 ограничен до 32 KB. Без повече притеснения днес в мрежата.

Как да декодирам URI на данни?

Нашият декодер на изображения Base64 прави обратното: поставете вашите URI данни, получете файла с изображение (PNG, JPG, SVG, WebP) готов за качване или запазване.

Base64 срещу URL кодиране за SVG?

За SVG URL кодирането (с encodeURIComponent) създава по-къс низ от Base64 и остава четим като текст. Това е препоръчителният избор в CSS при интегриране на вграден SVG. За двоичните формати (PNG, JPG) Base64 остава задължителен.

Кодирането Base64 влияе ли върху качеството на изображението?

Не. Кодирането е без загуби: това е двоичен байт ↔ Base64 стринг биекция. Пиксели оригинал са строго запазени. Само размерът на транспортирания файл се увеличава с 33%.