body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } h1 { color: #333; font-size: 2.5em; margin-bottom: 20px; } .upload-container { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; text-align: center; } .upload-container input[type="file"] { margin-bottom: 20px; } .slider-container { margin-bottom: 20px; } .slider-container label { font-size: 1.2em; color: #555; } .slider { width: 100%; } .results-table { width: 100%; max-width: 800px; margin-top: 20px; border-collapse: collapse; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; } .results-table th, .results-table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } .results-table th { background-color: #6200ea; color: white; } .results-table tr:hover { background-color: #f1f1f1; } .emoji { font-size: 1.5em; } .compress-btn { background-color: #6200ea; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1.2em; } .compress-btn:hover { background-color: #3700b3; } .download-btn { background-color: #4caf50; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.9em; } .download-btn:hover { background-color: #45a049; }

📷 Image Compressor 🖼️

File Name	Original Size	Compressed Size	Status	Download

const fileInput = document.getElementById('fileInput'); const compressLevel = document.getElementById('compressLevel'); const compressValue = document.getElementById('compressValue'); const resultsBody = document.getElementById('resultsBody'); // Update compression level value compressLevel.addEventListener('input', () => { compressValue.textContent = compressLevel.value; }); // Compress images function compressImages() { const files = fileInput.files; if (files.length === 0) { alert('Please upload at least one file!'); return; } resultsBody.innerHTML = ''; // Clear previous results for (let file of files) { const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.src = event.target.result; img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const scale = compressLevel.value / 100; canvas.width = img.width * scale; canvas.height = img.height * scale; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { const compressedSize = (blob.size / 1024).toFixed(2); // Size in KB const originalSize = (file.size / 1024).toFixed(2); // Size in KB // Create a download link const downloadUrl = URL.createObjectURL(blob); const downloadLink = `Download ⬇️`; // Add result to table const row = document.createElement('tr'); row.innerHTML = ` ${file.name} ${originalSize} KB ${compressedSize} KB ✅ Compressed ${downloadLink} `; resultsBody.appendChild(row); }, 'image/jpeg', compressLevel.value / 100); }; }; reader.readAsDataURL(file); } }