[WEB App] HEIC / HEIF Image Converter v1 — libheif WASMによるブラウザ完結型バッチ変換ツール

[WEB App] HEIC / HEIF Image Converter v1 — libheif WASMによるブラウザ完結型バッチ変換ツール

HEIC / HEIF Image Converter

libheif WASMでiPhoneのHEIC/HEIF画像をブラウザだけでJPEG/PNG/WebPに変換するツール。

すべてのデコード処理はlibheif(C/C++)のEmscripten WASMビルドでブラウザ内完結。画像ファイルがサーバーに送信されることはない。複数ファイルの一括変換をメインユースケースとして設計しており、サムネイルグリッド表示・ZIP一括ダウンロードに対応。

スクリーンショット

サムネイルグリッド表示

HEIC Converter — サムネイルグリッド表示

動画(GIF)

HEIC Converter — 操作デモ

使い方

1. HEICファイルを読み込む

左パネルのドロップエリアにHEIC/HEIFファイルをドラッグ&ドロップするか、クリックしてファイルを選択。中央ビューポートへの直接ドロップにも対応。複数ファイルを一度に追加できる。

対応形式:.heic .heif .hif .avif

2. サムネイルを確認する

読み込んだファイルは自動的にデコードされ、中央エリアにサムネイルグリッドとして表示される。左パネルの「Thumb」スライダー(80px〜300px)でサムネイルのサイズを自由に変更可能。

3. プレビューで確認する

サムネイルをクリックすると、フル解像度のプレビューが表示される。マウスホイールでズーム(カーソル位置中心)、ドラッグでパン操作。Fit / 1:1 ボタンで表示を切替。✕ ボタンでグリッドに戻る。

左パネルに選択中の画像のファイル情報(名前、サイズ、解像度、デコード時間、圧縮率)が表示される。

4. 出力フォーマットを選ぶ

左パネルの「EXPORT」セクションで出力フォーマットを選択。

フォーマット品質スライダー特徴
PNGなし(ロスレス)劣化なし、ファイルサイズ大
JPEG10〜100(デフォルト90)高圧縮、写真向き
WebP10〜100(デフォルト90)JPEGより高圧縮、最新ブラウザ対応

5. 一括変換する

「⚡ Convert All」ボタンで全ファイルを一括変換。進捗バーとファイルごとのステータス(Pending → Done ✓ / Error)が表示される。

6. ダウンロードする

  • ZIP一括ダウンロード — 「ZIP でまとめてダウンロード」チェック(デフォルトON)で、変換完了後に全ファイルをZIPにまとめてダウンロード
  • 個別ダウンロード — チェックを外すと1枚ずつ自動ダウンロード
  • 単体保存 — プレビュー表示中に「💾 Download」ボタンで選択中の画像だけダウンロード

HEICとは?

HEIC(High Efficiency Image Container)はAppleがiOS 11以降のデフォルト撮影形式として採用した画像フォーマット。内部コーデックにHEVC(H.265)を使用し、JPEGの約2倍の圧縮効率を持つ。

しかし、Windows・Android・多くのWebサービスではネイティブサポートが限定的で、「iPhoneの写真が開けない」「SNSにアップロードできない」という場面が多い。

本ツールはWASMによるブラウザ完結処理のため、オンライン変換サービスのように画像をサーバーに送信する必要がなく、プライバシーを保ったまま変換できる。

技術スタック

  • libheif-js — libheif + libde265 のEmscripten WASMビルド(CDN ESM import)
  • Canvas 2D — プレビュー描画(pan/zoom)、サムネイル生成、フォーマット変換(toBlob
  • JSZip — ZIP一括ダウンロード(esm.sh経由の動的import)
  • Astro — 静的サイト生成、scoped CSS + inline styleハイブリッド

技術記事

更新履歴

  • [v1.0] (2026-09-05): 初回公開。
    • libheif-js WASMによるHEIC/HEIFデコード
    • JPEG / PNG / WebP 出力(品質スライダー対応)
    • 複数ファイル一括読み込み・バッチ変換
    • サムネイルグリッド表示(サイズ可変スライダー 80〜300px)
    • フル解像度プレビュー(Canvas pan/zoom、Fit/1:1切替)
    • ファイル情報表示(名前、サイズ、解像度、デコード時間、圧縮率)
    • JSZipによるZIP一括ダウンロード / 個別ダウンロード切替
    • ドラッグ&ドロップ(ドロップゾーン + ビューポート)
    • バッチリスト管理(ファイル個別削除)
    • モバイルレスポンシブ対応