🖼️→WEBP
Convert Any Image to WEBP
JPG, PNG, HEIC, SVG, PSD, ARW, TIFF, BMP, GIF → high-quality WEBP • 100% browser-based • Live size comparison Learn more about convert image to webp.
⬆️
Drag & Drop or Click to Upload
Supports most image formats
📸 Original
✨ WEBP Result
82
File: ${file.name}
Size: ${(file.size / 1024 / 1024).toFixed(2)} MB
Type: ${file.type.split(‘/’)[1]?.toUpperCase() || file.type}
`;
convertArea.classList.remove(‘hidden’);
savingsLine.classList.add(‘hidden’);
webpPreview.src = ”;
webpStats.innerHTML = ”;
};
reader.readAsDataURL(file);
}
async function convertToWebp() {
if (!selectedFile) return alert(“Upload an image first”);
convertBtn.disabled = true;
convertBtn.innerHTML = ‘Converting… ↻‘;
try {
const img = await loadImage(URL.createObjectURL(selectedFile));
const canvas = document.createElement(‘canvas’);
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext(‘2d’).drawImage(img, 0, 0);
const quality = parseInt(qualitySlider.value) / 100;
const lossless = losslessToggle.checked;
canvas.toBlob(blob => {
if (!blob) throw new Error(“Blob creation failed”);
webpBlob = blob;
if (webpObjectURL) URL.revokeObjectURL(webpObjectURL);
webpObjectURL = URL.createObjectURL(blob);
webpPreview.src = webpObjectURL;
const origMB = (selectedFile.size / 1024 / 1024).toFixed(2);
const webpMB = (blob.size / 1024 / 1024).toFixed(2);
const savings = (((selectedFile.size – blob.size) / selectedFile.size) * 100).toFixed(1);
webpStats.innerHTML = `
Size: ${webpMB} MB
Mode: ${lossless ? ‘Lossless’ : `Lossy (${Math.round(quality * 100)}%)`}
Resolution: ${img.naturalWidth} × ${img.naturalHeight}
`;
savingsLine.innerHTML = `Original: ${origMB} MB → WEBP: ${webpMB} MB (-${savings}%)`;
savingsLine.classList.remove(‘hidden’);
downloadBtn.disabled = false;
convertBtn.disabled = false;
convertBtn.innerHTML = ‘Convert to WEBP →‘;
}, ‘image/webp’, lossless ? 1.0 : quality);
} catch (err) {
console.error(err);
alert(“Conversion failed — try a different image or lower quality.”);
convertBtn.disabled = false;
convertBtn.innerHTML = ‘Convert to WEBP →‘;
}
}
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(“Image load failed”));
img.src = src;
});
}
function downloadWebp() {
if (!webpBlob) {
alert(“Please convert the image first”);
return;
}
// Create fresh URL on every download click (fixes revocation issues in some browsers)
const url = URL.createObjectURL(webpBlob);
const a = document.createElement(‘a’);
a.href = url;
a.download = (selectedFile.name || ‘image’).replace(/\.[^.]+$/, ”) + ‘.webp’;
document.body.appendChild(a);
a.click();
// Clean up after a short delay (prevents premature revocation)
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}
function resetAll() {
if (webpObjectURL) URL.revokeObjectURL(webpObjectURL);
selectedFile = null;
webpBlob = null;
webpObjectURL = null;
fileInput.value = ”;
convertArea.classList.add(‘hidden’);
savingsLine.classList.add(‘hidden’);
origPreview.src = ”;
webpPreview.src = ”;
origStats.innerHTML = ”;
webpStats.innerHTML = ”;
downloadBtn.disabled = true;
}
qualityValue.textContent = qualitySlider.value;
Website Owner at All Best Tool
My Name is Sourav Mukherjee. I am a Website Developer and SEO Expart. AllBestTool.com is a browser-based collection of free online utilities — everything from PDF converters and text tools to SEO helpers and calculators. The idea is pretty simple: make a bunch of useful web tools available in one place without requiring users to sign up.
Latest posts by allbesttool.com (see all)
- Why Ziptie? On Choosing a Search Performance Tool - February 8, 2026
- AdSense Approval Checker tools - May 23, 2024