How to Convert HEIC Images to JPG using JavaScript (Client-Side)

Apple devices (iPhones and iPads) record photos in the HEIC (High Efficiency Image File Format) by default. While HEIC is great for saving storage space, many browsers and web applications cannot render it natively.

If you are building an image upload feature for your web app, converting HEIC files to standard formats like JPG or PNG on the client side ensures maximum browser compatibility.

In this guide, we will walk through converting HEIC images to JPG directly in the browser using JavaScript and the heic2any library.

Why Convert HEIC to JPG on the Client Side?
Universal Support: JPG files render seamlessly across all operating systems and web browsers.

Reduces Server Workload: Processing image conversions in the user's browser saves CPU resources and backend hosting costs.

Instant Previews: Users can see their converted photos immediately before submitting or uploading them.

Step 1: Include the heic2any Library
The heic2any library makes in-browser HEIC conversion simple. You can install it via NPM or include it via CDN.

Using NPM:

npm install heic2any

Using CDN:

<script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>

Step 2: Write the Conversion Function
Here is the core JavaScript logic. It takes a .heic file from an HTML input, converts it into a JPG Blob, and creates an image preview URL.

JavaScript
/**
 * Converts a HEIC file to a JPG Blob URL
 * @param {File} file - The uploaded HEIC file
 * @returns {Promise<string>} - Object URL of the converted JPG
 */
async function convertHeicToJpg(file) {
  try {
    const convertedBlob = await heic2any({
      blob: file,
      toType: "image/jpeg",
      quality: 0.8 // Adjust image quality (0.0 to 1.0)
    });

    // Create a temporary URL to render or download the converted image
    const convertedUrl = URL.createObjectURL(
      Array.isArray(convertedBlob) ? convertedBlob[0] : convertedBlob
    );

    return convertedUrl;
  } catch (error) {
    console.error("HEIC conversion failed:", error);
    throw error;
  }
}

Step 3: Complete HTML & JS Working Example
Below is a complete, ready-to-run HTML file with a file picker, a progress indicator, and an image preview container:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Browser HEIC Converter</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 2rem; max-width: 600px; margin: auto; }
    #preview { margin-top: 1rem; max-width: 100%; display: none; border-radius: 8px; }
    .status { margin-top: 1rem; font-weight: bold; color: #555; }
  </style>
</head>
<body>

  <h2>Client-Side HEIC to JPG Converter</h2>
  <input type="file" id="imageInput" accept=".heic, .heif" />
  <div id="status" class="status"></div>
  <img id="preview" alt="Converted Preview" />

  <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
  <script>
    const input = document.getElementById('imageInput');
    const status = document.getElementById('status');
    const preview = document.getElementById('preview');

    input.addEventListener('change', async (event) => {
      const file = event.target.files[0];
      if (!file) return;

      status.textContent = "Converting image, please wait...";
      preview.style.display = 'none';

      try {
        const jpgUrl = await convertHeicToJpg(file);
        preview.src = jpgUrl;
        preview.style.display = 'block';
        status.textContent = "Conversion Complete!";
      } catch (err) {
        status.textContent = "Error converting file. Please ensure it's a valid HEIC image.";
      }
    });
  </script>
</body>
</html>

Summary
Handling HEIC uploads on the web doesn't require heavy backend servers. Using JavaScript libraries like heic2any, you can process image conversions directly inside the user's browser in just a few lines of code.

Need a free online tool to convert files instantly?

If you are looking for a ready-to-use web utility, check out HEIC to JPG for fast browser-based document conversions.