iPhoneからの画像が表示されない？HEIC形式とWeb開発での罠

きっかけ：iPhone画像だけ表示されない！

Webアプリケーション開発中に、画像アップロード機能を実装。PCからは問題なく表示されるのに、特定のiPhoneからアップロードされた画像だけが表示されない、または壊れているように見える現象に遭遇しました。「拡張子の問題」とあたりをつけ調査開始。

原因：iPhone標準のHEIC形式

原因は、iPhone（iOS 11以降）が標準で使用する画像フォーマット「HEIC（またはHEIF）」でした。これは高画質・高圧縮率を誇る優れたフォーマットですが、JPEGやPNGに比べて歴史が浅く、一部のブラウザや古いOSではネイティブサポートされていません。そのため、特別な対応をしないWebアプリケーションでは表示できないケースがあります。

解決策アプローチ

主な対応策は以下の通りです。

1. サーバーサイド変換: HEICファイルをそのまま受け取り、サーバー側でImageMagickや専用ライブラリを用いてJPEG/PNG等、Webで汎用的な形式に変換してから保存・配信する。
2. クライアントサイド変換: JavaScriptライブラリ（例: heic2any）を利用し、ユーザーが画像を選択した時点でブラウザ上でJPEG/PNGに変換してからサーバーにアップロードする。
3. ユーザーへの案内: アプリ側での対応が難しい場合、iPhoneの「設定」>「カメラ」>「フォーマット」で「互換性優先（JPEG）」を選択するようユーザーに案内する方法もあります。（ただし、根本解決とは言えない場合も）

まとめ

モバイルデバイスからの画像アップロードを扱う際は、HEIC形式の存在を念頭に置く必要があります。サーバーサイドまたはクライアントサイドでの適切な形式変換処理を実装することで、ユーザー体験を損なわずに多様なデバイスに対応できます。