Free Online WebP to PNG/JPG Batch Converter

Overview

A high-performance, client-side utility designed to convert .webp images into widely compatible .png or .jpg formats. This application leverages the browser's native Canvas API to perform image decoding and re-encoding entirely on the client machine, ensuring user privacy and zero data usage costs.

Core Features

• Client-Side Processing: Zero server uploads. All operations occur in the browser.
• Batch Workflow: Queue dozens of images, process them in parallel, and export them as a single ZIP file.
• Flexible Output: Toggle between PNG (lossless) and JPG (lossy with quality control).
• Drag-and-Drop Interface: Intuitive file selection zone for improved usability.
• Visual Preview Grid: Display thumbnails of uploaded images with individual status indicators (Pending, Processing, Done).
• ZIP Export: Integrated compression library (jszip) to package processed files for a single click download.

UI/UX Specification

• Aesthetic: Modern SaaS aesthetic. Use a palette of crisp whites, soft grays, and a vibrant primary action color (e.g., #3b82f6 for buttons).
• Layout:
  • Header: Simple title and one-sentence value proposition.
  • Drop Zone: Large, dashed-border area with an upload icon prompt.
  • Control Bar: Settings area for output format (radio buttons) and JPG quality slider (hidden when PNG is selected).
  • File List: A card-based list showing filename, thumbnail, file size, and progress bar per item.
  • Action Bar: Fixed or persistent footer-aligned section containing 'Convert All' and 'Download All' buttons.
• Animations: Subtle fade-ins for file items, smooth transition on the progress bar, and spring-based button hovers.

Technical Implementation Guidelines

• Strict Sandboxing: The app must function within a null-origin iframe. Do not use localStorage, sessionStorage, or cookies.
• State Management: Use plain JavaScript objects to track the file queue, conversion status, and processing state.
• Image Conversion: Use new Image(), canvas.getContext('2d'), and canvas.toDataURL() or canvas.toBlob() for the conversion pipeline.
• Dependencies:
  • Use a CDN for Tailwind CSS (via <script src="https://cdn.tailwindcss.com"></script>).
  • Use a CDN for JSZip (via https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js) to handle multi-file archiving.
• Responsive Design: Ensure the grid switches from multiple columns to a single column on mobile devices. Use flexbox/grid for layout stability.
• No Alerts: Replace all browser alert() or prompt() calls with custom styled modal overlays built within the DOM.