[WorPress] iPhone で撮影した写真をアップロードすると画像の向きが全て横向きになる現象の原因と対処方法

先日、iPhone で撮影した写真を WordPress にアップロードして投稿に挿入すると縦方向の画像が横向きで表示されるという現象が起こりました。しかもその現象を確認できるのは iOS から閲覧した時のみ(パソコンから見ると横転していない)という謎の現象でした…。このことを詳しく調べて下さっている記事に助けられ、なんとか解決できたので解決方法などをまとめました。

とても参考になりました!ありがとうございます。ちなみに、WordPress に限らず FaceBook への投稿、はてなブログへの投稿でも同じような現象が起こるようです。

原因

参考元の記事にもありますが、原因は iPhone で撮影した写真に付けられる EXIF 情報のようです。iPhone で撮影した写真には orientation という撮影した時の iPhone の向きを判別する属性が含まれ、その属性を読み取れる iOS で見た時のみ画像が横転して表示されるということのようです。

私が iPhone で撮影した写真は縦方向でも横方向に撮影したものでも以下のように「1(標準)」となっていたので、orientation に方向の情報が入るのも iOS のバージョンなどによるのかもしれません…。

exif 情報サンプル

対処方法

EXIF 情報が原因なので、EXIF 情報を削除すれば解決です。アプリなどであらかじめ EXIF 情報を削除してもよいですが毎回ともなると少し面倒です…。

※2015/10/1 追記
コメント欄にて教えていただきましたが、現在のバージョンの WP + EWWW Image Optimizer ではこの現象が解決しないようです。こちらの「iOS images fixer」プラグインで解決できるようです。(詳しくはコメント欄をご参照ください)

そこで、今回はアップロードの際に自動的に EXIF 情報を削除してくれるプラグイン「WordPress › EWWW Image Optimizer」を導入することで対処しました。

EWWW Image Optimizer プラグインの導入方法

まずは、「EWWW Image Optimizer」プラグインを管理画面からインストールし有効化します。

EWWW Image Optimizer 設定画面

有効化するとダッシュボードの設定項目に「EWWW Image Optimizer」というリンクボタンができるので、このページで設定を行います。

1. 「Basic Settings」タブを開き、「Remove metadata」の項目へチェックを入れ「Save Changes」ボタンをクリックします。

「Basic Settings」タブを開き、「Remove metadata」の項目へチェックを入れ「Save Changes」ボタンをクリック

2. 「Conversion Settings」タブを開き、「Hide Conversion Links」へチェックを入れ「Save Changes」ボタンをクリックします。これは、jpg データ を png データに変換しないようにする設定のようです。

「Conversion Settings」タブを開き、「Hide Conversion Links」へチェックを入れ「Save Changes」ボタンをクリック

これで、WordPress へアップロードする画像の EXIF 情報が自動的に削除されるようになりました!

EXIF 情報が残っているために起こりうるさまざまなトラブルを防ぐことも考えて、デフォルトで入れておいてもよいかもしれないなと思いました。

Related Article

5 Comments & Tracbacks

  • shtr 2015-10-01 10:33 PM

    こんにちは。

    僕も同じ問題に悩まされたのですが、現在の最新のWordpressのバージョン+最新バージョンのEWWW Image Optimizer プラグインでは、解決しないみたいです。

    WP: 4.3.1
    EWWW Image Optimizer: 2.5.1

    ↑の環境で(プラグインの、exifを取り除くオプションをONにする)iPhoneを「左倒し」「右倒し」の2パターンで撮った写真を、アップしてみましたが、「右倒し」の場合は、結局逆さまになってしまいます。

    想像するに、exifのデータは取り除いてくれるけれど(確認したら確かにexifは取り除かれていた)、向きを正しくしてくれるわけではないみたいです。おそらくexifデータだけを取り除いて、exifのorientation値に応じて画像を回転させてはいない、、のではと思います。

    なので、僕はios-images-fixerというプラグインを使って、対応しました。

    https://ja.wordpress.org/plugins/ios-images-fixer

    結構これ、悩ましかったので、コメントを残しました。では!

    Reply

    • saori 2015-10-01 11:07 PM

      shtr さま

      こんばんは。コメントありがとうございます。
      また、貴重な情報をありがとうございました!!
      本文にも追記しておきます。ではでは。

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS