[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 / HEIF Image Converter
libheif WASMによるHEIC/HEIF画像のブラウザ変換。バッチ一括変換、サムネイルグリッド、ZIPダウンロード対応。
lain-lab.comスクリーンショット
サムネイルグリッド表示
動画(GIF)
使い方
1. HEICファイルを読み込む
左パネルのドロップエリアにHEIC/HEIFファイルをドラッグ&ドロップするか、クリックしてファイルを選択。中央ビューポートへの直接ドロップにも対応。複数ファイルを一度に追加できる。
対応形式:.heic .heif .hif .avif
2. サムネイルを確認する
読み込んだファイルは自動的にデコードされ、中央エリアにサムネイルグリッドとして表示される。左パネルの「Thumb」スライダー(80px〜300px)でサムネイルのサイズを自由に変更可能。
3. プレビューで確認する
サムネイルをクリックすると、フル解像度のプレビューが表示される。マウスホイールでズーム(カーソル位置中心)、ドラッグでパン操作。Fit / 1:1 ボタンで表示を切替。✕ ボタンでグリッドに戻る。
左パネルに選択中の画像のファイル情報(名前、サイズ、解像度、デコード時間、圧縮率)が表示される。
4. 出力フォーマットを選ぶ
左パネルの「EXPORT」セクションで出力フォーマットを選択。
| フォーマット | 品質スライダー | 特徴 |
|---|---|---|
| PNG | なし(ロスレス) | 劣化なし、ファイルサイズ大 |
| JPEG | 10〜100(デフォルト90) | 高圧縮、写真向き |
| WebP | 10〜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ハイブリッド
技術記事
[Astro] #126 HEIC / HEIF Image Converter — libheif WASMによるブラウザ完結型バッチ変換ツール
libheif WASM(libheif-js)によるHEIC→JPEG/PNG/WebP変換の技術解説。バッチ処理、サムネイルグリッド、Astro scoped CSS回避策。
lain-lab.com更新履歴
- [v1.0] (2026-09-05): 初回公開。
- libheif-js WASMによるHEIC/HEIFデコード
- JPEG / PNG / WebP 出力(品質スライダー対応)
- 複数ファイル一括読み込み・バッチ変換
- サムネイルグリッド表示(サイズ可変スライダー 80〜300px)
- フル解像度プレビュー(Canvas pan/zoom、Fit/1:1切替)
- ファイル情報表示(名前、サイズ、解像度、デコード時間、圧縮率)
- JSZipによるZIP一括ダウンロード / 個別ダウンロード切替
- ドラッグ&ドロップ(ドロップゾーン + ビューポート)
- バッチリスト管理(ファイル個別削除)
- モバイルレスポンシブ対応