{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifj4dpk3qzmh7s2x4drlhyym6hsiunnp2yom7c2okj63z5hckvz3y",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3monv7vjy7jd2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreifeglimuq2qielqscskm7nq5moigqqu2vpf3v2wybweg5jyp7lcom"
    },
    "mimeType": "image/webp",
    "size": 67566
  },
  "path": "/khurram_shahbaz_2074590a5/how-to-compress-images-in-the-browser-using-javascript-1g11",
  "publishedAt": "2026-06-19T17:22:02.000Z",
  "site": "https://dev.to",
  "tags": [
    "javascript",
    "webdev",
    "beginners",
    "performance",
    "https://github.com/comkenia-llc/browser-image-compression-tools",
    "https://imagescompression.com/compress-image",
    "https://imagescompression.com/compress-jpg",
    "https://imagescompression.com/compress-png",
    "https://imagescompression.com/compress-image-to-50kb",
    "https://imagescompression.com/compress-image-to-100kb",
    "https://imagescompression.com/compress-image-to-200kb",
    "https://imagescompression.com/compress-image-for-online-form",
    "https://imagescompression.com/resize-image"
  ],
  "textContent": "Image compression is one of those small features that can make a website feel much faster.\n\nIf users upload large photos from a phone, the original image can easily be 3MB, 5MB or even 10MB. For many apps, blogs, forms and dashboards, that is bigger than needed.\n\nThe good news is that basic image compression can be done directly in the browser using JavaScript, canvas and `canvas.toBlob()`.\n\nIn this article, we will look at a simple browser-based image compression workflow.\n\n##  Why compress images in the browser?\n\nBrowser-based image compression is useful because it can reduce file size before the file is uploaded.\n\nThat can help with:\n\n  * faster uploads\n  * lower bandwidth usage\n  * better mobile experience\n  * smaller profile photos\n  * online form image limits\n  * website image optimization\n  * image previews before upload\n\n\n\nFor many simple image tasks, the browser can resize and compress the image without needing to send the original large file to a server first.\n\n##  Basic browser image compression flow\n\nA common browser image compression flow looks like this:\n\n  1. User selects an image file.\n  2. JavaScript loads the image using `createImageBitmap()`.\n  3. The image is drawn on a canvas.\n  4. The canvas exports a smaller image using `canvas.toBlob()`.\n  5. The output file is downloaded or uploaded.\n\n\n\n##  Example: compress JPG in the browser\n\nHere is a simple JPG compression function:\n\n\n\n    export async function compressJpg(file, options = {}) {\n      const { quality = 0.82, maxWidth = 1600, maxHeight = 1600 } = options;\n\n      if (!file || !file.type.startsWith(\"image/\")) {\n        throw new Error(\"Please provide a valid image file.\");\n      }\n\n      const bitmap = await createImageBitmap(file);\n\n      const scale = Math.min(1, maxWidth / bitmap.width, maxHeight / bitmap.height);\n\n      const width = Math.round(bitmap.width * scale);\n      const height = Math.round(bitmap.height * scale);\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = width;\n      canvas.height = height;\n\n      const ctx = canvas.getContext(\"2d\");\n\n      if (!ctx) {\n        throw new Error(\"Canvas is not supported in this browser.\");\n      }\n\n      ctx.drawImage(bitmap, 0, 0, width, height);\n\n      const blob = await new Promise((resolve, reject) => {\n        canvas.toBlob(\n          (outputBlob) => {\n            if (!outputBlob) {\n              reject(new Error(\"JPG compression failed.\"));\n              return;\n            }\n\n            resolve(outputBlob);\n          },\n          \"image/jpeg\",\n          quality\n        );\n      });\n\n      return new File(\n        [blob],\n        file.name.replace(/\\.(png|webp|avif|heic|jpeg|jpg)$/i, \".jpg\"),\n        { type: \"image/jpeg\" }\n      );\n    }\n\n\n##  What does this code do?\n\nThe function does a few important things:\n\n  * checks that the selected file is an image\n  * loads the image in the browser\n  * resizes it if it is too large\n  * draws it on a canvas\n  * exports it as a compressed JPG\n  * returns a new compressed `File`\n\n\n\nThe `quality` value controls how much compression is applied.\n\nFor JPG, a quality value between `0.75` and `0.85` is often a good starting point.\n\n##  Resize before compression\n\nA very large image should usually be resized before compression.\n\nFor example, a phone image may be 4000px wide. If the final use is a web page, profile photo or online form, that may be unnecessary.\n\nResizing to something like 1200px or 1600px wide can reduce file size a lot before quality compression is even applied.\n\n##  Target KB compression\n\nSometimes users need an image under a specific file size, such as:\n\n  * under 50KB\n  * under 100KB\n  * under 200KB\n  * under 500KB\n\n\n\nThis is common for online forms, job applications, exam portals, government websites and profile photo uploads.\n\nTarget KB compression usually needs repeated attempts:\n\n  1. export the image at a starting quality\n  2. check the output file size\n  3. reduce quality if the image is still too large\n  4. repeat until the file is near the target size\n\n\n\nHere is a simple example:\n\n\n\n    export async function compressToTargetKb(file, options = {}) {\n      const {\n        targetKb = 100,\n        maxWidth = 1600,\n        maxHeight = 1600,\n        minQuality = 0.35,\n        initialQuality = 0.9,\n        qualityStep = 0.07,\n      } = options;\n\n      if (!file || !file.type.startsWith(\"image/\")) {\n        throw new Error(\"Please provide a valid image file.\");\n      }\n\n      const targetBytes = targetKb * 1024;\n      const bitmap = await createImageBitmap(file);\n\n      const scale = Math.min(1, maxWidth / bitmap.width, maxHeight / bitmap.height);\n\n      const width = Math.round(bitmap.width * scale);\n      const height = Math.round(bitmap.height * scale);\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = width;\n      canvas.height = height;\n\n      const ctx = canvas.getContext(\"2d\");\n\n      if (!ctx) {\n        throw new Error(\"Canvas is not supported in this browser.\");\n      }\n\n      ctx.drawImage(bitmap, 0, 0, width, height);\n\n      let quality = initialQuality;\n      let bestBlob = null;\n\n      while (quality >= minQuality) {\n        const blob = await new Promise((resolve, reject) => {\n          canvas.toBlob(\n            (outputBlob) => {\n              if (!outputBlob) {\n                reject(new Error(\"Compression failed.\"));\n                return;\n              }\n\n              resolve(outputBlob);\n            },\n            \"image/jpeg\",\n            quality\n          );\n        });\n\n        bestBlob = blob;\n\n        if (blob.size <= targetBytes) {\n          break;\n        }\n\n        quality -= qualityStep;\n      }\n\n      return new File(\n        [bestBlob],\n        file.name.replace(/\\.(png|webp|avif|heic|jpeg|jpg)$/i, \".jpg\"),\n        { type: \"image/jpeg\" }\n      );\n    }\n\n\n##  JPG vs PNG vs WebP\n\nDifferent formats behave differently.\n\n###  JPG\n\nJPG is usually best for photos, portraits, product images and camera images.\n\nIt can compress very well, but too much compression can make the image look blurry or blocky.\n\n###  PNG\n\nPNG is useful for screenshots, icons, logos, transparent graphics and sharp text.\n\nPNG files can be larger than JPG because PNG keeps sharp edges and transparency.\n\n###  WebP\n\nWebP is useful for modern websites because it can often create smaller files than JPG or PNG while keeping good quality.\n\n##  Privacy note\n\nBrowser-based image compression can be privacy-friendly because the browser can process the image locally for many simple tasks.\n\nThis is useful for personal photos, document images, ID photos, profile photos and online form uploads.\n\nDevelopers should still clearly explain how their tool works and avoid collecting unnecessary files or user data.\n\n##  Open-source examples\n\nI created a small GitHub repository with browser image compression examples:\n\nhttps://github.com/comkenia-llc/browser-image-compression-tools\n\nIt includes examples for:\n\n  * JPG compression\n  * PNG compression\n  * target KB compression\n  * image resizing\n  * JPG to WebP conversion\n\n\n\n##  Live browser-based tools\n\nYou can also try the live tools here:\n\n  * Compress Image Online: https://imagescompression.com/compress-image\n  * Compress JPG Online: https://imagescompression.com/compress-jpg\n  * Compress PNG Online: https://imagescompression.com/compress-png\n  * Compress Image Under 50KB: https://imagescompression.com/compress-image-to-50kb\n  * Compress Image to 100KB: https://imagescompression.com/compress-image-to-100kb\n  * Compress Image to 200KB: https://imagescompression.com/compress-image-to-200kb\n  * Compress Image for Online Form: https://imagescompression.com/compress-image-for-online-form\n  * Resize Image: https://imagescompression.com/resize-image\n\n\n\n##  Final thoughts\n\nBrowser-based image compression is a practical way to improve user experience.\n\nFor many apps, the best workflow is simple:\n\n  * resize large images\n  * compress them in the browser\n  * show a preview\n  * upload or download the smaller result\n\n\n\nIt is especially useful for mobile users, online forms, dashboards, profile photos and website image optimization.",
  "title": "How to Compress Images in the Browser Using JavaScript"
}