How to use it
- 1
Choose one JPEG, PNG, WebP, or AVIF file.
- 2
Create the exact source Data URI and a tiny PNG placeholder.
- 3
Copy the required Data URI or the ready-to-use CSS declaration.
What the tool can do
- Format detection from the byte signature rather than the declared MIME type.
- Exact base64 encoding of every source-file byte.
- An aspect-preserving PNG placeholder with no side larger than 24 px.
Common use cases
- Embedding a small local image in CSS or HTML.
- Preparing a separate tiny placeholder for manual integration.
- Checking the effective MIME type from file content.
How it works inside
The source Data URI is built directly from the read bytes and displayed only as text.
The placeholder is decoded and encoded through the current browser's Canvas API.
Questions and answers
Is the file uploaded?
No. Reading, decoding, and encoding happen locally in the browser.
Is this an image optimizer?
No. The exact Data URI preserves every source byte, while the PNG placeholder is generated separately.