Resize Image to 100KB

function resizeImage() { const imageInput = document.getElementById('imageInput'); const outputCanvas = document.getElementById('outputCanvas'); const maxSizeKB = 100; const file = imageInput.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { const canvas = outputCanvas; const ctx = canvas.getContext('2d'); const maxSizeBytes = maxSizeKB * 1024; let width = img.width; let height = img.height; let quality = 0.7; do { const dataURL = canvas.toDataURL('image/jpeg', quality); const dataSizeKB = Math.floor(dataURL.length / 1024); if (dataSizeKB <= maxSizeKB) { canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); return; } quality -= 0.1; } while (quality > 0); alert('Image cannot be resized to 100KB or less.'); }; img.src = event.target.result; }; reader.readAsDataURL(file); } body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } input[type="file"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; box-sizing: border-box; } canvas { display: block; margin: 20px auto; border: 1px solid #ccc; max-width: 100%; height: auto; } This implementation allows users to upload an image file and resizes it to approximately 100KB by adjusting the image quality. It uses the HTML5 Canvas API to manipulate the image. Although it's not guaranteed to resize the image precisely to 100KB due to quality adjustments, it's a close approximation. Additionally, it's SEO-friendly as it provides meaningful content and uses semantic HTML tags.