WebP is a modern image format developed by Google that provides high-quality compression and supports features like transparency and animation.
In this tutorial, we’ll create a simple web page that allows users to convert image files (JPG or PNG) to the WebP format using HTML, CSS, and JavaScript.
Live Demo
HTML Structure
Let’s start with the HTML structure. We’ll create a file input, a label to simulate the file input click, a display area for the selected image name, and a button to trigger the conversion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Conversion</title>
<link src="style.css"></link>
</head>
<body>
<div id="container">
<label for="imageInput">Choose an Image</label>
<input type="file" id="imageInput" accept="image/*" onchange="displayFileName()">
<p id="fileName"></p>
<button onclick="convertToWebP()">Convert to WebP</button>
</div>
<script src="index.js"></script>
</body>
</html>
Styling with CSS
To make the page visually appealing, let’s add some basic CSS styling. This will create a centered container with styled elements.
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#container {
text-align: center;
}
#imageInput {
display: none;
}
label {
display: inline-block;
padding: 10px 15px;
background-color: #3498db;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
button {
margin-top: 10px;
padding: 10px 15px;
background-color: #2ecc71;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
JavaScript for Conversion
Now, let’s add JavaScript to handle the file input, display the selected image name, and convert the image to WebP format.
function convertToWebP() {
var inputElement = document.getElementById('imageInput');
if (!inputElement.files || inputElement.files.length === 0) {
alert('Please select an image file.');
return;
}
var file = inputElement.files[0];
var img = new Image();
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var webpDataURL = canvas.toDataURL('image/webp');
// Use the original file name with a ".webp" extension for the downloaded WebP file
var downloadLink = document.createElement('a');
downloadLink.href = webpDataURL;
downloadLink.download = file.name.replace(/\.[^/.]+$/, "") + ".webp";
downloadLink.click();
};
};
reader.readAsDataURL(file);
}
function displayFileName() {
var input = document.getElementById('imageInput');
var fileNameDisplay = document.getElementById('fileName');
if (input.files.length > 0) {
fileNameDisplay.innerText = 'Selected Image: ' + input.files[0].name;
} else {
fileNameDisplay.innerText = '';
}
}
Technologies Used
- HTML / CSS / JavaScript
About the code
Compatible browsers:– Chrome, Edge, Firefox, Opera, Safari
Responsive:– Yes
Dependencies:– N/A
[ You might also like: Building a Robust JSON to CSV Download Converter with JavaScript ]
Conclusion
With this simple web page, users can now choose an image file, see its name displayed on the page, and convert it to the WebP format with the click of a button. This serves as a foundation for a more robust image conversion tool or can be integrated into existing projects where WebP format support is desired.
Feel free to enhance and customize the page further based on your specific needs and design preferences.
Happy coding!
