開発しているWebサービスにて、アップロードした画像がPCでは表示されるのにスマホで表示されないということが起こった。

事象

アップロードした画像がスマホ(iphone)で表示されない。（という報告があった。）

原因

結論から言うと

スマホで表示されないというかアップロードされている画像の形式がwebpであり、safari未対応のため表示されなかった。 PCとかスマホは関係なかった。

ブラウザ別に表示確認。 mac safari→NG chrome→OK firefox→OK

iphone safari→NG chrome→NG

Xperia chrome→OK

ここでアップロード元画像がmac,iosで対応していないのではないかと気付く。

アップロード元の画像を提供を要求＆確認画像を確認すると一見普通のjpgファイルだったので、入手元を確認すると

「Webから落としてきた。」

とのこと。実際に画像を落としてみると〜.Webpという拡張子でダウンロードされてくる。どうやら拡張子をjpgに変えたみたいだ。一応fileコマンドで形式の確認もしてみる。 RIFF (little-endian) data, Web/P image

元の画像を正しく変換してアップロードし直した。

ファイルアップロードは拡張子のチェックだけじゃなくて、ちゃんとファイルの形式を確認する処理が必要だということがわかった。今回はGUIでwebpは選択できないようになってたが、拡張子が変わってればアップロードできるようになっていた。画像ファイルのバイナリチェックとかもしたほうがいいのかなぁ。

拡張子に騙されて調査で半日失った。