Що таке Base64 і коли його слід використовувати для вбудовування зображень?

Якщо ви якийсь час працювали над сучасною веб-розробкою, то, ймовірно, стикалися з нескінченним хаотичним рядом символів, які починалися з data:image/png;base64, за якими слідувала чиста тарабарщина. Це зображення в кодуванні Base64.

Що саме таке кодування Base64?

За своєю суттю Base64 — це схема кодування двійкового кодування в текст. Він приймає двійкові дані (наприклад, зображення, аудіофайл або скомпільований документ) і перетворює їх у формат рядка ASCII. Назва "Base64" походить від того факту, що він використовує алфавіт із 64 символів (A-Z, a-z, 0-9, + та /) для представлення даних.

Це перетворення є надзвичайно корисним, оскільки багато Інтернет-протоколів (наприклад, HTTP, HTML і CSS) розроблено спеціально для безпечної обробки звичайного тексту. Перетворюючи двійкові дані в текст, ми гарантуємо, що дані можуть передаватися через ці протоколи без пошкодження.

Коли слід вставляти зображення за допомогою Base64?

Вбудовування рядків Base64 безпосередньо у ваш HTML (`<img src="data:image...">`) або ваш CSS (`background-image: url("data:image...")`) замість використання стандартної URL-адреси може мати значні переваги, але лише в дуже конкретних випадках використання:

• Мікропіктограми та обертові елементи: якщо у вас є невеликі елементи інтерфейсу користувача (наприклад, ручка завантаження розміром 1 КБ або галочка), кодування їх у форматі Base64 позбавляє браузер від необхідності робити окремий запит HTTP для отримання файлу зображення. Це пришвидшує рендеринг критичного інтерфейсу користувача.
• Електронні листи HTML: багато клієнтів електронної пошти блокують завантаження зовнішніх зображень з міркувань конфіденційності. Вбудовування логотипу безпосередньо в HTML через Base64 може обійти ці блоки, забезпечуючи ідеальний вигляд вашого електронного листа.
• Однофайлові веб-програми: якщо ви створюєте інструмент, який потрібно розповсюджувати як один файл `.html`, який працює повністю в автономному режимі, вбудовування всіх ресурсів через Base64 є єдиним способом його правильного пакетування.

Коли вам слід уникати Base64?

Найбільшим недоліком кодування Base64 є те, що воно збільшує розмір файлу ресурсу приблизно на 33%. Зображення розміром 1 МБ перетвориться на рядок тексту розміром 1,33 МБ.

Крім того, браузери не можуть самостійно кешувати рядок Base64. Якщо ви вбудовуєте масивний рядок Base64 у свій файл CSS, браузер повинен завантажувати цей масивний файл CSS під час кожного завантаження сторінки, а розбір величезних текстових рядків блокує основний потік, викликаючи серйозну затримку (поганий час інтерактивності).

Золоте правило: ніколи не кодуйте Base64 великі фотографії чи зображення героїв. Кодуйте лише крихітні піктограми SVG або мікроскопічні растрові файли, де накладні витрати HTTP-запиту є гіршими, ніж 33% штрафу за розмір файлу.