HEIC画像がブラウザで読み込めない原因と対処｜heic2anyが新しいiPhoneの写真で失敗した実録【2026年】

iPhoneで撮ったHEIC画像がブラウザで読み込めないのは、2026年10月時点でHEICを表示できるブラウザがSafari 17.0以降だけだからです。Chromeなどでは、先にJPEGへ変換してから処理します。当社は変換ライブラリのheic2anyが新しいiPhoneの写真で失敗し、heic-toに替えました。

HEIC画像がブラウザで読み込めない原因：表示できるのはSafari 17.0以降だけ

写真を選ぶところまでは進むのに、プレビューが出ない。加工や圧縮の処理が途中で止まる。当社で起きた例では、原因は写真の形式でした。

HEIFとは、Appleの公式サポートが「写真用」と説明している画像の形式（High Efficiency Image File Format）のことです。ブラウザの対応をまとめているcaniuseは「HEIF/HEIC image format」と1つにして扱っているので、この記事ではHEICと書きます。Appleの公式サポートによると、iOS 11以降のiPhone 7以降はこの形式で撮影できます。

2026年10月13日に確かめたcaniuseの対応状況は、次のとおりです。

caniuseは、対応が進まない理由としてライセンスの費用を挙げています。MDN（ブラウザの機能をまとめた開発者向けの資料）の画像形式のガイドでも、ブラウザで広く使える形式として並んでいるのはAPNG・AVIF・GIF・JPEG・JPEG XL・PNG・SVG・WebPで、HEICはこの一覧にありません。

つまり、写真を受け取るページが <input type="file" accept="image/*"> で画像を選ばせ、そのままブラウザの中で表示や加工をする作りだと、Safari以外ではHEICのところで止まります。当社の記録でも、ChromeとEdgeはHEICを <img> で読めませんでした。画像を圧縮するライブラリも、内部でブラウザの描画機能を使うものは同じ所で失敗しました。

もう1つ、原因が見えにくい理由があります。当社の例では、失敗したときのログに出たのは {} という空のエラーだけでした。「形式が違う」とはどこにも書かれません。

HEICを読み込めるようにする対処手順：iPhoneの設定と、サイト側のJPEG変換

対処は、写真を撮る側でできることと、サイトを作る側でやることに分かれます。

写真を送る側：iPhoneのカメラを「互換性優先」にする

Appleの公式サポートに載っている手順です。

1. 「設定」を開き、「カメラ」をタップする。
2. 「フォーマット」をタップし、「互換性優先」をタップする。

Appleの公式サポートには、こうすると「新しく撮影する写真やビデオはすべてJPEGまたはH.264フォーマットになります。」と書かれています。元に戻すときは同じ画面で「高効率」を選びます。すでに撮ってある写真はHEICのままなので、この設定では変わりません。

社内の数人が使うフォームなら、これで済みます。不特定のお客さんに送ってもらうフォームでは、設定をお願いできないので、サイト側で対応します。

サイトを作る側：読めなかったファイルだけJPEGに変換する

当社のツールとアプリで決めている順番は、次のとおりです。

1. まず、そのまま読んでみる。 Safariは自前でHEICを読めるので、変換は要りません。読めたらそのまま進みます。
2. 読めなかったら、HEICかどうかを判定する。 ファイル名の拡張子（.heic・.heif）とファイルの種類の表示だけに頼らず、ファイルの先頭にある形式の印を見ます。変換ライブラリのheic-toにも、判定用の isHeic があります。
3. HEICなら、ブラウザの中でJPEGに変換する。 変換ライブラリは3MBあるので、HEICが来たときにだけ読み込みます。変換は1枚につき1回にして、結果を使い回します。
4. 変換後のJPEGを、いつもの表示・加工・圧縮の処理に渡す。
5. 失敗したら、理由とファイル名を画面に出す。 エラーは文字に直してから記録します。そのまま記録すると、空の {} しか残らないことがあります。失敗したファイルが送信されないように、選択も取り消します。

heic-toのREADME（説明書）に載っている関数を使うと、2と3は次のように書けます。書き方は版で変わることがあるので、使う前にREADMEを確かめてください。

async function toReadable(file) {
  const { isHeic, heicTo } = await import('heic-to');
  if (!(await isHeic(file))) return file;
  const blob = await heicTo({ blob: file, type: 'image/jpeg', quality: 0.9 });
  const name = file.name.replace(/\.(heic|heif)$/i, '.jpg');
  return new File([blob], name, { type: 'image/jpeg' });
}

accept に .heic を足すかどうか

