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

Wuyn Tiny — Sun, 22 Mar 2026 04:37:10 +0000

🚀 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 = new Image();
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    const webp = canvas.toDataURL("image/webp", 0.8);
    console.log(webp);
  };

  img.src = URL.createObjectURL(file);
};

⚠️ Challenges I Faced
1. Memory Issues

Large images can easily crash the tab or freeze the UI.

👉 Solution:

Limit file size
Resize before processing 2. Performance

Processing happens on the main thread → UI lag.

👉 Solution:

Show loading state
Consider Web Workers (future improvement) 3. Quality vs Size

canvas.toDataURL("image/webp", 0.8);

0.8 = good balance
Lower → smaller file
Higher → better quality

🔍 Why No Backend?

I intentionally avoided using a backend because:

Faster (no upload time)
Better privacy (images stay on device)
Lower cost (no server needed)

But there are trade-offs:

Limited by browser performance
Not ideal for large files

🌐 Live Tool

If you want to try it, here’s the tool I built:

👉 https://toolavin.com/png-to-webp

It’s free, no signup required.

📊 What I Learned

The browser is more powerful than we think
Simple tools can still bring real value
Performance matters more than features

Also:

Building small tools is a great way to learn and experiment.

💡 What’s Next?

I’m planning to:

Add batch processing
Support more formats
Improve performance with Web Workers

🙌 Final Thoughts

This was a small project, but I learned a lot from it.

If you're thinking about building a tool:
👉 Just start simple.

You don’t need a complex backend to create something useful.

💬 Feedback Welcome

Would love to hear your thoughts or suggestions 🙌
What would you improve?

Forem: Wuyn Tiny

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