Base64-изображения и data URLs: когда это уместно
Data URLs подходят для маленьких файлов, но влияют на размер, кэш и скорость.
Суть
Data URL помещает небольшой файл внутрь URL-строки. Для изображений часто используется начало data:image/png;base64,.
Хороший случай
Подходит для крошечных иконок, тестов, простых email-картинок и сгенерированных превью.
Цена
Base64 превращает 3 байта в 4 символа. HTML или CSS становится больше, и браузер сначала читает этот файл.
Ограничения
MDN описывает лимиты длины и правила безопасности. Современные браузеры блокируют переход верхнего уровня на data: URL из-за фишинга.
Правило
Встраивайте только файлы, которые не мешают читать исходный код. Обычные изображения и загрузки держите отдельными файлами.