Convert iPhone HEIC photos to JPG in the browser with JavaScript

ai startup — Wed, 21 Oct 2026 08:01:56 +0000

iPhones save photos as HEIC by default. They are about half the size of JPG, but many websites, forms and Windows apps cannot open them. A common request is "let users upload an iPhone photo", and most upload forms reject .heic.

You can convert HEIC to JPG entirely in the browser, with no server. Here is a small, working approach using the heic2any library.

Why not just use a canvas?

Normally you would draw an image onto a canvas and call toBlob(). That fails for HEIC in most browsers, because only Safari can decode HEIC natively. Chrome, Firefox and Edge cannot load a .heic file into an <img>. So you need a decoder, and heic2any ships one compiled to WebAssembly.

Minimal code

<input type="file" id="file" accept=".heic,.heif,image/heic,image/heif" multiple>
<ul id="list"></ul>
<script src="heic2any.min.js"></script>
<script>
document.getElementById('file').addEventListener('change', async (e) => {
  const list = document.getElementById('list');
  list.innerHTML = '';

  for (const file of e.target.files) {
    try {
      const result = await heic2any({
        blob: file,
        toType: 'image/jpeg',
        quality: 0.9
      });
      const blob = Array.isArray(result) ? result[0] : result;

      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = file.name.replace(/\.[^.]+$/, '') + '.jpg';
      a.textContent = 'Download ' + a.download;

      const li = document.createElement('li');
      li.appendChild(a);
      list.appendChild(li);
    } catch (err) {
      console.error(file.name, err);
    }
  }
});
</script>

Details that matter

The library is large (about 1.3 MB). Load it lazily, only after the user picks a HEIC file, so normal page loads stay fast.
heic2any can return an array. A multi-image HEIC (like a Live Photo burst) gives several blobs, so always check Array.isArray(result).
File type can be empty. On some systems the browser reports an empty file.type for .heic, so also check the file name extension, not just the MIME type.
Convert files one at a time. Decoding is memory-heavy, so a loop with await is safer than Promise.all on a big batch.
Quality 0.9 is a good default. You rarely see a difference from 1.0, and the JPG is much smaller.
No upload needed. The file is read locally, which is good for private photos.

Try it without writing code

I turned this into a small free tool: HEIC to JPG converter (there is also HEIC to PNG). It converts several photos at once and runs entirely in your browser. A step-by-step guide for non-developers is here: how to convert HEIC to JPG.

Questions or edge cases you have run into with HEIC? Happy to discuss in the comments.

Compress an image to an exact file size in the browser (canvas + binary search)

ai startup — Tue, 20 Oct 2026 12:45:37 +0000

Forms love to say "upload a photo under 50KB". Phone photos are 3MB. Most "compress image" sites make you upload the file to a server first, which is slow and not great for ID photos.

You can do it entirely in the browser with the canvas API. Here is the approach I used for a small tool I built, and a minimal version you can copy.

The idea

canvas.toBlob(callback, 'image/jpeg', quality) lets you choose a JPEG quality between 0 and 1. File size goes up as quality goes up, so you can binary search the quality that gets closest to your target size without going over.

If even the lowest quality is too big, shrink the pixel dimensions and try again.

Minimal code
js
function toBlob(canvas, type, q) {
return new Promise(res => canvas.toBlob(res, type, q));
}

async function compressTo(img, targetBytes) {
let w = img.naturalWidth, h = img.naturalHeight;

for (let i = 0; i < 18; i++) {
const c = document.createElement('canvas');
c.width = Math.round(w);
c.height = Math.round(h);
const ctx = c.getContext('2d');
ctx.fillStyle = '#fff'; // JPEG has no transparency
ctx.fillRect(0, 0, c.width, c.height);
ctx.drawImage(img, 0, 0, c.width, c.height);

let lo = 0.05, hi = 0.95;
let best = await toBlob(c, 'image/jpeg', lo);

if (best.size <= targetBytes) {
  // binary search for the highest quality that still fits
  for (let j = 0; j < 7; j++) {
    const mid = (lo + hi) / 2;
    const b = await toBlob(c, 'image/jpeg', mid);
    if (b.size <= targetBytes) { best = b; lo = mid; } else { hi = mid; }
  }
  return best;
}
// too big even at lowest quality: shrink dimensions by 15% and retry
w *= 0.85; h *= 0.85;

}
return null;
}

Use it like this:

js
const file = input.files[0];
const img = new Image();
img.onload = async () => {
const blob = await compressTo(img, 50 * 1024); // 50KB
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'photo-50kb.jpg';
a.click();
};
img.src = URL.createObjectURL(file);
Details that matter
Fill the canvas white first. PNGs with transparency turn black when exported as JPEG otherwise.
Seven search steps is enough. The quality range is narrowed to under 1 percent, which is well below what you can see.
Resize only when you have to. Lowering quality first keeps the pixel size, which many forms also check.
Nothing leaves the device. The file is read with URL.createObjectURL, so no upload is needed. That is a real privacy win for ID photos and documents.
PNG ignores quality. toBlob only uses the quality argument for JPEG and WebP, so convert to JPEG for size targets.

Try it without writing code

I turned this into a small free tool with presets for the common limits: compress an image to 50KB, or pick any other size from the full list of compressors. It also does exact-pixel resizing and format conversion, all client-side.

Happy to answer questions about the approach in the comments.

DEV Community: ai startup

Convert iPhone HEIC photos to JPG in the browser with JavaScript

Why not just use a canvas?

Minimal code

Details that matter

Try it without writing code

Compress an image to an exact file size in the browser (canvas + binary search)

Try it without writing code