How to Convert Images to WebP in the Browser Using JavaScript

#webpimages #webdev #webimages #imageconvertor

WebP is a modern image format that can significantly reduce image file sizes while maintaining good visual quality. This makes it useful for websites where image performance and loading speed matter.

In this guide, we'll look at how to convert an image to WebP directly in the browser using JavaScript.

Why use WebP?

WebP supports both lossy and lossless compression and is widely supported by modern browsers.

For websites, converting large JPG or PNG images to WebP can help reduce the amount of data that needs to be downloaded.

The basic browser workflow is:

Select an image.
Load it into an HTML canvas.
Convert the canvas to WebP.
Create a downloadable file.

HTML

<input type="file" id="imageInput" accept="image/*">
<button id="convertBtn">Convert to WebP</button>
<a id="downloadLink" style="display:none;">Download WebP</a>

JavaScript

const input = document.getElementById("imageInput");
const button = document.getElementById("convertBtn");
const downloadLink = document.getElementById("downloadLink");

button.addEventListener("click", () => {
    const file = input.files[0];

    if (!file) {
        alert("Please select an image first.");
        return;
    }

    const reader = new FileReader();

    reader.onload = (event) => {
        const image = new Image();

        image.onload = () => {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            canvas.width = image.width;
            canvas.height = image.height;

            context.drawImage(image, 0, 0);

            canvas.toBlob(
                (blob) => {
                    const url = URL.createObjectURL(blob);

                    downloadLink.href = url;
                    downloadLink.download = "converted-image.webp";
                    downloadLink.textContent = "Download WebP";
                    downloadLink.style.display = "inline-block";
                },
                "image/webp",
                0.85
            );
        };

        image.src = event.target.result;
    };

    reader.readAsDataURL(file);
});

Processing images completely in the browser

One advantage of this approach is that the image can be processed locally in the browser. Depending on how an application is implemented, this can avoid uploading the original image to a remote server.

This can be useful when building privacy-focused image conversion tools.

If you want to convert an image without writing any code, you can also use Instant Convert Tools' Image to WebP Converter.

It supports browser-based image conversion and is designed for quick JPG and PNG to WebP conversion.

Improving the converter

A production-ready image converter can include additional options such as:

WebP quality control
Resize before conversion
Drag and drop upload
Multiple image conversion
File size comparison
Preview before downloading
JPEG, PNG and WebP support

For bulk processing, you can also use browser APIs to process multiple files without requiring a traditional server upload workflow.

Conclusion

The Canvas API provides a simple way to convert images to WebP using JavaScript. For many basic use cases, the entire process can happen directly in the browser.

This approach is especially useful for small web applications, image utilities and privacy-focused tools where users don't necessarily need to upload their original files to a server.

DEV Community