それによって、少し問題が起きました。

HEIF(ヒーフ)とは

HEIF は、High Efficiency Image Fileの略で、高画質のまま容量を小さくできます。JPEGと比べて半分の容量くらいになります。

対応状況

iOS 11 以降 や macOS High Sierra 以降であれば、問題なく扱えます。
Android 9 でも対応しているようです。

Windows 10 は、HEIF 画像拡張機能がインストールされていれば、ファイルの読み取りや書き込みを実行できます。
しかし、iOSの .heic を見るような場合、HEVC ビデオ拡張機能もインストールする必要があります。
120円するので、閲覧だけであれば別のソフトを探しても良いかもしれません。

HEIF 画像拡張機能

HEVC ビデオ拡張機能

ブラウザは未対応

現状、どのブラウザも対応していません
ただし、手元にあるHEIFに対応したiPhoneでは、ブラウザからアップロードする前に自動でJPEGへ変換しているようで問題は生じません。

しかし、スマホからPCに転送し、そこからアップロードされると表示が壊れてしまいます。

どうやってブラウザに対応させるか

ライセンスの問題があるようで、簡単に対応できないかもしれませんが、いくつか試したことを書いてみます。

nokiatech / heif

canvas タグを利用して画像を表示できます。

nokiatech / heif

heic2any

アップロード前に変換し、プレビューさせることができます。
ブラウザに負荷がかかるので、非力なマシンでは厳しい可能性があります。
また、webpack でビルド後、ClamAV にマルウェア判定されて、解決できませんでした。

heic2any

ImageMagick / ImageMagick

セキュリティ脆弱問題が不安ですが、バックエンドであれば、こちらの選択肢もあります。

ImageMagick / ImageMagick

対応画像をしぼってしまう

そもそもの話として GIF / PNG / JPEG しかアップロードできないようにしてしまう、という選択肢もあります。

まとめ

nokiatech / heif があったので、フロントエンドで簡単にできるかと思ったのですが、ライセンス問題などあって、解決できませんでした…。

あと、こちらの記事の方がしっかり書いてあって、これが全てだなと思いました。

HEIF形式の画像をpngやjpegにしてブラウザで扱う