accept 属性とは、ファイルを選ぶ入力欄で、どの種類のファイルを受け入れるかをブラウザに伝えるHTMLの属性のことです。MDNによると、image/* は「任意の画像ファイル」を意味します。また、この属性は選ばれたファイルを検証するものではなく、選びやすくするためのヒントです。

ここは、当社の中でも判断が変わった点です。2026年5月の社内メモには「accept に image/*,.heic,.heif を明示する」と書きました。ところが2026年9月のツールの記録では、.heic を足すとiPhoneのSafariが自動でJPEGにしてくれる動きが外れて処理が遅くなる、という理由で image/* のままにしています。この動きはAppleの公式サポートでは確かめられていないので、当社の記録として読んでください。

裏方で実際に起きた例：heic2anyが format not supported で失敗した2026年9月11日

ここからは、僕の会社（株式会社UrakaTA）の社内の記録からの転記です。HEICの問題は、3つの案件で合わせて4回踏んでいます。

この中で、直したつもりが直っていなかったのが、9月11日の2回目です。

1回目の対応でheic2anyを入れたあと、検証用のHEICを2枚用意しました。Macに入っている変換コマンドで、手元のJPEGから作ったものです。この2枚は、Chromeと同じ系統のブラウザで変換から加工まで通りました。直ったと判断して公開しています。

ところが同じ日、僕が実機で撮った写真を入れると「読み込めませんでした」と出ました。エラーの中身は format not supported です。調べると、heic2anyが中で使っているHEICの読み取り部分が古く、iPhone 15や16で撮った写真を読めていませんでした。Macで作った検証用のHEICは、古い読み取り部分でも読めてしまっていたのです。

直し方は、変換ライブラリの入れ替えでした。heic-toは、中で使うlibheif（HEICを読むためのライブラリ）の新しい版に追従し続けることを、READMEで目的に挙げているライブラリです。当社が入れた版は1.5.2で、libheifは1.22.2でした。入れ替えたあとは、実機の写真（5712×4284ピクセル）を約1秒で変換でき、写真の向きも正しく反映されました。なお2026年10月13日時点のREADMEでは、libheifは1.23.6になっています。

heic2anyのREADMEには、中で使っている読み取り部分の版は書かれていません。「古い」というのは、公式の記載ではなく当社が実機で確かめた結果です。この日のうちに、エラーの画面に理由とファイル名を出すようにも直しました。調べて直すまでにかかった時間は、記録に残していないので書きません。

9月22日のサーバー側の件も、形は同じでした。標準の配布版の画像処理ライブラリ（sharp）はHEICを読めず、エラーの文面からは形式が非対応だと分かりませんでした。HEICを読める構成で組み直したあとの実測は、4,800万画素・21.9MBの写真1枚で4.6秒、メモリは439MBです。この重さに合わせて、同時に処理する枚数を2枚に絞りました。

HEICの不具合を再発させないルール：検証は実機で撮った写真で行う

当社が決めたルールは、次の4つです。

• 検証用のHEICを、パソコンで作らない。 パソコンで変換して作ったHEICは、実機の写真と中身が同じではありません。当社はこれで1回、直っていないものを公開しました。検証には、実際に使われる機種で撮った写真を使います。
• 写真を受け取る機能には、最初からHEICの対応を入れる。 スマートフォンから送ってもらう前提なら、後から足すのではなく設計に入れます。
• エラーには、理由とファイル名を必ず出す。 空の {} や「読み込めませんでした」だけでは、利用者も作った側も原因にたどり着けません。
• 変換ライブラリは、いつの版かを記録しておく。 新しい機種が出ると、写真の中身が変わることがあります。当社は入れた版を社内の記録に残しています。

「実機で確かめる」は、HEICに限らない教訓です。画面の崩れを実機で初めて見つけた例は、AI導入の失敗事例7つの「失敗2」に書きました。

業務で写真を受け取るフォームを作るときの注意

変換する場所で、写真の行き先が変わる。 ブラウザの中で変換すれば、写真は利用者の端末から出ません。サーバーで変換する場合は、写真を一度預かることになります。お客さんの車や書類の写真を扱うなら、どちらにするかを先に決めておきます。

サーバーで処理するなら、サーバーにもHEICの対応が要る。 ブラウザで表示できても、サーバーで読めるとは限りません。当社は両方で別々に踏みました。重さも違います。上の実測のように、大きな写真は1枚で数百MBのメモリを使います。

写真の向きと位置情報を、一緒に確かめる。 当社のサーバー側の設計では、当初「JPEGの付属情報をまるごと外す」としていました。実測すると、iPhoneで縦に撮った写真が横倒しになりました。いまは位置情報だけを消す方式に直しています。変換や加工の後は、縦の写真が縦のままか、位置情報が残っていないかを実機の写真で見ます。

変換ライブラリのライセンスを確かめる。 当社の記録では、heic-toはMIT、中のlibheifはLGPL-3.0です。納品物に入れる前に、使う版のライセンスを自分で確かめてください。

原因がサイトかブラウザかを、先に切り分ける。 「写真が読めない」という報告は、相手のブラウザと写真の形式を聞くところから始めます。切り分けの考え方は、Chromeでクリックすると縦線のカーソルが出る原因と消し方にも書きました。AIに作らせたツールで出たほかのエラーは、Claude Codeのエラー・困りごと一覧から引けます。

当社の記録にあるのは、iPhone 15・16で撮った写真と、Safari・Chrome系のブラウザでの結果です。Androidの端末で撮った写真の記録はありません。写真を受け取るフォームやツールで「一部の人だけ送れない」という報告が続いているときは、下のフォームからご相談ください。届いている写真の形式の確認から一緒に見ます。