Изображение в Base64
Превратите изображение в data URI, который можно сразу вставить в CSS или HTML.
- Работает на вашем устройстве — файл никуда не отправляется
- Без регистрации, водяных знаков и суточных лимитов
- Бесплатно, без ограничений на число использований
Как это работает
Data URI встраивает изображение прямо в исходный код вместо ссылки на отдельный файл. Это убирает один сетевой запрос, что важно для крошечных изображений, за каждое из которых иначе пришлось бы платить отдельным обращением к серверу.
Когда это оправдано
Небольшие значки, логотипы и одноцветная графика. Примерно до 2 КБ сэкономленный запрос обычно перевешивает издержки. Выше этого значения лучше обычная ссылка на файл.
Потеря в размере
Base64 кодирует три байта четырьмя символами, поэтому data URI примерно на 33% больше файла. Кроме того, его нельзя кэшировать отдельно — он загружается заново вместе с каждой копией таблицы стилей или страницы, в которой находится.
Куда вставлять
Прямо в CSS url() или в атрибут src у img. Результат уже содержит правильный префикс типа носителя.
Изображение в Base64 — вопросы и ответы
Почему есть ограничение по размеру?
Data URI предназначены для исходного кода, а очень большие раздувают каждую страницу, в которую они включены. Лимит — 2 МБ.
Работает ли это с SVG?
SVG — это текст, поэтому его можно встроить напрямую без Base64, и так получится меньше.
Моё изображение загружается на сервер?
Нет. Кодирование выполняется в вашем браузере.