× `; previewContainer.appendChild(div); } function removeImage(btn) { const index = Array.from(previewContainer.children).indexOf(btn.parentElement); images.splice(index, 1); btn.parentElement.remove(); } // Resizing function async function resizeImages() { if (images.length === 0) { alert('Please upload images first!'); return; } const loading = document.getElementById('loading'); const downloadBtn = document.getElementById('download-btn'); loading.style.display = 'block'; try { const targetWidth = parseInt(widthInput.value); const targetHeight = parseInt(heightInput.value); const zip = new JSZip(); for (let i = 0; i < images.length; i++) { const resizedImage = await resizeImage(images[i].src, targetWidth, targetHeight); const filename = `resized-${targetWidth}x${targetHeight}-${Date.now()}-${i}.png`; zip.file(filename, resizedImage, {binary: true}); } if (images.length === 1) { const url = URL.createObjectURL(await resizeImage(images[0].src, targetWidth, targetHeight)); downloadBtn.href = url; downloadBtn.download = `resized-${targetWidth}x${targetHeight}.png`; } else { const content = await zip.generateAsync({type: 'blob'}); const url = URL.createObjectURL(content); downloadBtn.href = url; downloadBtn.download = `resized-images-${Date.now()}.zip`; } downloadBtn.style.display = 'block'; } catch (error) { alert('Error resizing images: ' + error.message); } finally { loading.style.display = 'none'; } } function resizeImage(src, width, height) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); canvas.toBlob(blob => { resolve(blob); }, 'image/png'); }; img.onerror = reject; img.src = src; }); } // Drag and drop handling document.addEventListener('dragover', e => { e.preventDefault(); document.querySelector('.upload-section').style.borderColor = '#34d399'; }); document.addEventListener('dragleave', () => { document.querySelector('.upload-section').style.borderColor = '#cbd5e0'; }); document.addEventListener('drop', e => { e.preventDefault(); document.querySelector('.upload-section').style.borderColor = '#cbd5e0'; const files = e.dataTransfer.files; if (files.length > 0) { fileInput.files = files; handleFileSelect({ target: fileInput }); } });

PNG RESIZE

PNG Image Resizer: Description

The PNG Image Resizer is a specialized web tool designed to resize images while preserving transparency and quality, making it ideal for designers, developers, and content creators working with PNG files. Unlike generic resizers, this tool focuses on maintaining the integrity of transparent backgrounds and sharp edges, ensuring professional-grade results. Below’s a detailed breakdown of its features and functionality:

---

Key Features

1. Transparency Preservation
   Resizes PNGs without losing transparency, crucial for logos, icons, and graphics with layered designs. Preview images display a checkerboard background to visualize transparency.
2. Aspect Ratio Control
   • Toggleable aspect ratio lock (🔒/🔓) to maintain original proportions
   • Real-time synchronization between width and height inputs
3. Batch Processing
   • Resize multiple images simultaneously
   • Download individual PNGs or a ZIP archive for bulk exports
4. Precise Dimension Control
   • Set exact pixel values for width and height
   • Input validation to prevent invalid values (min: 1px)
5. Client-Side Processing
   • All resizing occurs locally in the browser
   • No data uploaded to external servers (100% private)
6. Multi-Format Support
   Accepts PNG, JPEG, and WEBP inputs but always outputs high-quality PNGs
7. Responsive Previews
   • Grid-based previews with removal options
   • Visual feedback during upload and processing

---

How It Works

1. Upload Images
   Drag and drop files or click to upload (supports batch selection).
2. Set Dimensions
   Enter desired width/height. Use the lock icon to preserve aspect ratio.
3. Preview & Edit
   Review images and remove unwanted files before resizing.
4. Resize & Download
   Click “Resize Images” to process. Download individual PNGs or a ZIP file.