HEIC di Web: Dukungan Browser dan Praktik Terbaik

Browser web tidak mendukung HEIC secara luas. Hanya Safari yang mendekode HEIC secara native. Chrome, Firefox, Edge, dan Opera tidak dapat menampilkan gambar HEIC tanpa polyfill JavaScript. Ini menciptakan persyaratan rekayasa yang jelas: terima HEIC dalam alur upload, tetapi jangan pernah sajikan HEIC ke browser.

Panduan ini membahas alur kerja developer secara lengkap -- mendeteksi upload HEIC, konversi server-side dan client-side, memilih format pengiriman, dan mengimplementasikan content negotiation. Untuk latar belakang tentang formatnya sendiri, lihat Apa itu HEIC?.

Dukungan Browser untuk HEIC

Dukungan browser HEIC terbatas pada Safari. Tidak ada browser utama lainnya yang berkomitmen untuk dekoding HEIC native. Biaya lisensi paten HEVC adalah penghalang utamanya.

| Browser | Dukungan HEIC | Catatan | | --- | --- | --- | | Safari | Ya (macOS 11+, iOS 11+) | Dekoder HEVC native di hardware Apple | | Chrome | Tidak | Tidak ada rencana untuk dukungan native | | Firefox | Tidak | Terhalang biaya lisensi HEVC | | Edge | Tidak | Bergantung pada codec OS; hasil tidak konsisten | | Opera | Tidak | Keterbatasan Chromium yang sama seperti Chrome | | Samsung Internet | Tidak | Tidak ada dekoding HEIC native |

Dukungan Safari berasal dari dekoder hardware HEVC Apple, yang ada di setiap perangkat Apple sejak 2017. Vendor browser lain menolak membayar royalti paten HEVC. Situasi ini kemungkinan tidak akan berubah.

Sebagai perbandingan, WebP memiliki dukungan browser 97%+ dan AVIF memiliki dukungan 93%+. Keduanya bebas royalti.

MIME Types dan Ekstensi File HEIC

Penanganan MIME type yang benar sangat penting untuk mendeteksi upload HEIC. Tipe yang terdaftar di IANA adalah:

| MIME Type | Deskripsi | | --- | --- | | image/heic | Gambar HEIC tunggal (codec HEVC) | | image/heic-sequence | Urutan gambar HEIC (animasi/burst) | | image/heif | Gambar HEIF tunggal (generik, codec apa pun) | | image/heif-sequence | Urutan gambar HEIF |

Ekstensi file yang umum adalah .heic dan .heif. Live Photos Apple menggunakan .heic untuk bingkai diam. Beberapa kamera menghasilkan .heics untuk urutan.

Browser mungkin tidak mengisi MIME type dengan benar. Pada beberapa platform, File.type mengembalikan string kosong untuk upload HEIC. Selalu validasi dengan ekstensi file sebagai fallback.

Mendeteksi Upload HEIC

Deteksi HEIC yang andal memerlukan pemeriksaan MIME type dan ekstensi file. Inspeksi file signature (magic bytes) menambahkan lapisan kepastian ketiga.

function isHeicFile(file) {
  // Check MIME type
  const heicMimeTypes = [
    'image/heic',
    'image/heif',
    'image/heic-sequence',
    'image/heif-sequence',
  ];
  if (heicMimeTypes.includes(file.type.toLowerCase())) {
    return true;
  }

  // Fallback: check file extension
  const extension = file.name.split('.').pop()?.toLowerCase();
  return ['heic', 'heif', 'heics'].includes(extension);
}

Untuk elemen file input, atur atribut accept untuk menyertakan tipe HEIC:

<input
  type="file"
  accept="image/heic,image/heif,.heic,.heif,image/jpeg,image/png,image/webp"
/>

Menyertakan MIME types dan ekstensi dalam atribut accept memastikan kompatibilitas di seluruh browser dan sistem operasi.

Konversi Server-Side

Konversi server-side adalah pendekatan paling andal untuk aplikasi web yang memproses upload pengguna. Ada tiga opsi yang sudah matang.

Sharp (Node.js)

Sharp adalah library pemrosesan gambar Node.js tercepat. Di balik layar, Sharp menggunakan libvips yang terhubung ke libheif untuk dekoding HEIC.

import sharp from 'sharp';

async function convertHeicToWebP(inputBuffer) {
  return sharp(inputBuffer)
    .webp({ quality: 80 })
    .toBuffer();
}

async function convertHeicToJpg(inputBuffer) {
  return sharp(inputBuffer)
    .jpeg({ quality: 85, mozjpeg: true })
    .toBuffer();
}

