WordPress + Lightning のサイト制作・カスタマイズ・サポートを承ります

iPhone/iPadで見るとホームページの写真の向きが変わってしまう原因

スマホ

ホームページのお手伝いをさせていただいているお客さんから

ホームページに載せた写真の向きがおかしくなっちゃった

という電話がありました。

そのページを私のパソコンで確認したところ、写真はまったく問題なく表示されています。

詳しく状況をうかがったところ、お客さんは iPhone でホームページを見ているとのことで、ホームページの写真も iPhone で撮影したものだそうです。

私は iPhone を持っていないので、iPad で確認したところ、たしかに写真の向きがおかしくなっています。

調べてみたところ、Orientation という Exif 情報が原因でした。

iPhone や iPad は、カメラの向きを縦にしたり横にしたり逆さにしたりして撮影したときに、あとで画面に表示したときに自動的に見やすい向きになるように Orientation という情報をJPEGファイルに格納しています。

iPhone や iPad の Safari ブラウザでもホームページを表示するときにもこの情報が使われています。

パソコンのブラウザではこの情報は使われません。

これがブラウザによる写真の向きの違いの原因でした。

下の2つの写真は両方とも右に90度回転して表示するという Orientation 情報を持つ画像ファイルです。

この記事をパソコンで見ると、ひとつめの写真は正しい向き(縦)で表示されますが、iPhone/iPad では右に90度回転しています。

パソコン:○ iOS:×

ふたつめの写真をパソコンで見ると左に90度回転していますが、iPhone/iPad では正しい向きになります。

パソコン:× iOS:○

こういったややこしいことが起きないように、写真をホームページに載せるときには Orientation 情報を削除しておく必要があります。

私は 縮小専用。 というフリーソフトで写真のピクセルサイズを小さくしてからホームページで使っていますが、このソフトは Exif 情報をすべて削除してくれます。

WordPress サイト制作・カスタマイズ・サポートを承ります

このブログを運営している、魚沼情報サービスの対馬です。ブログをご覧いただき、ありがとうございます。

弊社は、WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。

ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メールなどを使用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、まずはお気軽にお問い合わせください。

スマホ タブレット ホームページのこと
魚沼情報サービスをフォローする
魚沼情報サービスのブログ

コメント

  1. abin より:

    くりっく先生、こんにちは。

    先日、先生にお世話になりました某ウェブサイトを閲覧していましたら
    まさにこの現象が起きていました。
    連休明け早々に連絡しておきたいと思います。

  2. くりっく より:

    abin さん、こんにちは。
    iPhone を使っている人は多いので、この現象はあちこちで起きているはずです。
    パソコンで見るとこの問題が起きないし、向きが変わっても見れないことはないので、個人ブログとかだとそのままになっているケースの方が多いかもしれませんね。