Как пользоваться
- 1
Выберите один JPEG, PNG, WebP или AVIF.
- 2
Создайте точный Data URI исходника и миниатюрный PNG placeholder.
- 3
Скопируйте нужный Data URI или готовое CSS-свойство.
Что умеет инструмент
- Определение формата по сигнатуре байтов, а не по заявленному MIME type.
- Точное base64-кодирование всех байтов исходного файла.
- PNG placeholder с сохранением пропорций и стороной не более 24 px.
Когда пригодится
- Встраивание небольшого локального изображения в CSS или HTML.
- Подготовка отдельной миниатюрной заглушки для ручной интеграции.
- Проверка фактического MIME type по содержимому файла.
Что происходит внутри
Исходный Data URI строится непосредственно из прочитанных байтов и показывается только как текст.
Placeholder декодируется и кодируется через Canvas API текущего браузера.
Вопросы и ответы
Файл отправляется на сервер?
Нет. Чтение, декодирование и кодирование выполняются локально в браузере.
Это оптимизатор изображений?
Нет. Точный Data URI сохраняет все байты исходника, а PNG placeholder создаётся отдельно.