Конвертер Data URI для CSS
Превращайте изображение или небольшой файл в CSS data URI — получите готовое правило background-image, значение url(), HTML-тег <img> и необработанный data URI. Работает в вашем браузере.
Ввод
Файл читается локально — он никогда не загружается.
Вывод
Другие способы использовать этот инструмент
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Конвертер Data URI для CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
Также доступно через
Руководства
Превращайте небольшое изображение в CSS, который можно сразу вставить в таблицу стилей. Загрузите файл и получите четыре готовых результата: полное правило background-image, отдельное значение url("data:…"), HTML-тег <img> и необработанный data URI.
Как пользоваться
- Загрузите изображение (PNG, JPEG, GIF, WebP, SVG или любой другой небольшой ресурс).
- Укажите CSS-селектор, к которому должно применяться правило, и при необходимости текст
altдля тега<img>. - Скопируйте нужный фрагмент.
Когда встраивать изображение
Встраивание экономит HTTP-запрос, что полезно для мелких иконок, узоров и заглушек. Base64 увеличивает размер примерно на 33%, а ресурс больше нельзя кэшировать отдельно, поэтому оставляйте его для файлов размером в несколько килобайт — для всего большего используйте обычный связанный файл.
Конфиденциальность
Файл читается вашим браузером и конвертируется локально; он никогда не загружается.
Похожие инструменты
Если нужна только сырая строка, используйте Генератор Data URI или Файл в Base64. Чтобы превратить Base64 обратно в файл, используйте Base64 в файл.