こんにちは!ウェブサバイバー運営のYeah-Manです!

さて、今回はちょっと不思議な現象にぶちあたったのでその時の解決方法について書いてみたいと思います。
みなさんは何の気なしにWordPressやhtmlコーディングしたものへ画像を設置したり貼り付けたりしてると思います。
そんな時『あれれ?画像が90度回転して表示されてる?なんで?』なんてことにでくわしたことはありますか?

筆者も経験がなかったのですが、たまたまクライアントから問い合わせをいただいて発覚したこの現象。

調べてみると画像が持っている『Exif情報』というものが影響を受けていたとのこと。というわけで今回はExif情報について調べてみた内容と、発生した場合の対処方法についてご紹介したいと思います。

Exif(イグジフ)情報とはなんなのか?

端的には画像が持っている『位置情報』や『撮影したカメラ』などのプライバシー情報のメタデータのことを言うそうです。
wikipediaにも情報が載っていました。

Exchangeable image file format(エクスチェンジャブル・イメージ・ファイル・フォーマット)は、富士フイルムが開発し、当時の日本電子工業振興協会 (JEIDA)で規格化された、写真用のメタデータを含む画像ファイルフォーマット。デジタルカメラの画像の保存に使われる。略称はExifで「エグジフ」(もしくは「イグジフ」)。

カメラの機種や撮影時の条件情報を画像に埋め込んでいて、ビューワやフォトレタッチソフトなどで参照、応用することができる。Exif2.2ではExif Printという規格を組み込んでおり、撮影時の条件情報を元に自動的に最適化を行って、的確な状態でプリント出力を可能にしている。また撮影者や著作権情報、コメントなど付随することが出来る。

対応画像形式はJPEG、TIFF、JPEG XR(HD Photo)、PNG。

参照元:wikipedia

このExif情報が持っているメタデータは以下の通りだそうです。

・撮影日時 -日付と秒までの時刻が付加される。
・位置情報(ジオタグ)
・撮影方向
・撮影機器のメーカー名(製造・販売元)
・撮影機器のモデル名(カメラ付き携帯電話・スマートフォンの機種名など)
・画像全体の解像度
・水平・垂直方向の単位あたり解像度
・シャッター速度
・絞り(F値)
・ISO感度
・測光モード
・フラッシュ使用の有無
・露光補正ステップ値
・焦点距離
・色空間(カラースペース)
・サムネイル(160×120画素)

撮影した位置情報まで記録されてるんですね。。。

画像の回転はExif(イグジフ)情報が持っているorientation属性が原因

さて、そのExif情報ですが、先ほど紹介した中に、『撮影方向』というのがあります。これがカメラの向き情報です。
iPhone等スマホで撮った場合などは縦で撮影したなどの情報がExif情報として、ここに格納されます。
対象のメタデータ名は『orientation属性』というらしく、そこに1〜8の値が入るとか。
※例えばorientation属性が2であれば左右反転
※属性値についてはこちらのサイトさんが詳しいので興味あれば是非ご参照ください。

通常img属性等でhtml出力した場合、ブラウザの描画時には無視されるはずが、iPhone SafariやWordPressなど、
一部のブラウザやシステムがこれを解釈して画像が回転してしまうそうです。

どのように修正するのか?

 では『どのように修正するのか?』という話なのですが端的には以下2つのやり方で行います。

  1. Exif情報を破棄する
  2. Exif情報を修正する

OSにもよりますが上記二点です。順番に見ていきましょう。

Exif(イグジフ)情報を破棄する

この場合、windowsもMacも簡単で、『画像加工ソフトで編集 -> 書き出し』をすれば、既存のExif情報は破棄され、変更することができます。

Windowsの場合

Photoshopなど、ツールをお持ちであれば早いですが、windowsの場合は右クリックから削除ができるそうです。
詳しくはこちらのサイトさんをご覧ください。

Mac OSの場合

デフォルトアプリのプレビューから書き出しができますので、そちらをお試しください。

Exif(イグジフ)情報を編集する

この場合はソフトが必要です。

Windowsの場合

F6 Exif』というフリーソフトが著名のようです。
使い方はさきほど紹介させていただいたこちらのサイトさんが詳しいので、適宜ご参照ください。

Mac OSの場合

Mac OSの場合は『image Optim』という画像圧縮アプリがありますので、こちらが早いです。
筆者も使っていますが、圧縮系アプリでは使い勝手No.1かなと勝手に思ってますw
image Optimのダウンロード

その他

JavaScriptでExif情報を取得して表示させるライブラリなんかも見つけました。興味があれば作ってみるのもいいかもしれません。

【JavaScript】JPG画像のEXIF情報を取得して回転表示させる

いやー思わぬ罠でしたが、無事解決できてよかった。。。w

以上、Yeah-Manでした!