Compress Image to Size

Compressing a digital photo to an exact file size requires adjusting both the compression quality factor and the pixel dimensions. Our local engine starts by drawing your uploaded image onto an offscreen canvas. It then runs an iterative optimization search, adjusting the lossy compression ratio (quality) to output a file as close to your target as possible.

// Iterative quality search on HTML Canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

// Adjust quality factor (0.1 to 0.95)
canvas.toBlob((blob) => {
  console.log("Size in bytes:", blob.size);
}, "image/jpeg", quality);

Online registration systems for passport renewals, visa applications, and competitive exams often restrict file uploads to tight limits like 20KB, 50KB, or 100KB. These portals will reject files that exceed these limits by even a single byte. Our compressor ensures your output matches these strict criteria. If you need to generate small web icon packages from your images, you can try our Favicon Generator.

// Local file reading with FileReader (never sent to server)
const reader = new FileReader();
reader.onload = (event) => {
  const img = new Image();
  img.src = event.target.result;
};
reader.readAsDataURL(file);

Applicant tracking systems and recruitment websites often request resume attachments, portolios, and profile photographs within size limits. Downscaling resolution along with file size makes uploading faster and prevents database timeouts.

// Dynamic scaling while preserving aspect ratio
const maxDim = 800; // max dimension bound
let w = img.width;
let h = img.height;
if (w > h && w > maxDim) {
  h = (maxDim / w) * h;
  w = maxDim;
}

Lossless formats like PNG preserve pixel detail perfectly but generate large files. Because lossless formats do not support quality scale compression, shrinking them requires downscaling the canvas dimensions. Alternatively, converting the file to modern WebP or standard JPEG formats will yield significant size reductions with negligible visual changes.

// Custom resizing fallback for PNG compression
const scale = 0.8; // scaling factor
canvas.width = originalWidth * scale;
canvas.height = originalHeight * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

Our browser tool supports common web formats: JPEG, PNG, and WebP. You can choose to preserve the original format or convert between them on-the-fly to find the best compression ratio.

// Mime type configurations for output conversion
const MIME_TYPES = {
  JPEG: "image/jpeg",
  PNG: "image/png",
  WEBP: "image/webp"
};

Privacy is a primary concern when compressing documents, IDs, or proprietary graphics. Our tool works locally inside your browser sandbox, meaning your files are never transmitted to a server. If you need to transform your output file into a text string for coding, you can convert it to Base64 with our Base64 Encoder / Decoder. You can also verify the file checksum using our client-side Hash Generator.

// Verifying browser cryptographic entropy or local execution
const localBlobUrl = URL.createObjectURL(compressedBlob);
console.log("Local download URL:", localBlobUrl);
// Output: blob:https://toolmight.com/...