情報 開発

OSにより画像の向きが変わる現象について

客「縦の画像のはずなんだけど横に表示されているんだけど」
私「え？こちらでは正しく縦で表示されていますけど」 というやりとりから始まりました。

現象確認

とりあえず自分のPCを再度確認 win8 photo 縦の画像は縦になっていますね。   自分のPCでは問題ないことを確認したうえで客のPCを確認させてもらうと win7 photo あれ？横になっている

原因

調べてみると画像情報（Exif）に画像の向きが入っており、
  • Windows7未満の場合はそのデータを取得せずに表示
  • Windows8以降はそのデータを取得して表示
するようになっているみたいです。OSによって画像の向きが異なるのはなんだか気持ちが悪いですね。 最近のデジカメはExifを保存しており、画像の向きも保存されています。 もちろんAndroid、iPhone等のスマホもその情報が保存されております。 画像の向きが保存されているため、対応されているOSやアプリだと画像が自動回転されるので便利なのですが、できればどちらでも表示されるようにしたいですね。

対応

Exifデータを破棄すればどちらでも対応されるようになります。 簡単なのはPhotoshopで画像データを開き、そのまま保存すればOK
Photoshopで開くと回転された状態で画像が開き、そのままCtrl+Sで保存すると回転された状態でExifデータも書き換えてくれます。 もちろんフリーソフトもちらほらとあります。
XnView（窓の社） またExifデータを一括で削除し、そのまま回転する方法もOK。
Exifデータは画像の回転だけでなく撮影日時やGPS等も保存されている場合があるのでよく知らないかつネットにあげる場合は一部残すよりも全て削除することをお勧めします。
Exif情報を編集・消去する方法（All About） Linux環境かつImageMagickがある場合は以下のコマンドでOK
（既に回転データが存在している場合で回転しないの設定変更方法になります。） [bash] convert 元画像.jpg -orient top-left 保存先画像.jpg [/bash] 新規で回転データを入れる場合はexiftoolを使用するみたいです。 [bash]exiftool -Orientation=1 -n 編集先画像.jpg[/bash]  

ブラウザでの対応

ブラウザによっても表示が異なり
  • IEの場合は回転データ取得しない
  • ChromeやFirefox等のWebkitの場合は画像そのもの（URL直リンク）はOS依存、imgタグの表示なら回転データ取得せず
  • safari（iPhone等）だとすべての画像データで回転データを取得するみたいです。
Exifデータを残したままで画像を補正する場合は注意が必要です。 iphone photo
iPhone（safari）だと回転データを見ているために画像が横になっています。

結論

  • 最近のカメラはExifデータを記入することになり、最近のアプリやOSではExifデータを読み込むようになっている。
  • 古いOSや編集ソフトの場合だとExifを書き換えてくれない場合があり、画像の回転が端末によっておかしくなる場合がある。
    • ただし、Exifを削除してくれる編集ソフトの場合は特に問題なし
  • ブラウザでもものによりExifデータを見ているのでネットに掲載する前にExifデータを変更したほうが望ましい
  今まであげた画像見直さないと…

-情報, 開発
-, , , ,