レビュー・その他 技術・開発

スマホやPCで画像の向きが勝手に変わる?原因(Exif)と解決方法

2015年5月7日

「スマホやPCで画像を見たら、縦の画像のはずなのに横向きに表示されてしまう…」こんな経験はありませんか?

客「縦の画像のはずなんだけど横に表示されているんだけど」
私「え?こちらでは正しく縦で表示されていますけど」
今回は、実際のやりとりから発覚した「OSやデバイスによって画像の向きが変わってしまう現象」について、その原因と具体的な解決手順を分かりやすく解説します。

現象確認:PCによって画像の向きが違う?

まずは、自分とお客様のPCでどのように見え方が違うのかを確認してみました。

自分のPC(Windows 8以降)で確認したところ、以下のように問題なく表示されました。

Windows8環境で縦向きに正しく表示されている画像

縦の画像は、しっかりと縦になっていますね。

しかし、自分のPCでは問題ないことを確認したうえで、お客様のPC(Windows 7以前)を確認させてもらうと……

Windows7環境で横向きに誤って表示されている画像

あれ?**画像が横向き**になっています。

原因:画像に保存された「Exifデータ」とOSの仕様

調べてみた結果、原因は画像ファイルに含まれる**「Exif(エグジフ)データ」**にあることが分かりました。Exifデータには、撮影時の「画像の向き(回転情報)」が記録されています。

OSによって、このExifデータの扱い方が以下のように異なります。

  • **Windows 7以前:** 画像の向きデータを取得せずに表示する(そのまま表示)
  • **Windows 8以降:** 画像の向きデータを取得して自動回転して表示する

最近のデジタルカメラやスマートフォン(Android、iPhoneなど)で撮影した写真には、標準でExif情報として「画像の向き」が保存されています。対応しているOSやアプリであれば自動で回転してくれるので便利ですが、環境によって見え方が変わるのはトラブルの元になります。できれば、どの環境でも正しい向きで表示されるようにしたいですよね。

解決手順:画像の向きを正しく修正する方法

どの環境でも同じ向きで表示させるための最も確実な方法は、「Exifデータを修正・削除する」ことです。ご自身の環境に合わせて、以下のいずれかの手順をお試しください。

手順1:Photoshopで上書き保存する(推奨)

最も簡単なのは、Photoshopなどの画像編集ソフトを使う方法です。

  1. Photoshopで対象の画像を開く(この時点で正しい向きに回転された状態で開きます)。
  2. そのまま Ctrl + S (Macは Cmd + S)で上書き保存する。

これにより、画像が回転した状態でExifデータも自動的に書き換えてくれます。

手順2:フリーソフトを利用する

Photoshopがない場合は、無料の画像閲覧・編集ソフトを活用しましょう。
XnView(窓の杜)などを利用して画像の向きを修正・保存することが可能です。

手順3:Exifデータを一括で削除する

Exifデータには、画像の向きだけでなく**撮影日時やGPS(位置情報)**なども保存されている場合があります。インターネット上に画像を公開する際は、プライバシー保護の観点からもExifデータをすべて削除してからアップロードすることをおすすめします。
Exif情報を編集・消去する方法(All About)

手順4:Linux環境でコマンドを使用する

Linux環境で ImageMagickexiftool が使える場合は、コマンドラインからの操作が便利です。

【ImageMagickを使用して回転設定を変更する場合】
(既に回転データが存在している場合で、回転しない設定に変更する方法です)

convert 元画像.jpg  -orient top-left 保存先画像.jpg

【exiftoolを使用して新規で回転データを入れる場合】

exiftool -Orientation=1 -n 編集先画像.jpg

注意!ブラウザによる表示の違い

OSだけでなく、**Webブラウザの種類によっても画像の表示(Exifデータの読み込み)が異なります。**

  • Internet Explorer (IE):回転データを取得しない。
  • Chrome / Firefox (Webkit系): 画像そのもの(URL直リンク)はOS依存。<img>タグでの表示なら回転データを取得しない。
  • Safari (iPhoneなど): すべての画像データで回転データを取得する。

つまり、Exifデータを残したままWebサイトに画像をアップロードすると、iPhone(Safari)で見たときだけ画像が横になってしまうといった現象が起こります。

iPhone(Safari)でExifの回転データにより横向きに表示されている画像

結論とまとめ

今回のトラブルの原因と対策をまとめます。

  • 最近のスマホやカメラは、写真にExifデータ(画像の向き情報)を保存している。
  • 古いOSや編集ソフトの場合だとExifを書き換えてくれないことがあり、端末によって画像の向きがおかしくなる場合がある。
  • Webブラウザ(特にSafari)もExifデータを読み込むため、ネットに掲載する前にExifデータを変更・削除したほうが望ましい。


今までアップロードした画像、見直さないといけませんね……。

-レビュー・その他, 技術・開発
-, , , , , ,