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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

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

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

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

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

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

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

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

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

パソコン:○ iOS:×

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

パソコン:× iOS:○

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

  1. abin より:

    くりっく先生、こんにちは。

    先日、先生にお世話になりました某ウェブサイトを閲覧していましたら
    まさにこの現象が起きていました。
    連休明け早々に連絡しておきたいと思います。

  2. くりっく より:

    abin さん、こんにちは。
    iPhone を使っている人は多いので、この現象はあちこちで起きているはずです。
    パソコンで見るとこの問題が起きないし、向きが変わっても見れないことはないので、個人ブログとかだとそのままになっているケースの方が多いかもしれませんね。

コメントは停止中です。