Webp2PNG Pro – Convert WEBP to PNG
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);:root {
–primary: #6366F1; /* Indigo-500 */
–bg-dark: #111827;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}/* Checkerboard pattern for transparency preview */
.checkerboard-bg {
background-color: #ffffff;
background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.dark .checkerboard-bg {
background-color: #374151;
background-image: linear-gradient(45deg, #4b5563 25%, transparent 25%),
linear-gradient(-45deg, #4b5563 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #4b5563 75%),
linear-gradient(-45deg, transparent 75%, #4b5563 75%);
}/* Loading Spinner */
.loader {
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #6366F1;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Dropzone Active */
.dropzone-active {
border-color: #6366F1 !important;
background-color: rgba(99, 102, 241, 0.1) !important;
transform: scale(1.01);
}/* Result Item Animation */
.file-item {
animation: slideIn 0.3s ease-out forwards;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}/* Dark Mode */
.dark body {
background-color: var(–bg-dark);
color: #F9FAFB;
}
.dark .card {
background-color: #1E293B;
border-color: #334155;
}
.dark input {
background-color: #334155;
color: white;
border-color: #475569;
}
/* — CSS SEPARATION END — */
tailwind.config = {
darkMode: ‘class’,
theme: {
extend: {
colors: {
primary: ‘#6366F1’,
}
}
}
}
Transform modern WEBP images into universally compatible PNG files. Lossless quality and transparency are guaranteed.
Why PNG?
While WEBP is smaller, PNG is supported by all legacy editors and software. It is the gold standard for lossless graphics.
Drop WEBP files here Batch processing ready
Browse WEBP
// — JAVASCRIPT SEPARATION START —// Elements
const dropzone = document.getElementById(‘dropzone’);
const fileInput = document.getElementById(‘fileInput’);
const resultsArea = document.getElementById(‘results-area’);
const resultsList = document.getElementById(‘results-list’);
const countBadge = document.getElementById(‘count-badge’);
const canvas = document.getElementById(‘process-canvas’);
const ctx = canvas.getContext(‘2d’);let isDarkMode = false;
let processedCount = 0;// — Event Listeners —
dropzone.addEventListener(‘click’, () => fileInput.click());
dropzone.addEventListener(‘dragover’, (e) => {
e.preventDefault();
dropzone.classList.add(‘dropzone-active’);
});
dropzone.addEventListener(‘dragleave’, () => {
dropzone.classList.remove(‘dropzone-active’);
});
dropzone.addEventListener(‘drop’, (e) => {
e.preventDefault();
dropzone.classList.remove(‘dropzone-active’);
if(e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
});fileInput.addEventListener(‘change’, (e) => {
if(e.target.files.length) handleFiles(e.target.files);
});// — Core Logic —function handleFiles(files) {
resultsArea.classList.remove(‘hidden’);
Array.from(files).forEach(file => {
if(file.type === ‘image/webp’ || file.name.toLowerCase().endsWith(‘.webp’)) {
processWEBP(file);
} else {
alert(‘Skipped non-WEBP file: ‘ + file.name);
}
});
}function processWEBP(file) {
const uiId = ‘item-‘ + Math.random().toString(36).substr(2, 9);
createItemUI(uiId, file);const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
convertToPNG(img, uiId, file.name);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}function createItemUI(id, file) {
const div = document.createElement(‘div’);
div.id = id;
div.className = ‘file-item card bg-white dark:bg-gray-800 p-3 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 flex items-center gap-4’;
div.innerHTML = `
${file.name}
${formatBytes(file.size)}
Converting…
`;
resultsList.prepend(div);
}function convertToPNG(img, id, originalName) {
// Canvas Setup
canvas.width = img.width;
canvas.height = img.height;
// Clear canvas (transparency support)
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw WEBP
ctx.drawImage(img, 0, 0);// Export as PNG
canvas.toBlob((blob) => {
updateItemUI(id, blob, originalName, img.src);
}, ‘image/png’);
}function updateItemUI(id, blob, originalName, originalSrc) {
const div = document.getElementById(id);
if(!div) return;const url = URL.createObjectURL(blob);
const newName = originalName.replace(/\.webp$/i, ‘.png’);
div.innerHTML = `
${newName}
WEBP
PNG
${formatBytes(blob.size)}
`;
processedCount++;
countBadge.innerText = processedCount;
}function formatBytes(bytes) {
if(bytes === 0) return ‘0 Bytes’;
const k = 1024;
const sizes = [‘Bytes’, ‘KB’, ‘MB’];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ‘ ‘ + sizes[i];
}function clearAll() {
resultsList.innerHTML = ”;
resultsArea.classList.add(‘hidden’);
processedCount = 0;
countBadge.innerText = ‘0’;
fileInput.value = ”;
}function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.documentElement.classList.toggle(‘dark’);
const icon = document.getElementById(‘theme-icon’);
if(isDarkMode) {
icon.classList.remove(‘fa-moon’);
icon.classList.add(‘fa-sun’);
} else {
icon.classList.remove(‘fa-sun’);
icon.classList.add(‘fa-moon’);
}
}// — JAVASCRIPT SEPARATION END —
About the WebP to PNG tool The WebP to PNG page is part of Articles Stock’s online utilities collection. Use the tool above for the task described in its interface, and check the available file types, settings and output before proceeding. This utility relates to image formats, image conversion and file size.
How to use this tool Review the tool’s supported input and options. Select or enter the required input and choose the settings that suit your task. Run the tool and check the result before saving or sharing it. Related online tools Image Compressor and Image Resizer can help with related tasks.