image compressor
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Image Compressor - Reduce Image File Size Instantly</title>
<meta name="description" content="Compress images instantly and reduce file size without losing quality. Free, fast and private - no uploads!">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/postcss7-compat@2.2.19/dist/tailwind.min.css">
<style>
body {
font-family: 'Segoe UI', sans-serif;
}
.drop-shadow {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-white min-h-screen flex items-center justify-center px-4">
<div class="bg-white rounded-2xl p-8 max-w-lg w-full drop-shadow text-center">
<h1 class="text-2xl font-bold text-gray-800 mb-2">Image Compressor</h1>
<p class="text-sm text-gray-500 mb-6">Compress your images and reduce file size without quality loss. Fast, free & secure.</p><input type="file" id="imageInput" accept="image/*" class="mb-4 w-full border rounded px-4 py-2" />
<button onclick="compressImage()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-200">Compress Image</button>
<canvas id="canvas" style="display: none;"></canvas>
<div class="mt-6">
<img id="preview" class="mx-auto max-w-full rounded-lg" />
<p id="info" class="text-sm text-gray-600 mt-2"></p>
</div>
</div> <script>
let originalImage;
document.getElementById("imageInput").addEventListener("change", function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
originalImage = new Image();
originalImage.src = event.target.result;
};
reader.readAsDataURL(file);
}
});
function compressImage() {
if (!originalImage) return alert("Please select an image first.");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const width = originalImage.width * 0.7;
const height = originalImage.height * 0.7;
canvas.width = width;
canvas.height = height;
ctx.drawImage(originalImage, 0, 0, width, height);
canvas.toBlob(
function (blob) {
const newImg = document.getElementById("preview");
newImg.src = URL.createObjectURL(blob);
const originalSize = (originalImage.src.length / 1024).toFixed(2);
const compressedSize = (blob.size / 1024).toFixed(2);
const infoEl = document.getElementById("info");
infoEl.innerHTML = `Original: ${originalSize} KB | Compressed: ${compressedSize} KB`;
const link = document.createElement("a");
link.download = "compressed-image.jpg";
link.href = newImg.src;
link.className = "text-blue-600 underline text-sm mt-2 inline-block";
link.textContent = "Click here to download compressed image";
infoEl.appendChild(document.createElement("br"));
infoEl.appendChild(link);
},
"image/jpeg",
0.6
);
}
</script></body>
</html>
posted by Dotconnectsaga @ June 14, 2025
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home