Example Walkthrough
Inline an icon for quick prototype delivery
Input: icon-32.png (uploaded file)
Action: Image → Base64, then add `data:image/png;base64,` prefix.
Output: A complete Data URL ready for an img src attribute.
Convert Images to Base64 for Inline Usage
For small assets in docs, demos, or prototype pages, convert images into Data URL or Base64 strings and keep rendering predictable.
Suitable Input Types
- PNG/JPG/SVG files you want to inline as Data URL
- Existing Data URL strings that need validation or preview
- Raw image Base64 strings without prefix
Step-by-Step Workflow
- Open Image workspace and upload a small image file.
- Copy generated Base64 output and add prefix when Data URL is required.
- Paste into HTML/CSS target and verify rendering in browser.
Common Issues in This Scenario
Data URL prefix missing or wrong
If browser does not render image, verify data:image/;base64, prefix matches the actual file type.
Large file makes payload too heavy
Inline Base64 is best for small assets. For large images, keep file URLs to avoid bloated bundles.
SVG content not shown after decode
Use correct MIME (`image/svg+xml`) and ensure decoded SVG text is valid XML.