iPhone/iPadで見るとホームページの写真の向きが変わってしまう原因

ホームページのお手伝いをさせていただいているお客さんから

ホームページに載せた写真の向きがおかしくなっちゃった

という電話がありました。

そのページを私のパソコンで確認したところ、写真はまったく問題なく表示されています。

詳しく状況をうかがったところ、お客さんは iPhone でホームページを見ているとのことで、ホームページの写真も iPhone で撮影したものだそうです。

私は iPhone を持っていないので、iPad で確認したところ、たしかに写真の向きがおかしくなっています。

調べてみたところ、Orientation という Exif 情報が原因でした。

iPhone や iPad は、カメラの向きを縦にしたり横にしたり逆さにしたりして撮影したときに、あとで画面に表示したときに自動的に見やすい向きになるように Orientation という情報をJPEGファイルに格納しています。

iPhone や iPad の Safari ブラウザでもホームページを表示するときにもこの情報が使われています。

パソコンのブラウザではこの情報は使われません。

これがブラウザによる写真の向きの違いの原因でした。

下の2つの写真は両方とも右に90度回転して表示するという Orientation 情報を持つ画像ファイルです。

この記事をパソコンで見ると、ひとつめの写真は正しい向き(縦)で表示されますが、iPhone/iPad では右に90度回転しています。

ふたつめの写真をパソコンで見ると左に90度回転していますが、iPhone/iPad では正しい向きになります。

こういったややこしいことが起きないように、写真をホームページに載せるときには Orientation 情報を削除しておく必要があります。

私は 縮小専用。 というフリーソフトで写真のピクセルサイズを小さくしてからホームページで使っていますが、このソフトは Exif 情報をすべて削除してくれます。