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

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

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 ]

[step-3-text]

[step-3-img]

[step-4 : open in browser ]

[step-4-text]

[step-4-img]

[step-5 : try to convert ]

[step-5-text]

[step-5-img]

Well done

[Code explanation]

[Code explanation text ]

[Still Have some troubles?]

[Fiverr link to help with tutorial ]