У цій статті
Що таке data URI?
Data URI (Uniform Resource Identifier) — це схема, яка дозволяє вбудовувати вміст файлу безпосередньо в рядок URL замість посилання на зовнішній файл. Визначений RFC 2397, data URI кодує вміст вбудовано, використовуючи формат data:[mediatype][;base64],data. Це усуває необхідність окремого HTTP-запиту для отримання ресурсу.
Data URI зазвичай використовуються для вбудовування невеликих зображень, шрифтів, SVG та інших ресурсів безпосередньо в HTML або CSS. Замість посилання на зовнішній файл за URL, весь вміст файлу кодується (зазвичай у base64) і розміщується вбудовано. Це може зменшити кількість HTTP-запитів і спростити розгортання для невеликих ресурсів.
Як створювати data URI
Генератор data URI конвертує вміст файлу або текст у формат data URI. Процес включає визначення MIME-типу та кодування вмісту.
- Текстове введення — введіть текст безпосередньо та вкажіть MIME-тип (text/plain, text/html, text/css, application/json). Текст може бути URL-кодований або base64-кодований
- Завантаження файлу — завантажте будь-який файл (зображення, шрифти, SVG, документи), і генератор автоматично визначить MIME-тип та закодує вміст у base64
- Вибір MIME-типу — тип медіа повідомляє браузеру, як інтерпретувати дані. Поширені типи включають image/png, image/svg+xml, text/css та application/javascript
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати data URI →Коли використовувати data URI
Data URI найбільш корисні для невеликих, часто використовуваних ресурсів, де усунення HTTP-запиту покращує продуктивність.
- Фонові зображення CSS — вбудовуйте невеликі іконки або патерни безпосередньо в CSS, щоб уникнути додаткових запитів. Ідеально для зображень менше 2-4 КБ
- Вбудовані SVG в CSS — вбудовуйте SVG-іконки як data URI у властивості background-image, коли SVG не можна розмістити безпосередньо в HTML
- HTML-шаблони електронних листів — вбудовуйте зображення безпосередньо в HTML листів, оскільки багато поштових клієнтів блокують зовнішні зображення за замовчуванням
Часті запитання
Чи є обмеження розміру для data URI?
Жорсткого обмеження у специфікації немає, але практичні обмеження існують. Більшість сучасних браузерів обробляють data URI до кількох мегабайтів, але Internet Explorer обмежував їх до 32 КБ. Кодування base64 збільшує розмір даних приблизно на 33%. Для ресурсів більше 5-10 КБ зовнішні файли з правильним кешуванням зазвичай ефективніші.
Чи впливають data URI на продуктивність?
Для невеликих ресурсів data URI покращують продуктивність, усуваючи HTTP-запити. Однак дані, закодовані в base64, приблизно на 33% більші за оригінальний файл, і data URI не можуть бути кешовані браузером незалежно. Для великих файлів зовнішні файли з заголовками кешу працюють краще.
Чи безпечні data URI?
Data URI мають наслідки для безпеки. Більшість браузерів блокують виконання JavaScript у data URI. Однак data URI можуть обходити правила Content Security Policy (CSP), якщо вони не налаштовані правильно. При прийнятті data URI, створених користувачами, завжди перевіряйте MIME-тип.