← ブログ
約5分で読めます

写真が横向きになる理由|Exif回転フラグ

スマホでは正しいのにアップロード欄では横向き。Exifの向きフラグの働きと、回転したピクセルとタグの見分け方、確実な直し方を解説します。

  • exif orientation
  • photo rotation
  • product photography
  • image upload
  • jpeg
  • webp
  • marketplace listings
  • file metadata
写真が横向きになる理由|Exif回転フラグ

スマートフォンで商品を撮る。本体を回して構え、シャッターを切る。画面の中では、まっすぐ立って見えます。ところがマーケットプレイスのアップロード欄では、それが横倒しで届きます。同じファイルなのに、90度ずれているのです。

スマートフォンが壊れたわけではありません。その写真は、ファイルの中では横向きに入っている可能性が高く、しかも撮った瞬間からずっとそうでした。スマートフォンは、それでも正しい向きで見せてくれます。アップロード欄は、そうしませんでした。

あなたのファイルは2つの状態のどちらかにあり、見分けるために必要な確認は1つだけです。

カメラはセンサーが見たとおりに保存する

イメージセンサーは本体に固定された長方形で、撮る人が向きを変えても一緒には回りません。縦位置で撮っても、記録されるのは横長のフレームで、被写体はその中で横倒しになっています。

レンズを外したカメラボディのクローズアップ。露出した金属のレンズマウントは、縦よりも横に広い形をしている

多くのカメラは数百万のピクセルを書き換える手間を避け、代わりに「表示する前に90度回すこと」を意味する小さな数値をメタデータに書き込みます。保存の時点でピクセルそのものを回転させ、ファイルには「すでに正しい向き」と記録する機種もあります。同じ場面を撮っても2台のスマートフォンでふるまいが違うのは、このためです。JPEGでは、この数値がExifタグ274、Orientationにあたり、回転だけでなく左右反転したフレームも表せます。

フラグを尊重する読み手と、無視する読み手

最近のブラウザは、きちんと読みます。CSSのimage-orientationプロパティは初期値がfrom-imageで、MDNはこう言い切っています。「画像に含まれるEXIF情報が、画像を適切に回転させるために使われます」。これは2020年4月から、ブラウザ全体で動いています。

一方、ブラウザではないものは、いまでもタグを無視することがあります。ウェブ標準は尊重する方向でまとまりましたが、サーバー側のデコーダーやサムネイル生成、画像ライブラリの多くは、そのまとまりより前に書かれていて、タグを一度も見ません。そして、見ることを義務づけるものは何もありません。

ですから、問うべきは「自分の写真は横向きなのか」ではなく、「表示している側がフラグを読んだのか」です。スマートフォンのギャラリーは読みます。マーケットプレイスのサムネイル生成は、読まないかもしれません。

ギャラリーでの回転は、フラグを書き換えただけかもしれない

回転ボタンを押したときに何が起きるかは、アプリによります。まったく違う2つの結末があります。

屋外でスマートフォンを手に持つ様子。画面には、写真がびっしり並んだギャラリーアプリが表示されている

  • 向きの値だけを書き換え、ピクセルデータには手を触れない。一瞬で終わり、劣化もありませんが、フラグを無視する相手にはこの変更が見えません。ファイルの中では、写真は依然として横向きのままです。
  • 再エンコードする。ピクセルを読み込んで回転させ、フラグをリセットした新しいファイルを書き出します。回転はピクセルに焼き付き、どこへ持って行っても保たれます。PNGや可逆WebPなら代償はありません。JPEGでは通常、再エンコード1世代分の劣化を伴いますが、一度なら払う価値があり、繰り返す価値はありません。

アプリがどちらの道を選ぶかは、ボタンを見ても分かりませんし、同じアプリでもバージョンによって変わってきました。決めつけずに、出てきたファイルを確かめてください。

さらに厄介なのは、ピクセルを回転させながら古いメタデータをそのままコピーするツールです。フラグは「回せ」と言い続け、ピクセルはすでに回っている。フラグを尊重する読み手は、その写真を二重に回してしまいます。

自分のファイルがどちらの状態か見分ける

これは、目を凝らしても決着がつきません。プレビュー以外のものを確かめるしかありません。

写真を表示したスマートフォンを両手で持ち、開いたノートパソコンの前にかざしている様子。パソコンの画面にも、ブラウザで同じような写真ギャラリーが映っている

  • 見た目の形と、数値を突き合わせる。 縦長に見える写真が、ファイルのプロパティでは縦より横が大きいと表示されるなら、ピクセルは横長で、フラグが仕事をしています。この数値まで補正して見せるビューアーもあるので、一致していることよりも、食い違っていることのほうが多くを証明します。
  • フラグそのものを読む。 ブラウザも、デスクトップのビューアーも、ファイルマネージャーのサムネイルも、いまではほとんどがタグを尊重します。だから、それらの表示が揃っていても何の証明にもなりません。オリジナルではなく必ずコピーを用意し、Exifビューアーで開いてOrientationを直接読みます。1(多くは「Normal」と表示されます)以外の値なら、フラグが仕事をしていて、ピクセルは正しい向きではありません。

向きは、ほかの何かがファイルに触れる前に片づける

remover.bgはPNG、JPEG、WebPを25 MBまで受け付け、背景を外した新しいファイルを返します。あくまで背景を削除するツールであって、写真編集ソフトではありません。回転はスマートフォンの写真編集アプリやデザインツールの仕事で、アップロードの前に済ませておくものです。

この順番が大事なのは、そこで新しいファイルが生まれるからです。PNGにもWebPのコンテナにも、Exifを収める場所はあります。GoogleのWebP仕様はメタデータを「'EXIF'または'XMP 'チャンクに」置くことを認めています。ただし、回転に使った編集ソフトが書き出しにそれを入れるかどうかは、あなたではなくそのソフトが決めることです。回転をピクセルに焼き付けてしまえば、失うフラグはもう残りません。この形式については、変換なしでWebPを書き出す方法にまとめてあります。

実際に回す手順は、こうなります。

  1. ギャラリーで回転ボタンを押すのではなく、編集ソフトで回転させてコピーを書き出す。
  2. 書き出したコピーでOrientationの値を確認する。
  3. そのファイルをアップロードして背景を削除する。
  4. 切り抜きを単色や自分の写真の上に配置し、面の上に置いて見せたいなら影を添える。

背景削除APIでHTTP経由の大量処理を回しているチームは、パイプラインの最初で向きをそろえておきましょう。横向きの元画像1枚は横向きの切り抜き1枚になり、それが1,000回繰り返されます。向きの話は、Amazon商品画像の要件で扱う背景のルールの外側にありますが、ほかをどれだけ正しくやっていても、横倒しの出品はぞんざいに見えます。

身につける価値のある習慣

プレビューではなく、ファイルを信じること。回転は書き出しで行い、そのコピーのOrientationを一度だけ読む。それだけで、その写真はブラウザでも、サムネイル生成でも、印刷所の待ち行列でも、等しく正しい向きで立ちます。

あわせて読みたい