ファイル拡張子の「HEIF」について調べてみる

iOS11から導入されているHEIF形式の画像について調べてみました。

HEIFについて

HEIFはiOS11から導入されている画像のファイル形式で、JPEGと比較して圧縮率が高く、ファイルサイズを半分ほどにできるようです。
一部を除くHEIF形式に対応しているデバイスであれば、写真撮影時にHEIF形式で保存できます。(対応デバイスはこちら)

写真の保存形式の設定は、 設定 > カメラ > フォーマット から行えます。

デフォルトは「高効率」でHEIF形式での撮影、「互換性優先」にするとJPEG形式での撮影になっています。

ただ、HEIF形式の対応ブラウザはこちらになりますが、現時点でSafariを含めた全てのブラウザで対応していません。

inputのファイル添付でHEIF形式を使用する

iPhoneで撮影した写真をinputのファイル添付で使用するという流れがよくありそうなので、HEIF形式の画像をinputでファイル添付した場合の挙動を試してみます。

<input type="file" name="select" id="select" />
<div id="thumb">ここにサムネイルと画像情報を表示します。</div>

JavaScriptで画像の情報を表示するようにします。

var thumb = document.getElementById('thumb');
var select = document.getElementById('select');

// ファイルが選択されたとき
select.addEventListener('change', function(e) {
	// 選択されたファイルの情報を取得
	var fileData = e.target.files[0];
	console.log(fileData);

	var reader = new FileReader();
	// ファイル読み取りに失敗したとき
	reader.onerror = function() {
		alert('ファイル読み取りに失敗しました');
	    thumb.innerHTML = '';
	}
	// ファイル読み取りに成功したとき
	reader.onload = function() {
		var insert = '<img src="' + reader.result + '"><br>';
		insert += 'filename: ' + fileData.name + '<br >';
		insert += 'filetype: ' + fileData.type;
		thumb.innerHTML = insert;
	}
	// ファイル読み取りを実行
	reader.readAsDataURL(fileData);
}, false);

これで各デバイスからHEIF形式を添付した場合の挙動を確認してみます。
ファイル添付のデモページ

まずHEIFに対応しているiOS端末(今回はiPad)から投稿した場合ですが、ファイル拡張子は「jpeg」、filetypeは「image/jpeg」となり、JPEGに変換されて添付されていました。

Mac(OSはCatalinaでSafari/chrome/Firefoxで確認)からHEIF形式の画像を添付した場合、ファイル拡張子は「HEIC」、filetypeは「image/heic」となり、HEICのまま添付になりました。

最後にWindows(chrome/Firefox/IE11/edgeで確認)からHEIF形式の画像を添付した場合、ファイル拡張子は「HEIC」、filetypeは空文字となり、Macと同じく拡張子はHEICのままですがfiletypeを取得できませんでした。

iOS端末以外からの場合はHEIC形式での添付になったため、サムネイルが表示されないなどの問題が発生しました。
ただ、iOS端末で撮影したHEIF形式の写真は、PCに移行するときにJPEG形式に自動変換される(設定を変更していない場合)ようなので、基本的にはそこまで気にしなくてよさそうに思います。

設定の変更は 設定 > 写真 > MACまたはPCに転送 から行えます。

デフォルトは「自動」でHEIFをJPEGに変換、「元のフォーマットのまま」にするとHEIFのまま転送になります。