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.

1. User uploads a PNG image
2. Load it into an <img> element
3. Draw it onto a <canvas>
4. 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?