非同期スニペット

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

無料 ご相談承ってます!

電話 078-955-7461(平日 -)お気軽にご連絡ください!
打合せなどで電話に出れない場合がございます。その場合は、フォームもしくは 070-5503-3830までお手数をおかけしますがご連絡ください。

私たちの実績
(→ 実績一覧へ

Webデザインやグラフィックデザインの実績をご紹介しております。

お知らせ

ブログ最新の10件
(→ 記事一覧へ

事務所案内

  • ワサビ株式会社
  • マーケティング部(東京オフィス)
  • 〒142-0041
    東京都品川区戸越1-21-15 創建ビル4F
  • 本社
  • 〒658-0065
    兵庫県神戸市東灘区御影山手4-10-21
  •    
  • マーケティング部・デザイン室・開発室
  • 〒657-0864
    兵庫県神戸市灘区新在家南町1-1
  • TEL. 078-955-7461
  • 受付時間: 平日 -
  • マーケティング部(福岡オフィス)
  • 〒812-0053
    福岡県福岡市東区箱崎2-10
会社の詳細情報は、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

ソーシャルメディア

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両方で確認することがあまり無いので気づきにくいですがもしかしたら画像の縦横が意図せずひっくり返っているかもしれません。
一度確認してみましょう。

ページトップへ

nakagawa