Image Compressor
Image Compressor Tool
Upload your image below and choose the compression quality.
Compression Quality: 0.7
🔽 Compress Image
Original Image Preview:
Compressed Image Preview:
⬇️ Download Compressed Image
.img-compressor {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 15px;
background: #f7f9fb;
font-family: 'Poppins', sans-serif;
}
.compressor-box {
background: #fff;
padding: 25px 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
max-width: 600px;
width: 100%;
}
.compressor-box h2 {
color: #333;
margin-bottom: 10px;
}
.subtitle {
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
input[type="file"] {
margin-bottom: 15px;
}
#qualityRange {
width: 80%;
margin: 10px 0;
}
#previewArea {
margin-top: 20px;
}
#previewArea img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 10px 0;
border: 1px solid #ddd;
}
button, .btn-download {
background-color: #0073e6;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
margin-top: 10px;
transition: 0.3s;
display: inline-block;
}
button:hover, .btn-download:hover {
background-color: #005bb5;
}
.btn-download {
text-decoration: none;
display: inline-block;
margin-top: 15px;
}
document.addEventListener("DOMContentLoaded", function () {
const imageInput = document.getElementById('imageInput');
const compressBtn = document.getElementById('compressBtn');
const qualityRange = document.getElementById('qualityRange');
const qualityValue = document.getElementById('qualityValue');
const originalImg = document.getElementById('originalImg');
const compressedImg = document.getElementById('compressedImg');
const downloadLink = document.getElementById('downloadLink');
let uploadedImage = null;
qualityRange.addEventListener('input', function() {
qualityValue.textContent = this.value;
});
imageInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
uploadedImage = new Image();
uploadedImage.src = e.target.result;
uploadedImage.onload = function() {
originalImg.src = uploadedImage.src;
};
};
reader.readAsDataURL(file);
});
compressBtn.addEventListener('click', function() {
if (!uploadedImage) {
alert('Please upload an image first.');
return;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = uploadedImage.width;
canvas.height = uploadedImage.height;
ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);
const quality = parseFloat(qualityRange.value);
const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
compressedImg.src = compressedDataUrl;
downloadLink.href = compressedDataUrl;
downloadLink.style.display = 'inline-block';
});
});