iPhoneが原因?ブログ写真が自動回転してしまう原因と解決法

freewoman

iPhoneだけブログ写真の向きがおかしい

ウェブサイトのブログに写真をアップした際にパソコンで見た時には普通に表示されている。
自分のスマートフォン(Android)で見ても大丈夫。
でも友達から写真の縦横がひっくり返っていると指摘を受けた経験ないでしょうか。
よくよく聞いてみると友達はiPhoneから見ているようです。ではiPhoneが原因?
しかし同じ画像をSNSにあげているけどその際はiPhoneから見ても向きが正しくなっている。何故?
結論としてはExif情報のorientation属性が関係しているようです。
freewoman

Exif(イグジフ)情報とは

見慣れない言葉が出てきたのでご紹介します。
Exif(イグジフ)情報は簡単に言うとデジカメで撮影した時に記録される詳細データといった内容です。
具体的には

  1. 撮影日時
  2. 撮影機器のメーカー名
  3. 撮影機器のモデル名
  4. 画像全体の解像度
  5. 水平・垂直方向の単位あたり解像度
  6. 撮影方向
  7. シャッター速度
  8. 絞り(F値)
  9. ISO感度
  10. 測光モード
  11. フラッシュの有無
  12. 露光補正ステップ値
  13. 焦点距離
  14. GPS情報

等々といった情報です。
参考:Exchangeable image file format(wiki)
パソコンでしたら画像を右クリックしてプロパティ→詳細から確認できます。
このExif情報が入ることで写真の管理などもとても便利になりました。
フィルム式のカメラと比べてデジタルカメラは消去も簡単ですし、枚数(容量)も実質無制限といっていいほど撮れるので枚数が膨大になり後々の管理も大変ですがExif情報をもとにまとめることもできます。
但し、Exif情報には危険性もはらんでいるので注意も必要です。こちら危険性は別途ご紹介します。

カメラの向きを記録するExif情報のorientation属性

Exif情報の一つにorientation属性というものがあります。
orientation属性はiPhoneで写真撮影した時にその時の撮影のカメラの向きを記録してくれるというものです。
例えば、ホームボタンが下にある場合(普通の縦持ち)に撮影した時はOrientation属性が6(Rotate 90 CW)と記録され、時計回りに90度回転されます。
横持ちスタイルでの撮影でホームボタンが左の場合は3(Rotate 180)180度回転。
横持ちスタイルでの撮影でホームボタンが右の場合は1(Normal)そのまま、となります。

Androidでは大丈夫でもiphoneでは画像の縦横がおかしい原因

今回iphoneで見たときに画像が縦横おかしくなってしまうのはこちらのorientation属性が原因の可能性があります。
ウェブサイトを確認する端末がiphoneの場合、撮影時に記録されたorientation属性をそのまま読み取るので画像によっては、縦横がおかしくなってしまいます。
Android端末の場合はorientation属性を読み取らないので影響を受けないようです。

SNSでは大丈夫だけどウェブサイトでは画像の縦横がおかしい

iphoneに原因の可能性があるというのは分かりましたが、では同じ画像をSNSにアップした際には大丈夫だけどもウェブサイトでは画像の縦横がおかしくなってしまうというのは何故でしょうか。
SNSといってもフェイスブック、ツイッター、ライン、インスタグラム等色々な種類のサービスがありますが、これら主なSNSではプライバシーに配慮してかExif情報が自動的に削除されるように設定されています。
なので縦横画像がおかしくならずあまり気にする必要はありませんが、ウェブサイトのブログでワードプレスを使用している場合はExif情報の自動削除に対応していないので個別対応が必要になります。
参考:ツイッターよくある質問
参考:主なSNSやブログサービスでのExif対応状況

ワードプレス Exif情報自動削除プラグインの導入で解決

iphoneでも横持ちスタイルホームボタン右側で撮影した画像なら問題なさそうですが、縦撮り画像を使いたい場合もありますし、Exif情報が原因の場合、そのまま残していてもリスクがある場合があるのでExif情報を削除しましょう。
ワードプレスの場合一括で対応できるプラグインがあります。
EWWW Image Optimizer
ワードプレスのバージョン等やサーバー環境によって導入できるできないもあるので導入出来ない場合は別のプラグイン等を試してみて下さい。
ios-images-fixer
Exif-Remove-ImageMagick
参考:EWWW Image Optimizer プラグインの導入方法
これらはプラグイン導入後の画像から適用されるので既にアップされている画像に関しては再度アップし直さないといけないこと注意です。
普段AndroidとiPhone両方で確認することがあまり無いので気づきにくいですがもしかしたら画像の縦横が意図せずひっくり返っているかもしれません。
一度確認してみましょう。

Related Posts

Windows 11登場。何が変わる?ポイント

Windows 11登場。何が変わる?ポイント

先日マイクロソフトからWindows11のリリース予定が発表されました。 正式には2021年の後半登場予定のようです。 windows10が2015年に登場してから6年ぶりのメジャーバージョンアップです。 Windows10が出た当時はWindows10が最終バージョンと言っていたようなので掟破り感はありますが、Windows7のサポートが昨年終了したり、IE11のサポートが来年切れたりと技術は日々進歩しているのかもしれません。 参考:IE11(Internet Explorer)サポート終了が2022年6月16日...

パソコンから簡単にスマホ表示を確認

パソコンから簡単にスマホ表示を確認

調べ方 スマートフォンからサイトを表示すればスマートフォン対応されているかどうか一発で分かりますが、パソコンで作業を行っている時にスマートフォンを触るのも手間です。そんな時、パソコンからでも疑似的にスマートフォン時の表示を確認することができます。 Googleクロームの場合は下記です。※MicrosoftEdgeの場合も同様 1、キーボード上部のF12を押す。 2、デバイスサイズの切り替えボタン。 3、念のためページの再読み Ctrl+F5 4、上記でデザインが変わった場合はスマートフォン対応されたサイトです。...

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金の第2回公募が現在受付中です。 残り3回予定とのことですので5回中の2回目となるかもしれません。 事業再構築補助金という名前を初めて聞く方は下記をご覧ください。 事業再構築補助金(公式) 事業再構築補助金 事業計画書 具体的取組内容 事業再構築補助金を簡単にお伝えするとコロナにより売上が減少した企業に対して事業再構築の計画を立ててもらいその資金を最大1億円補助してもらえる制度です。(募集の多い主な枠では6000万円上限)...