Convert multiple images from .WebP to .PNG with Vanilla JS + HTML

codingtrabla tutorial how to convert multiple images from webp format to png using vanilla javascript and html only

Welcome, Team!

In this tutorial, we will create a simple web page using vanilla JavaScript (no framework) and HTML to convert multiple .webp images to .png images.

What is WebP?

According to Wikipedia, WebP is a raster graphics file format developed by Google. It is intended to replace JPEG, PNG, and GIF formats. WebP supports both lossy and lossless compression, along with animation and alpha transparency.

What is PNG?

According to Wikipedia, Portable Network Graphics (PNG) is a raster-graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format (GIF).

It supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without an alpha channel for transparency), and full-color non-palette-based RGB or RGBA images.

WebP to PNG converter based on the tutorial

Here is the link to the WebP to PNG converter tool based on this tutorial—give it a try!

Visit WebP to PNG converter

Watch this tutorial on YouTube

Solving

Step 1 : Create an empty html file on your Desktop

1) Right-click on the desktop.

2) Select the "New" menu item.

3) Click on "Text Document" menu item.

4) Rename the new file to webp-to-png.html

Step 2 : Open the html file in an editor you like

I like VS Code, so I opened it with that.

Step 3 : Copy and paste code, save file

Copy following code and paste it into file webp-to-png.html + save file.

<!DOCTYPE html>

<head>

<title>PNG to WebP Converter</title>

</head>

<body>

<h1>PNG to WebP Converter</h1>

<button id="convertButton">Convert</button>

const imageInput = document.getElementById('imageInput');

const canvas = document.getElementById('canvas');

const convertButton = document.getElementById('convertButton');

const downloadLinksContainer = document.getElementById('downloadLinks');

convertButton.addEventListener('click', () => {

const files = imageInput.files;

if (files.length === 0) {

alert('Please upload one or more PNG or WebP images.');

return;

}

downloadLinksContainer.innerHTML = ''; // Clear previous links

Array.from(files).forEach(file => {

const img = new Image();

img.src = URL.createObjectURL(file);

img.onload = () => {

const context = canvas.getContext('2d');

canvas.width = img.width;

canvas.height = img.height;

context.drawImage(img, 0, 0);

const imageType = file.type; // Either 'image/png' or 'image/webp'

const convertToType = imageType === 'image/png' ? 'image/webp' : 'image/png';

const fileExtension = imageType === 'image/png' ? 'webp' : 'png';

// Convert and create download link

canvas.toBlob((blob) => {

const url = URL.createObjectURL(blob);

const downloadLink = document.createElement('a');

downloadLink.href = url;

downloadLink.download = `converted_${file.name}.${fileExtension}`;

downloadLink.textContent = `Download converted ${file.name} (${fileExtension})`;

downloadLinksContainer.appendChild(downloadLink);

downloadLinksContainer.appendChild(document.createElement('br'));

}, convertToType);

};

});

</script>

</body>

</html>

Step 4 : Open file in browser

Open file webp-to-png.html by double clicking it or right mouse click - in popup menu select "Open With" and select preferred web browser of your system.

open file converter html file in browser by double click or right mouse click open with

Step 5 : Execute the .png to .webp conversion via the tool

Now, let's test our web tool. Click on "Choose Files" and select one or few .png or .webp files. Then, press the "Convert" button. All png will be converted to webp, and webp into png.