Sharp menangani input HEIC secara otomatis ketika libheif tersedia. Instal Sharp v0.33+ untuk dukungan HEIC penuh. Memproses gambar HEIC 12 MP membutuhkan waktu sekitar 200-500ms pada perangkat keras server modern.

ImageMagick

ImageMagick mendukung HEIC melalui delegate libheif-nya. Tersedia di sebagian besar distribusi Linux dan berfungsi baik dalam kontainer Docker.

# Convert single file
magick input.heic -quality 85 output.webp

# Batch convert with resize
magick mogrify -format webp -quality 80 -resize 2048x2048\> *.heic

ImageMagick lebih lambat dari Sharp untuk penggunaan programatik tetapi unggul dalam pemrosesan batch dan alur kerja CLI.

libheif (C/C++)

libheif adalah dekoder referensi HEIF/HEIC. Baik Sharp maupun ImageMagick menggunakannya secara internal. Integrasi libheif langsung memberikan kontrol maksimum atas parameter dekoding. Gunakan libheif secara langsung saat membangun pipeline gambar kustom dalam C, C++, Go, atau Rust.

Konversi Client-Side

Konversi HEIC client-side menghilangkan biaya pemrosesan server dan menghindari upload foto yang berpotensi sensitif. Dua library JavaScript menangani dekoding HEIC di browser.

libheif-js

libheif-js mengompilasi library libheif berbasis C ke WebAssembly. Library ini menyediakan akses level rendah ke dekoding HEIC, termasuk kontainer multi-gambar dan ekstraksi metadata.

import libheif from 'libheif-js';

async function decodeHeic(buffer) {
  const decoder = new libheif.HeifDecoder();
  const images = decoder.decode(new Uint8Array(buffer));

  const image = images[0];
  const width = image.get_width();
  const height = image.get_height();

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(width, height);
  await new Promise((resolve) => {
    image.display(imageData, (result) => resolve(result));
  });
  ctx.putImageData(imageData, 0, 0);

  return canvas;
}

heic2any

heic2any menyediakan API yang lebih sederhana yang mengonversi file HEIC langsung ke objek Blob dalam format JPG, PNG, atau GIF.

import heic2any from 'heic2any';

async function convertHeicToJpg(heicBlob) {
  const jpgBlob = await heic2any({
    blob: heicBlob,
    toType: 'image/jpeg',
    quality: 0.85,
  });
  return jpgBlob;
}

heic2any menggunakan libheif-js secara internal. Library ini menukar konfigurabilitas dengan kemudahan penggunaan.

Web Workers untuk Konversi Non-Blocking

Dekoding HEIC intensif CPU dan akan memblokir thread utama. Gambar HEIC 12 MP membutuhkan waktu 1-3 detik untuk didekode melalui WebAssembly. Gunakan Web Workers untuk menjaga UI tetap responsif.

// converter.worker.js
import heic2any from 'heic2any';

self.onmessage = async (event) => {
  const { file, quality } = event.data;
  try {
    const result = await heic2any({
      blob: file,
      toType: 'image/jpeg',
      quality: quality || 0.85,
    });
    self.postMessage({ success: true, blob: result });
  } catch (error) {
    self.postMessage({ success: false, error: error.message });
  }
};

HEICify menggunakan pola yang persis sama -- libheif-js yang berjalan di dalam Web Workers -- untuk mengonversi file HEIC sepenuhnya di browser tanpa upload ke server. Memproses beberapa file secara paralel di beberapa worker secara dramatis meningkatkan throughput konversi batch.

Pengiriman Gambar: Jangan Pernah Sajikan HEIC

Jangan sajikan gambar HEIC ke browser web. Dengan dukungan browser kurang dari 20%, HEIC akan gagal untuk sebagian besar pengguna. Gunakan strategi pengiriman multi-format sebagai gantinya.

Format pengiriman yang direkomendasikan

| Format | Dukungan Browser | Terbaik Untuk | | --- | --- | --- | | WebP | 97%+ | Format modern utama untuk semua gambar | | AVIF | 93%+ | Kompresi maksimum, konten HDR | | JPG | 100% | Fallback universal untuk foto | | PNG | 100% | Fallback untuk gambar dengan transparansi |

Elemen picture

Elemen HTML <picture> memungkinkan browser memilih format optimal dari daftar. Browser memilih source pertama yang mereka dukung.

<picture>
  <source srcset="/images/photo.avif" type="image/avif" />
  <source srcset="/images/photo.webp" type="image/webp" />
  <img src="/images/photo.jpg" alt="Description" width="800" height="600" />
</picture>

Ini menyajikan AVIF ke Chrome 85+, Firefox 93+, dan Safari 16.4+. Browser tanpa dukungan AVIF mendapatkan WebP. Browser tanpa dukungan WebP (persentase yang dapat diabaikan di tahun 2026) mendapatkan JPG.

