Technical Specification: Base64 Image Size & Converter Tool

Overview

A single-file, browser-based utility that allows developers to calculate the file size of Base64-encoded strings (Data URIs). The tool handles input validation, provides size breakdown (bytes, KB, MB), and enables file re-construction via Blob objects for download.

Core Features

• Input Handling: Textarea for pasting Data URIs or plain Base64 strings. Smart detection to strip Data URI headers (e.g., data:image/png;base64,).
• Live Calculation: Real-time updates showing the calculated binary size of the decoded payload.
• Image Preview: Render the image directly in the UI upon successful decoding.
• Download Capability: Convert Base64 string back to a downloadable image file (Blob URL).
• Copy to Clipboard: Ability to copy the raw Data URI or the decoded binary data (if applicable).
• Zero-Storage Architecture: Fully stateless (no cookies, no localStorage).

UI Layout

• Header: Clean, centered title with a brief subtitle describing the tool's utility.
• Main Tool Area:
  • Split layout (or stacked on mobile):
    • Input Panel: Large text area with placeholder text and clear/paste buttons.
    • Result Panel: Cards showing Byte count, Kilobyte/Megabyte equivalent, and Image Preview thumbnail.
• Styling:
  • Palette: Use a clean white (#FFFFFF) background, soft gray (#F3F4F6) secondary surfaces, and a vibrant primary accent color (e.g., #2563EB) for buttons.
  • Typography: Sans-serif, human-readable fonts (Inter or system UI).
  • Shadows: Soft, subtle elevation (box-shadow) on cards to create depth.

Technical Implementation Constraints

• Vanilla JS: No frameworks. Use native fetch or atob/btoa where applicable, or Buffer/Blob APIs for conversion.
• Iframe Sandboxing:
  • Strictly avoid localStorage, sessionStorage, indexedDB.
  • If using external assets (e.g., Tailwind), include via CDN <link> or <script> tags.
  • Do not trigger any browser alerts or confirms. Use CSS-hidden custom div modals.
• Responsiveness: Use Flexbox or CSS Grid to wrap columns on screens smaller than 768px.
• Performance: Ensure smooth interaction using CSS transitions (transition: all 0.2s ease-in-out). Avoid layout shifts by using fixed-height containers where necessary.

Animations & Micro-interactions

• Fade-in: Results should fade in softly when data is detected.
• Button Active State: Subtle scale-down effect (0.98) when buttons are clicked.
• Feedback: A 'Success' message toast that appears at the top of the UI after a successful copy or conversion.