Зображення в Base64

Кодуйте зображення як data URI у Base64

Data URI у Base64 перетворює зображення на звичайний текстовий рядок, який можна вставити безпосередньо у ваш HTML або CSS. Браузер декодує його на льоту, тому зображення відображається без окремого запиту файлу — зручно для крихітних іконок, шаблонів листів і самодостатніх сторінок в одному файлі.

Цей інструмент читає ваш файл локально та видає повний data: URI, а також готові фрагменти <img> і CSS background-image, які можна скопіювати одним клацанням. Нічого не завантажується — кодування повністю відбувається у вашому браузері.

Коли варто вбудовувати, а коли ні

Вбудовування прибирає один HTTP-запит, що може пришвидшити невеликі критично важливі зображення. Але Base64 приблизно на 33% більший за двійковий файл і не може кешуватися окремо, тому уникайте його для великих фотографій або зображень, що повторно використовуються на багатьох сторінках. Як практичне правило, вбудовуйте іконки розміром до кількох кілобайтів, а більші зображення залишайте звичайними файлами.

Як використовувати результат

Data URI зберігає початковий тип файлу, наприклад data:image/png;base64, з подальшими закодованими байтами, а рядок стану показує, скільки кілобайтів тексту утворилося. Скористайтеся трьома кнопками копіювання залежно від призначення: чистий URI для значення src або href, тег <img> для HTML (потім додайте змістовний текст alt) або рядок CSS для таблиці стилів.

Практичні застереження

• Довгий рядок Base64 збільшує ваш файл HTML чи CSS і сповільнює його читання, а також завантажується знову з кожною сторінкою, що його містить. Gzip або Brotli повертають частину надлишку, але дані зображення вже стиснуті, тож виграш обмежений.
• Якщо ваш сайт використовує Content Security Policy, img-src має дозволяти URI data:.
• Багато поштових клієнтів блокують або видаляють data URI, тому перевірте, перш ніж покладатися на них у розсилках.
• Спершу стисніть або зменшіть зображення; менше джерело дає значно коротший рядок.

Що добре підходить для вбудовування

Невеликі іконки, крихітні зображення-заповнювачі, індикатори завантаження, прості логотипи та зображення в HTML-демо в одному файлі підходять найкраще. Фотографії, головні банери та будь-які зображення, що показуються на багатьох сторінках, краще віддавати як окремі файли, щоб браузер міг їх кешувати. Кодування відбувається у вашому браузері, а скопійований текст не залишає ваш пристрій, доки ви самі не вставите його кудись.