Zenn Dev Kou Pg 0131 Articles Safari Input File Heic
Safari は file input に HEIC 画像を入力すると自動的に画像形式を変換することがある
- URL: https://zenn.dev/kou_pg_0131/articles/safari-input-file-heic
- 日付: 2026-06-26
- Tier: Tier 3
- 要旨: Safari での
<input type="file">に HEIC 画像を入力したときの挙動を実機検証した記録で、macOS Safari と iOS Safari で動作が大きく異なることが判明した。macOS Safari ではaccept属性にimage/heicが含まれている場合はそのまま HEIC が入力されるが、含まれていない場合はaccept属性の先頭で変換可能な形式に自動変換される。iOS Safari はaccept属性の値に関わらず常に JPEG に変換されるが、これは Safari 固有の挙動ではなく iOS 版 WebKit の仕様と考えられている。ファイル形式が変わる際はファイルサイズとファイル名も変化するため、バックエンドでの受け取り側に影響が出る。
詳細
検証環境: macOS Safari 17.6、iOS Safari 604.1
macOS Safari の挙動:
accept属性にimage/heicが含まれる場合("image/heic"、"image/*"、""含む)→ HEIC がそのまま入力されるaccept属性にimage/heicが含まれない場合 →accept属性の先頭にある変換可能な形式に自動変換される- 例:
"image/jpeg,image/png,image/gif"→ JPEG に変換 - 例:
"image/png,image/gif,image/jpeg"→ PNG に変換(先頭が変換基準)
- 例:
iOS Safari の挙動:
accept属性の値に関わらず常に JPEG に変換される- Chrome、Firefox、Edge も同様の挙動 → iOS 版 WebKit の仕様の可能性が高い(EU 版の代替レンダリングエンジン環境では挙動が異なる可能性もある)
変換時の影響:
- ファイル形式の変化に伴いファイルサイズも変わる
- ファイル名も変わる(拡張子が変更される)
- バックエンドでの Content-Type 判定やファイルサイズ検証に影響が出る可能性がある
実用上の注意点:
- ユーザーが HEIC を選択した場合でも、
accept属性の設定次第で受け取る実際のフォーマットが変わることを想定してサーバーサイドを実装する必要がある