I Built a Free PNG to WebP Converter Using Only Frontend — Here’s What I Learned

🚀 Introduction I recently built a simple online tool to convert PNG images to WebP — and I challenged myself to do it using only frontend technologies. No backend. No file uploads to a server. At first, it sounded easy… but there were a few interesting challenges along the way. 🤔 Why I Built This If you've worked with images on the web, you probably know this: PNG files are large They slow down websites Page speed affects SEO WebP solves most of these problems: Smaller file size Good quality Supported by modern browsers So I thought: 👉 Why not build a simple tool that converts PNG to WebP instantly? ⚙️ Tech Stack I kept things simple: Frontend: Next.js (CSR) Image processing: HTMLCanvas API No backend at all The idea was: Let the browser handle everything. 🧠 How It Works The core idea is surprisingly straightforward. User uploads a PNG image Load it into an <img> element Draw it onto a <canvas> Export it as WebP Here’s a simplified version: const convertToWebP = ( file ) => { const img