A JPG to WebP converter with highly compressed files is a specialized software tool designed to efficiently convert JPEG image files into the WebP format, a modern image compression standard developed by Google. This converter employs advanced compression algorithms, allowing it to significantly reduce file sizes while maintaining image quality. By converting JPG images to WebP, users can enjoy faster loading times for web pages and reduced storage requirements, making it ideal for web developers and content creators seeking to optimize their digital content for online use.
Click here for Download WebP
How to create JavaScript code for Converting JPG file to WebP file format?
In this below line of code you can find JavaScript code that is convert JPG file to WebP file format. You can create your own offline convert just follow my instruction which is below:
Instructions for making JPG to WebP Converter
1. You can copy whole code by clicking Copy Code button top right cornert in code box2. Paste it in Notepad
3. Save this file as html format.
4. Enjoy!
Finally open your Converter in any Web Browser.
<!DOCTYPE html>
<html>
<head>
<title>JPG to WebP Converter</title>
</head>
<body>
<h1>JPG to WebP Converter</h1>
<input type="file" accept="image/jpeg" id="fileInput" />
<button id="convertButton">Convert to WebP</button>
<a id="downloadLink" style="display: none" download>Download WebP</a>
<img id="previewImage" style="display: none" alt="Converted Image" />
<script>
/*
Terms of use for this JavaScript Code
- This JavaScript code created by Mohammad Parvej
- This code was created with the help of ChatGPT-3.5
- Free to use, modify, and distribute without any restrictions with given credit to Mohammad Parvej
*/
// JavaScript code
document.getElementById('convertButton').addEventListener('click', function () {
const fileInput = document.getElementById('fileInput');
const downloadLink = document.getElementById('downloadLink');
const previewImage = document.getElementById('previewImage');
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function () {
const img = new Image();
img.src = reader.result;
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
canvas.toBlob(function (blob) {
// Convert the blob to a WebP data URL with maximum compression
const webPDataURL = canvas.toDataURL('image/webp', 50);
// Get the source file name without extension
const sourceFileName = file.name;
const sourceFileNameWithoutExtension = sourceFileName.split('.').slice(0, -1).join('.');
// Set the download link's "download" attribute
downloadLink.download = sourceFileNameWithoutExtension + '.webp';
downloadLink.href = webPDataURL;
previewImage.src = webPDataURL;
downloadLink.style.display = 'block';
previewImage.style.display = 'block';
}, 'image/webp', 1); // Quality set to 1 for lossless
};
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
Hope you enjoy this blog!
