Resize50 – Resize Image to 50KB
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);:root {
–primary: #059669; /* Emerald-600 */
–bg-dark: #0F172A;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}/* Animated Background Pattern */
.bg-pattern {
background-color: #ffffff;
background-image: radial-gradient(#059669 0.5px, transparent 0.5px), radial-gradient(#059669 0.5px, #ffffff 0.5px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
opacity: 0.05;
}
.dark .bg-pattern {
background-color: #0F172A;
background-image: radial-gradient(#34D399 0.5px, transparent 0.5px), radial-gradient(#34D399 0.5px, #0F172A 0.5px);
opacity: 0.1;
}/* Loading Spinner */
.loader {
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #059669;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* 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: ‘#059669’,
}
}
}
}
Intelligently reduces dimensions and quality to guarantee your image fits under the 50KB limit.
Select Photos to Resize JPG, PNG, WEBP supported
Choose Images
// — JAVASCRIPT SEPARATION START —// DOM Elements
const dropzone = document.getElementById(‘dropzone’);
const fileInput = document.getElementById(‘fileInput’);
const resultsArea = document.getElementById(‘results-area’);
const resultsList = document.getElementById(‘results-list’);
const targetInput = document.getElementById(‘target-kb’);
const canvas = document.getElementById(‘process-canvas’);
const ctx = canvas.getContext(‘2d’);let isDarkMode = false;// — Event Listeners —
dropzone.addEventListener(‘click’, () => fileInput.click());
dropzone.addEventListener(‘dragover’, (e) => {
e.preventDefault();
dropzone.classList.add(‘border-emerald-500’, ‘bg-emerald-50’, ‘dark:bg-slate-700’);
});
dropzone.addEventListener(‘dragleave’, () => {
dropzone.classList.remove(‘border-emerald-500’, ‘bg-emerald-50’, ‘dark:bg-slate-700’);
});
dropzone.addEventListener(‘drop’, (e) => {
e.preventDefault();
dropzone.classList.remove(‘border-emerald-500’, ‘bg-emerald-50’, ‘dark:bg-slate-700’);
if(e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener(‘change’, (e) => {
if(e.target.files.length) handleFiles(e.target.files);
});// — Functions —function setPreset(val) {
targetInput.value = val;
}function handleFiles(files) {
resultsArea.classList.remove(‘hidden’);
const targetKB = parseInt(targetInput.value) || 50;
const targetBytes = targetKB * 1024;Array.from(files).forEach(file => {
if (!file.type.match(‘image.*’)) return;
const id = Math.random().toString(36).substr(2, 9);
createResultUI(id, file);
processImage(file, targetBytes, id);
});
}function createResultUI(id, file) {
const div = document.createElement(‘div’);
div.id = id;
div.className = ‘card bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 flex items-center gap-4 animate-pulse’;
div.innerHTML = `
Processing…
`;
resultsList.prepend(div);
}function processImage(file, targetBytes, id) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
resizeLoop(img, targetBytes).then(result => {
updateResultUI(id, file, result.blob, result.dims, img);
}).catch(err => {
console.error(err);
document.getElementById(id).innerHTML = ‘
Error processing image
‘;
});
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}// Smart Resize Loop:
// 1. Try reducing quality at original scale
// 2. If still too big, incrementally reduce scale (dimensions) until target is met
async function resizeLoop(img, targetBytes) {
const originalW = img.width;
const originalH = img.height;
// Start with 90% quality, 100% scale
let scale = 1.0;
let quality = 0.9;
let blob = null;
let iterations = 0;
let w, h;// Aggressive binary/step search
while (iterations canvas.toBlob(r, ‘image/jpeg’, quality));// Success condition
if (blob.size <= targetBytes) {
// If result is WAY smaller (e.g. 0.5) {
quality -= 0.1;
} else {
// Quality is already low (0.5), time to shrink dimensions
scale *= 0.85; // Reduce dims by 15%
quality = 0.8; // Reset quality to allow cleaner edges on smaller image
}
iterations++;
}
// Fallback return last attempt
return { blob, dims: { w, h } };
}function updateResultUI(id, originalFile, blob, newDims, originalImg) {
const div = document.getElementById(id);
if(!div) return;
div.classList.remove(‘animate-pulse’); // Stop loading animationconst url = URL.createObjectURL(blob);
const savedBytes = originalFile.size – blob.size;
const percent = ((savedBytes / originalFile.size) * 100).toFixed(0);
// Create Download Name
const nameParts = originalFile.name.split(‘.’);
const ext = nameParts.pop();
const name = `${nameParts.join(‘.’)}_50kb.jpg`;div.innerHTML = `
New
${name}
${(originalFile.size/1024).toFixed(1)}KB
${(blob.size/1024).toFixed(1)}KB
${originalImg.width}x${originalImg.height}
${newDims.w}x${newDims.h}
Download
`;
}function resetAll() {
resultsList.innerHTML = ”;
resultsArea.classList.add(‘hidden’);
fileInput.value = ”;
}// — Dark Mode —
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 Resize Image to 50kB tool The Resize Image to 50kB 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.