HEIC画像って何？
はじめに
業務中、Google Cloud Storageに保存されたHEIC形式の画像がChromeブラウザで表示されない問題に遭遇しました。
今回はHEIC画像がなんなのかを調べてみました。調べるに当たり、画像の全体像を把握してからHEICがどの立ち位置にいるのかも調べてみました。
画像の全体像
画像ファイルの種類にはこのようなものがあります。
| ファイル形式 | 主な用途 |
|---|---|
| APNG | Web上の軽量アニメ |
| AVIF | 静止画・アニメ画像 |
| GIF | シンプルなアニメやアイコン |
| JPEG | 写真、スキャン画像 |
| PNG | UI画像、透過素材 |
| SVG | アイコン、図、レスポンシブUI |
| WebP | Web画像 |
| HEIC | iOS写真・連写 |
基本的に、広く使われるファイル形式は何らかの規格・仕様に基づいています。
ただし、その「規格」には2種類あります。
それが、国際規格・標準化団体によるものと企業・団体による独自仕様です。
国際規格・標準化団体によるもの
これが正式な規格です。
| 形式 | 規格団体（策定元） | 備考 |
|---|---|---|
| JPEG | ISO / IEC | 写真向け非可逆圧縮フォーマット。最も普及。 |
| PNG | ISO / W3C | 可逆圧縮画像。透過・UI向け。 |
| SVG | W3C | ベクター画像の標準仕様。UIや図形に適する。 |
| HEIF | MPEG（ISO/IEC） | コンテナ形式。静止画・アニメ・音声などを格納可能。 |
企業・団体による独自仕様（準規格）
公式な国際標準ではないが、仕様が公開され、広く使われているものです。
| 形式 | 種類 | 策定元 | 備考 |
|---|---|---|---|
| WebP | 独自仕様 | VP8/VP8L圧縮。画像・アニメ対応。W3C等の標準化はなし。 | |
| GIF | 独自仕様 | CompuServe | シンプルなアニメ画像。仕様は公開済だが国際規格ではない。 |
| APNG | 拡張仕様 | Mozilla | PNGのアニメ拡張。W3C標準にはならず、一部ブラウザのみ対応。 |
HEIF規格に基づく実装（実装仕様）
先ほどの表で、HEIFが国際規格であることが分かりました。
そのHEIF規格に基づいて実装されているのがHEICとAVIFです。
| 形式 | 実装元 | 備考 |
|---|---|---|
| HEIC | Apple | HEIF（規格）+ HEVC（コーデック）Appleの独自実装。iOS/macOSで標準。 |
| AVIF | AOMedia / MPEG | HEIF（規格）+ AV1（コーデック）。AV1はAlliance for Open Media策定。 |
HEICとは何か？
HEIC（High Efficiency Image Container）は、主にiPhoneやiPadで撮影された画像に使われる画像フォーマットで、拡張子は.heicです。
iOS11以降で標準の画像形式として採用されており、高画質のままファイルサイズを小さく保つことができます。
HEIC（高効率画像コンテナ）は、基本的にApple独自のHEIF規格の実装です。Appleは2017年にiOS 11を導入した際、新しいiOSデバイスで撮影した写真のデフォルトフォーマットとしてHEICを採用しました。
HEIFとHEICの違い
| 項目 | 説明 |
|---|---|
| HEIF（形式） | MPEGが策定した規格。JPEGよりも高効率で、同等の画質でもファイルサイズを抑えられる。 |
| HEIC（実装） | AppleがHEIFを独自に実装・拡張した形式。拡張子は .heic。iOSやmacOSで標準的に使用されている。 |
簡単に言えば、HEIFは規格で、HEICはその仕様のApple独自の実装です。
下記参考記事から持ってきた画像です。
参考：Understanding HEIC vs HEIF: What's the Difference?
もちろん、.heifもあります。
.heifになるときの一例として、SONY・Canonなどの一部カメラは、JPEGの代わりにHEIF形式で写真を保存する機能があり、.heif拡張子を使用する場合があります。
MPEGとは？
MPEG（Moving Picture Experts Group） は、映像・音声などのデジタルメディアを「圧縮して効率よく扱う」ための国際的な規格作りを行っている団体です。
有名な規格には、MP3、MPEG-2、MPEG-4などがあります。HEIFもその一つです。
もし規格がなかったら？
規格がなければ、下記のような問題が起きます。
- iPhoneで撮った写真がAndroidで開けない
- 国やメーカーごとにバラバラな形式になる
- メディアを共有・配信・保存するのがとても大変になる
などの問題が起きてしまうので、規格が必要になります。
なぜHEICが使われているのか？
HEIC形式がApple製品で広く使われているのには、次のような実用的な理由があります。
JPEGより高圧縮・高画質
HEICは、従来のJPEGと比べてより高い圧縮率で同等以上の画質を実現できる画像フォーマットです。
これにより以下のようなメリットがあります。
- 同じ画質ならファイルサイズを小さくできる
- 同じファイルサイズなら画質をより良く保てる
そのため、写真が大量に保存されるスマートフォンなどのデバイスでは、ストレージの節約になります。
Appleが標準で採用（iOS 11以降）
Appleは2017年、iOS11のリリース時にHEICをiPhone・iPadのデフォルトの写真形式として導入しました。
以降、iOSやmacOSではカメラで撮影した写真はHEIC形式で保存されるようになっています。
つまり、iPhoneで何気なく撮った写真は、ユーザーが意識しなくても.heic形式で保存されているかの性が高いです。
HEICの問題点
HEICに関する問題点が何点かあったのでまとめました。
対応ブラウザが限定的
最大の課題は、ブラウザの対応がSafariのみなことです。
⭕️ Safari（macOS / iOS） → ネイティブ対応
❌ Chrome, Firefox, Edge → 非対応
Safari以外は、<img src="..."> で読み込んでも何も表示されません。
iOS Safari の場合JPEG 画像に変換される
下記記事から引用させていただきました。
macOS Safari の場合
- accept属性でimage/heicが許可されている場合、そのままHEIC画像が入力される。
- accept属性でimage/heicが許可されていない場合、許可されている画像形式に自動的に変換される。
iOS Safari
- accept属性の値に関わらず、JPEG画像に変換される。
参考：Zenn: SafariでHEIC画像がinput fileに入る問題
こちらが原因でiOSでの再現が出来ずに混乱しました。
Next/imageがHEICに対応していない
2021年から、Next/imageがHEICに対応していないことについて言及されていますが、特に実装はされていないようです。
参考：GitHub
ユーザーが意識せず使っている
HEICは、ユーザーに形式選択を強いることはなく、カメラアプリで普通に撮影するだけで自動的にこの形式になります。
そのため、ユーザーは知らず知らずのうちにHEIC画像を扱っていることが多く、「表示されない」「開けない」といった問題に遭遇します。
カメラの画像形式を変更する方法(iPhone16)
設定→カメラ→フォーマットを開くと、下記画像の画面が出てきます。
そこで互換性優先を選ぶとJPEG、高効率を選ぶとHEICになります。
写真を上にスライドすると形式が書いてあります。
inputのacceptについて
PCのChromで検証していたのですが、.heicの形式が入らず、バグの再現が出来ないと思っていたら下記画像の「オプションを表示」ボタンを押して「すべてのファイル」を選択すると選択できるようになりました。
inputのacceptに.heicを入れるとカスタムファイルを選んでいても表示されます。
さいごに
今回のタスクを行なって初めてHEICの存在を知りました。いい勉強になりました。
同じ境遇にあたった方の参考になると嬉しいです。
Discussion