Image resizer in MB

#mb-image-resizer { max-width: 950px; margin: 20px auto; padding: 25px; background: #f3f6fb; border-radius: 15px; font-family: Arial, sans-serif; color: #1e293b; box-sizing: border-box; } #mb-image-resizer * { box-sizing: border-box; } #mb-image-resizer h2 { text-align: center; font-size: 27px; color: #173b70; margin-bottom: 10px; } #mb-image-resizer .subtitle { text-align: center; color: #64748b; line-height: 1.6; margin-bottom: 25px; } #mb-image-resizer .upload-box { background: white; border: 2px dashed #2563eb; border-radius: 12px; padding: 30px 15px; text-align: center; } #mb-image-resizer input[type=file] { max-width: 100%; margin-top: 12px; } #mb-image-resizer .section-title { font-size: 19px; font-weight: bold; color: #173b70; margin: 24px 0 13px; } #mb-image-resizer .mb-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } #mb-image-resizer button { border: none; padding: 15px 10px; border-radius: 8px; color: white; background: #2563eb; font-size: 15px; font-weight: bold; cursor: pointer; transition: .2s; } #mb-image-resizer button:hover { background: #1d4ed8; transform: translateY(-2px); } #mb-image-resizer button:disabled { opacity: .55; cursor: not-allowed; transform: none; } #mb-image-resizer .preview-box { display: none; background: white; border-radius: 12px; padding: 18px; margin-top: 22px; text-align: center; } #mb-image-resizer .preview-box img { max-width: 100%; max-height: 350px; object-fit: contain; margin: 12px auto; } #mb-image-resizer .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; } #mb-image-resizer .comparison div { background: #f1f5f9; padding: 15px; border-radius: 8px; line-height: 1.8; } #mb-image-resizer .download-btn { display: inline-block; background: #16a34a; color: white; padding: 14px 25px; margin-top: 17px; border-radius: 8px; text-decoration: none; font-weight: bold; } #mb-image-resizer .status { text-align: center; color: #2563eb; font-weight: bold; margin-top: 17px; line-height: 1.6; } #mb-image-resizer .note { color: #64748b; font-size: 13px; line-height: 1.7; margin-top: 20px; } @media(max-width:550px) { #mb-image-resizer { padding: 14px; } #mb-image-resizer h2 { font-size: 22px; } #mb-image-resizer .mb-buttons { grid-template-columns: repeat(2,1fr); } #mb-image-resizer .comparison { grid-template-columns: 1fr; } }

Image Resizer in MB

Resize your images to your required MB file size. Preserve the original image quality with lossless PNG output.

Note: This tool uses lossless PNG encoding. It preserves the decoded image pixels, but PNG output can be larger than the original JPG or WEBP. The selected MB size is a maximum limit, not an exact file-size guarantee. The image is processed locally in your browser.

(function () { const root = document.getElementById("mb-image-resizer"); const upload = root.querySelector("#mb-upload"); const status = root.querySelector("#mb-status"); const preview = root.querySelector("#mb-preview"); const resultImg = root.querySelector("#mb-result"); const download = root.querySelector("#mb-download"); let selectedFile = null; let image = null; let resultURL = null; let originalName = "image"; function formatSize(bytes) { return (bytes / (1024 * 1024)).toFixed(3) + " MB"; } function setBusy(busy) { root.querySelectorAll("button").forEach(btn => { btn.disabled = busy; }); } upload.addEventListener("change", function () { const file = this.files[0]; if (!file) return; const types = [ "image/jpeg", "image/png", "image/webp" ]; if (!types.includes(file.type)) { status.textContent = "Please upload JPG, PNG or WEBP image."; return; } if (resultURL) { URL.revokeObjectURL(resultURL); resultURL = null; } selectedFile = file; originalName = file.name.replace(/\.[^.]+$/, "") || "image"; const url = URL.createObjectURL(file); const img = new Image(); img.onload = function () { image = img; preview.style.display = "none"; status.textContent = "Image uploaded successfully. Original size: " + formatSize(file.size) + " | Dimensions: " + img.naturalWidth + " × " + img.naturalHeight; }; img.onerror = function () { URL.revokeObjectURL(url); status.textContent = "Unable to load this image."; }; img.src = url; }); async function resizeImage(maxMB) { if (!selectedFile || !image) { status.textContent = "Please upload an image first."; return; } setBusy(true); status.textContent = "Processing image... Please wait."; try { const maxBytes = maxMB * 1024 * 1024; const canvas = document.createElement("canvas"); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); const blob = await new Promise(resolve => { canvas.toBlob(resolve, "image/png"); }); if (!blob) { throw new Error("Image conversion failed."); } if (blob.size > maxBytes) { throw new Error( "This image's lossless PNG file is " + formatSize(blob.size) + ". It exceeds your selected " + maxMB + " MB limit. Reducing dimensions would be necessary, " + "but may reduce image detail." ); } if (resultURL) URL.revokeObjectURL(resultURL); resultURL = URL.createObjectURL(blob); resultImg.src = resultURL; download.href = resultURL; download.download = originalName + "-resized.png"; root.querySelector("#mb-original-size").textContent = formatSize(selectedFile.size); root.querySelector("#mb-new-size").textContent = formatSize(blob.size); root.querySelector("#mb-details").textContent = "Image dimensions: " + canvas.width + " × " + canvas.height + " pixels | Maximum selected size: " + maxMB + " MB"; preview.style.display = "block"; status.textContent = "Image successfully processed within " + maxMB + " MB."; } catch (error) { status.textContent = error.message; } finally { setBusy(false); } } root.querySelectorAll("[data-mb]").forEach(button => { button.addEventListener("click", function () { const size = Number(this.dataset.mb); resizeImage(size); }); }); })();