Compress200 – Compress Images to 200KB
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);:root {
–primary: #2563EB; /* Blue-600 */
–bg-dark: #0F172A;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}/* Progress Animation */
.progress-bar-striped {
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
}@keyframes progress-bar-stripes {
0% { background-position: 1rem 0; }
100% { background-position: 0 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: ‘#2563EB’,
}
}
}
}
Target: 200KB or less
Optimize your photos for email attachments, social media uploads, and website speed without losing quality.
Select Images to Compress JPG, PNG, WEBP supported
Browse Files
// — JAVASCRIPT SEPARATION START —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-blue-500’); });
dropzone.addEventListener(‘dragleave’, () => dropzone.classList.remove(‘border-blue-500’));
dropzone.addEventListener(‘drop’, (e) => {
e.preventDefault();
dropzone.classList.remove(‘border-blue-500’);
if(e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener(‘change’, (e) => {
if(e.target.files.length) handleFiles(e.target.files);
});function setTarget(val) {
targetInput.value = val;
}function handleFiles(files) {
resultsArea.classList.remove(‘hidden’);
const targetKB = parseInt(targetInput.value) || 200;
Array.from(files).forEach(file => {
if (!file.type.match(‘image.*’)) return;
const id = Math.random().toString(36).substr(2, 9);
createUI(id, file);
processImage(file, targetKB * 1024, id);
});
}function createUI(id, file) {
const div = document.createElement(‘div’);
div.id = id;
div.className = ‘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’;
div.innerHTML = `
${file.name}
Original: ${(file.size/1024).toFixed(1)} KB
Processing…
`;
resultsList.prepend(div);
}function processImage(file, targetBytes, id) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
compressLoop(img, targetBytes).then(blob => {
updateUI(id, file, blob);
}).catch(() => {
document.getElementById(id).innerHTML = ‘
Error processing file
‘;
});
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}async function compressLoop(img, targetBytes) {
const w = img.width;
const h = img.height;
canvas.width = w;
canvas.height = h;
ctx.fillStyle = ‘#FFFFFF’;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(img, 0, 0, w, h);let min = 0, max = 1, quality = 0.8, blob = null, attempts = 0;
// Binary search for quality
while(attempts canvas.toBlob(r, ‘image/jpeg’, quality));
if(Math.abs(blob.size – targetBytes) < targetBytes * 0.1 || (blob.size 0.9)) break;
if(blob.size > targetBytes) max = quality;
else min = quality;
quality = (min + max) / 2;
attempts++;
}// If still too big, resize
if(blob.size > targetBytes) {
const scale = Math.sqrt(targetBytes / blob.size) * 0.9; // Estimate scale needed
canvas.width = w * scale;
canvas.height = h * scale;
ctx.fillStyle = ‘#FFFFFF’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
blob = await new Promise(r => canvas.toBlob(r, ‘image/jpeg’, 0.7));
}
return blob;
}function updateUI(id, original, blob) {
const div = document.getElementById(id);
const url = URL.createObjectURL(blob);
const saved = ((original.size – blob.size)/original.size * 100).toFixed(0);
div.innerHTML = `
${original.name}
${(original.size/1024).toFixed(1)}KB
${(blob.size/1024).toFixed(1)} KB
-${saved}%
Download
`;
}function resetAll() {
resultsList.innerHTML = ”;
resultsArea.classList.add(‘hidden’);
fileInput.value = ”;
}function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.documentElement.classList.toggle(‘dark’);
const icon = document.getElementById(‘theme-icon’);
icon.classList.toggle(‘fa-moon’, !isDarkMode);
icon.classList.toggle(‘fa-sun’, isDarkMode);
}// — JAVASCRIPT SEPARATION END —
About the Resize Image to 200KB tool The Resize Image to 200KB 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.