feat: Base64 Image Previewer & Data URI Converter — inspect, preview, and generate embedded image URIs

[ajithakdev]

Summary

Add a dedicated Base64 Image & Data URI utility tool that allows developers to inspect base64 images, preview them in-browser, and convert files into production-ready CSS/HTML Data URIs.

Motivation

Developers frequently embed small icons, SVGs, or splash images as Data URIs in CSS or HTML, or receive raw base64 image strings from canvas exports or JSON APIs. Checking what the image looks like usually means pasting into an external site or writing throwaway HTML files.

Features

• File to Base64 / Data URI:
  • Drag-and-drop or file picker for PNG, JPEG, SVG, WebP, GIF, ICO.
  • Automatically generates:
    • Raw Base64 string.
    • Full Data URI (data:image/png;base64,...).
    • HTML <img src="..."> tag.
    • CSS background-image: url("..." declaration.
• Base64 to Image Preview:
  • Paste any raw base64 string or Data URI.
  • Renders an instant live preview with checkered transparency background.
  • Displays image metadata: width × height, file format, unencoded byte size vs base64 byte size (+33% overhead indicator).
  • One-click Download as Image File button.

Engineering & Privacy

• 100% Client-Side: Uses FileReader, Image, and Canvas APIs.
• Privacy First: Images are decoded directly in browser memory and never uploaded anywhere.
• Zero Dependencies: Pure browser Web APIs.