How To Create Image To WebP Converter Tool In Blogger?
|
| Image To WebP Convertor Tool Script For Blogger |
Hello everyone, Today we will learn to create image to webp convertor tool in blogger. Because an Image to WebP Converter Tool can significantly enhance your website's performance by reducing image sizes without compromising quality. WebP is a modern image format that provides superior compression, allowing faster loading time,that can be helpful in enhancing your website seo.
What Is WebP?
WebP is an image format developed by Google that provides both lossy and lossless compression. By converting images to WebP, you can achieve faster load times on your website, which is crucial for better user experience and SEO.
Why Use WebP Format?
WebP offers several advantages over traditional formats like JPEG and PNG:
- Better Compression: WebP can reduce image sizes by up to 34% compared to JPEG.
- High-Quality: Despite the compression, WebP maintains high image quality.
- Versatility: WebP supports transparency and animated images, making it suitable for various uses.
How I Made This WebP Convertor Tool?
To create this tool, I first structured the design using HTML, adding a file upload button and functional buttons like Convert, Download, and Reset. CSS was applied to style the interface, making it visually appealing and user-friendly. The conversion logic, written in JavaScript, processes uploaded images and converts them into the WebP format. The code also manages button visibility and progress tracking. Finally, I integrated a reset feature and optimized the layout for seamless performance, ensuring the tool is responsive and efficient across devices.
Features Of This WebP Convertor Tool.
This tool allows users to easily convert images to the WebP format with a clean and intuitive interface. It features options to upload multiple images, a progress bar that tracks conversion, and buttons for downloading and resetting after conversion. The "Convert" button triggers the process, while the "Download" button becomes visible only after conversion is complete. Additionally, it offers a user-friendly design with responsive performance across different devices, making it convenient for both beginners and advanced users.
Steps To Create WebP Convertor Tool In Blogger.
- Step 1 : First of all double tap to copy the below given code.
<!--[ Image To WebP Converter HTML ]-->
<div class="container">
<h1>Image to WebP Converter</h1>
<input type="file" id="imageUpload" accept="image/*" multiple>
<button type="button" id="convertButton" onclick="convertToWebP()">Convert to WebP</button>
<div id="processingMessage">Processing... Please wait.</div>
<button type="button" id="downloadButton" onclick="downloadWebP()">Download WebP</button>
<button type="button" id="clearButton" onclick="clearInputs()">Clear</button>
<div class="progress-bar" id="progressContainer">
<div class="progress-bar-inner" id="progressBar">0%</div>
</div>
</div>
<!--[ Image To WebP Converter CSS ]-->
<style>
.container {width 100%;max-width: 600px;margin: 30px auto;padding: 20px;background-color: #ffffff;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;text-align: center;margin-top: 50px;margin-bottom: 20px;}
input[type="file"] {padding: 12px;border: 2px solid #007bff;border-radius: 5px;margin-bottom: 20px;width: 100%;box-sizing: border-box;cursor: pointer;font-size: 16px;}
button {padding: 12px 20px;background-color: #007bff;color: #ffffff;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;margin-top: 10px;width: 100%;transition: background-color 0.3s ease;}
button:hover {background-color: #0056b3;}
.progress-bar {display: none;background-color: #e9ecef;border-radius: 5px;overflow: hidden;margin: 20px 0;}
.progress-bar-inner {width: 0%;height: 50px;background-color: #007bff;line-height: 45px;color: #fff;text-align: center;font-size: 18px;}
#downloadButton, #clearButton, #processingMessage {display: none;width: 100%;}}
</style>
<!--[ Image To WebP Converter JS ]-->
<script src="https://cdn.jsdelivr.net/npm/jszip@3.7.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script>
let webpFiles = [];
let fileNames = [];
let totalFiles = 0;
let processedFiles = 0;
function generateRandomString(length) {
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function convertToWebP() {
const files = document.getElementById('imageUpload').files;
if (files.length === 0) {
alert('Please select images.');
return;
}
totalFiles = files.length;
processedFiles = 0;
webpFiles = [];
fileNames = [];
document.getElementById('convertButton').style.display = 'none';
document.getElementById('processingMessage').style.display = 'block';
document.getElementById('progressContainer').style.display = 'block';
updateProgressBar(0);
for (let i = 0; i < files.length; i++) {
const imgFile = files[i];
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.src = event.target.result;
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const webpData = canvas.toDataURL('image/webp', 0.8);
const randomString = generateRandomString(6);
webpFiles.push(webpData);
fileNames.push(`apf${randomString}.webp`);
processedFiles++;
updateProgressBar((processedFiles / totalFiles) * 100);
if (processedFiles === totalFiles) {
document.getElementById('processingMessage').style.display = 'none';
document.getElementById('progressContainer').style.display = 'none';
document.getElementById('downloadButton').style.display = 'block';
document.getElementById('clearButton').style.display = 'block';
}
};
};
reader.readAsDataURL(imgFile);
}
}
function downloadWebP() {
if (webpFiles.length === 1) {
const a = document.createElement('a');
a.href = webpFiles[0];
a.download = fileNames[0];
a.click();
} else {
const zip = new JSZip();
for (let i = 0; i < webpFiles.length; i++) {
zip.file(fileNames[i], webpFiles[i].split(',')[1], { base64: true });
}
const randomString = generateRandomString(6);
zip.generateAsync({ type: 'blob' }).then(function (content) {
saveAs(content, `apf${randomString}.zip`);
});
}
}
function clearInputs() {
document.getElementById('imageUpload').value = '';
document.getElementById('convertButton').style.display = 'block';
document.getElementById('downloadButton').style.display = 'none';
document.getElementById('clearButton').style.display = 'none';
document.getElementById('processingMessage').style.display = 'none';
document.getElementById('progressContainer').style.display = 'none';
document.getElementById('progressBar').style.width = '0%';
document.getElementById('progressBar').innerText = '0%';
webpFiles = [];
fileNames = [];
}
function updateProgressBar(percentage) {
document.getElementById('progressBar').style.width = `${percentage}%`;
document.getElementById('progressBar').innerText = `${Math.round(percentage)}%`;
}
</script>
- Step 2 : Now go to Blogger dashboard.
- Step 3 : Click on menu and create a new page or post.
- Step 4 : Now switch to html view and paste the copied code.
- Step 5 : Name the post/page and save.
Congrats! you have successfully created WebP convertor tool in your blogger. Check it now by converting one or multiple images to webp that it is working or not. If there is any issue remove the code and follow the given steps again. If you still getting any issue then comment below or contact me on telegram for faster resolution.
Explanation and Customization.
Now explain about this tool in your post or page that how to use, so that user's can easily use your tool without any issue. Explaining about your tool will be also helpful in enhancing your tool visibility. For better looks you can also customize the codes but for doing this you must have coding knowledge otherwise you'll face issue with your tool in future. So use the code as it is because it's already user friendly and device friendly.
Related Posts
Conclusion : In this post, I have shared about making image to webp convertor tool in blogger. We hope you enjoyed reading our post and found it helpful. If you have any other question or need any help just comment below I will reply as soon as possible.