Content negotiation dengan header Accept

Content negotiation server-side menggunakan header request Accept untuk mendeteksi dukungan format. Browser mendeklarasikan format gambar yang didukung dalam header ini.

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Contoh middleware Node.js:

function negotiateImageFormat(req) {
  const accept = req.headers.accept || '';

  if (accept.includes('image/avif')) return 'avif';
  if (accept.includes('image/webp')) return 'webp';
  return 'jpg';
}

CDN seperti Cloudflare, Fastly, dan AWS CloudFront dapat mengotomatisasi negosiasi ini. Konfigurasikan mereka untuk memvariasikan respons berdasarkan header Accept dan menyajikan varian format yang sudah di-generate sebelumnya.

Sertakan Vary: Accept dalam header respons saat menyajikan format berbeda dari URL yang sama. Ini mencegah cache menyajikan format yang salah ke browser yang salah.

Vary: Accept
Content-Type: image/webp

Pertimbangan Performa

Benchmark konversi server-side

Memproses file HEIC 12 MP (4032 x 3024 piksel):

| Alat | Waktu Dekode | Output ke WebP | Output ke JPG | | --- | --- | --- | --- | | Sharp | ~200 ms | ~350 ms total | ~300 ms total | | ImageMagick | ~400 ms | ~700 ms total | ~600 ms total | | libheif CLI | ~150 ms | N/A (dekode saja) | N/A (dekode saja) |

Benchmark konversi client-side

Dekoding HEIC WebAssembly di browser (file 12 MP, CPU desktop modern):

| Library | Waktu Dekode | Konversi Penuh | | --- | --- | --- | | libheif-js | ~1,5 detik | ~2,0 detik (ke canvas) | | heic2any | ~1,8 detik | ~2,5 detik (ke blob JPG) |

Dekoding client-side 5-10x lebih lambat dari dekoding native server-side. Ini dapat diterima untuk konversi file tunggal. Untuk pemrosesan batch, gunakan beberapa Web Workers untuk memparalelkan di seluruh core CPU. Perangkat mobile sekitar 2-3x lebih lambat dari desktop.

Penggunaan memori

Dekoding HEIC memerlukan penyimpanan bitmap penuh yang tidak terkompresi di memori. Gambar 12 MP pada 4 byte per piksel menggunakan 48 MB RAM. Gambar 48 MP menggunakan 192 MB. Pantau penggunaan memori saat memproses beberapa file secara bersamaan di browser.

Contoh Penanganan Upload Lengkap

Implementasi praktis yang mendeteksi HEIC, mengonversi ke WebP, dan mengembalikan gambar siap web:

async function handleImageUpload(file) {
  if (isHeicFile(file)) {
    // Convert HEIC to WebP via Sharp
    const buffer = Buffer.from(await file.arrayBuffer());
    const webpBuffer = await sharp(buffer)
      .resize(2048, 2048, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 80 })
      .toBuffer();
    return { buffer: webpBuffer, mimeType: 'image/webp' };
  }

  // Non-HEIC images: optimize directly
  const buffer = Buffer.from(await file.arrayBuffer());
  const webpBuffer = await sharp(buffer)
    .resize(2048, 2048, { fit: 'inside', withoutEnlargement: true })
    .webp({ quality: 80 })
    .toBuffer();
  return { buffer: webpBuffer, mimeType: 'image/webp' };
}

Buat beberapa varian format saat upload -- AVIF, WebP, dan JPG -- untuk disajikan melalui elemen <picture> atau negosiasi header Accept.

Poin-Poin Penting

1. Terima upload HEIC -- pengguna iPhone akan mengirimkannya. Deteksi berdasarkan MIME type dan ekstensi file.
2. Konversi saat ingest -- transformasi HEIC ke WebP, AVIF, dan JPG saat upload, bukan saat pengiriman.
3. Jangan pernah sajikan HEIC -- dukungan browser kurang dari 20% membuatnya tidak cocok untuk pengiriman gambar.
4. Gunakan WebP sebagai utama -- dukungan browser 97%+ dengan kompresi yang kuat. Tambahkan AVIF untuk penghematan maksimum.
5. Pindahkan ke Web Workers -- dekoding HEIC client-side memblokir thread utama selama 1-3 detik per gambar.
6. Atur Vary: Accept -- saat menyajikan beberapa format dari URL yang sama, cegah cache poisoning.

Untuk detail perbandingan format, lihat HEIC vs WebP dan HEIC vs AVIF. Untuk mengonversi file HEIC tanpa menginstal perangkat lunak, gunakan konverter HEIC ke JPG HEICify atau konverter HEIC ke PNG -- keduanya memproses file sepenuhnya di browser Anda.