ブラウザーと画像のEXIFのお話

追記 (2020/02/17)

各ブラウザが足並みを揃える形でCSSのimage-orientation属性の初期値が from-imageになりそうです。以下各ブラウザの対応状況です。

• Chrome: 158753 - chromium - An open-source project to help move the web forward. - Monorail
  • 3月にリリース予定のChromeのバージョン81以降で有効になる予定です
• Webkit: 89052 – Implement css3-images image-orientation
  • r254187で入って、Safari Technology Preview 99に含まれています
• Firefox: 1607667 - [css-images] Consider changing initial value of 'image-orientation' to from-image
  • rev/80d17e69d2a5で入っていて、push date: Sun, 16 Feb 2020 21:20:29 +0000なので、現時点の75.0a1 (2020-02-16) には入ってなかったですが、次の分には入ると思います。Chrome 81のリリースが3月中旬にあり、Firefoxの次期バージョンである74がその数日前に出るので、先に出すかChromeで様子を見て75にするかという感じのようでしたが、75に入りそうです https://groups.google.com/forum/m/#!topic/mozilla.dev.platform/PDYzBgRz8gk
  • → COVID-19の影響で75での変更は先送りされ、Firefox 77に入る予定に変更されました
    • https://www.fxsitecompat.dev/ja/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/

発端

@pastak https://t.co/9cWQXVjcOPラーメン にアクセスして、二番目くらいの画像をクリックするとなぜか反時計回りに90度回転するバグが発生していまして…
iPhoneのSafariで確認しています。

— Masayoshi Wada (@masawada) 2014年2月21日

@masawada 確かに手元のChromeでも回転していますね。結構回転してる。。。　http://t.co/MoBsURp6pH

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

Exifでは？

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

@masawada 分かった気がする！！！！！！　http://t.co/mKe3SN2REV

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

Androidのギャラリーとかで画像を回転させてアップロードしているのでは？

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

画像に開店情報が埋め込まれてる

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

写真を撮影した時にカメラが回転してなくて、撮ってからギャラリーアプリなどで画像を回転させると、画像自体を回転させたコピーを生成するのでなくて、画像に回転情報を埋め込むので、それがブラウザーによって云々なのでは

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

調べた

• “iOSのSafariとChromeだけ画像のExif情報を参照して画像の向きを補正して表示してる | http://t.co/nlHj5DJkkz” http://t.co/SdsxJuktxo

  — アラサーペンネくん🍝 (@pastak) 2014年2月21日

この記事はiOSのSafariとChromeって書いてるけど、iOSのChromeはWebViewを埋め込んでいるだけなのでiOSのSafariと同じ描画をしてもおかしくないなぁという感じ。

この記事も書いている通り今でも各ブラウザはEXIFを無視するんだけど、どうなってるのが正解なのかなぁと思って関連するディスカッションを漁った。（議論はいくつか存在してますが、代表的っぽいのしか読んでないのでそれのURLを列挙しています。）（内容は多分合ってると思いますが、英語を斜め読みしたので間違っていたら教えて下さい）

要約

JPEGのEXIF情報はブラウザでは基本的には読まないって感じでFirefoxもWebKitも議論が収束してた。<img>で読む場合は無視して、~.jpgを開いた場合はEXIF通りに表示するという方針っぽい

— アラサーペンネくん🍝 (@pastak) 2014年2月21日

どうすべきみたいな統一した見解は無さそうで、特にFirefoxの議論を見ているとEXIFをこのタイミングで適応すると、現行のWebサイトなどに混乱が起きるかもしれないという危惧でEXIFは読まないという経緯になっていた。他も大体同じ感じっぽかった。

Firefox

• 298619 - (exif) should consider using exif orientation flag when displaying JPEG images

• 917595 - Image aspect ratio not preserved while scaling for images with an EXIF orientation set

いろいろあって、特に 298619 ではThunderbirdの話とかも飛び交ってるけど、最終的には

When displaying a standalone image, Firefox matches the EXIF orientation information contained within the JPEG image

（訳：画像単体の表示時に、JPEG 画像に含まれる EXIF 情報を利用して縦横を決めるようになりました。）

Support for the CSS image orientation property

（訳：CSS の image orientation 属性をサポートしました。）

via https://www.mozilla.org/en-US/firefox/26.0/releasenotes/

（日本語訳は http://www.mozilla.jp/firefox/26.0/releasenotes/ より）

ということになったようだった。

1つ目は画像を直接開いたらEXIF通りに回転させるというもので、2つ目はCSSでimage-orientation: from-imageと書くとEXIF通りに回転させるプロパティを追加するというもの。ちなみに2つ目のfrom-imageプロパティはFirefox（Gecko）でしかサポートされていないので注意。（一応from-imageキーワード自体はCSS Image Values and Replaced Content Module Level 4に追加されてる）

• https://developer.mozilla.org/ja/docs/Web/CSS/image-orientation#Browser_compatibility

Chrome & Webkit

• 56845 - chromium - An open-source project to help move the web forward. - Monorail
• 50847 – EXIF orientation in JPEG
• 19688 – Add autodetection of image orientation from EXIF information

1. Enable for full-page ImageDocuments.
2. Add a preference (WebKitShouldRespectImageOrientation or something like that) to enable it globally.

By "globally" I meant "not just for full-page ImageDocuments, but for and others too", primarily so non-browser WebKit clients can choose to respect EXIF orientation everywhere if they so choose.

の方向でパッチが作成、取り込みが行われ、iOSではこの機能を<img>にも適当するようにしたようです。

Webサービスを作るときにどう扱うか。

普通にWebサービスを開発している人はこういうことをやっているんだろうけど、一応書いておきます。

AndroidやiPhoneで写真を撮るとたまに端末の回転がちゃんと認識される前に撮影してしまって画像の向きが意図にそぐわない場合、ユーザーはギャラリーなどのビュワーの機能で画像を回転させる。この時大体のアプリはEXIFに回転情報を書き込んで、見た目回転したように見せてる。これはEXIFの仕様として正しいし、ユーザーも回転して見えてるので良い。この画像をこのままWebサービスなどにアップロードするとユーザーは画像が回転していることを期待するけど、前述のとおりで<img>の中ではEXIFは無視されるので、疑問に感じる。こういう時はサービス側で適切にやった方が良い。

ImageMagickのコマンドでauto-orientオプション使ってやると簡単です。EXIF情報はGPSとかが入ってるかもしれないので消しておいたほうが何かと安全なので、同時に-stripも合わせて使うとより良いかもです。

convert -auto-orient -strip input.jpg output.jpg

• 参考：iPhone / iPadの画像が90度回転してしまっているのをサーバ側で直す（Exif + Orientationタグ + ImageMagick + PHP） – FLAMA技術Blog

追記(2020/02/17)

ブラウザの Exif 解釈の件で、ImageMagick の -auto-orient -strip にまた注目が集まってるけど、それだと ICC プロファイルも消えて色味が変わる事ある。こっちの方法が良いのではと宣伝するべきだろうか。
$ convert in.jpg -auto-orient +profile '!icc,*' out.jpghttps://t.co/OFvZDSHAnm

— ＼助けよや／ (@yoya) 2020年2月17日

＜/ここまで＞

ちなみにMozillaのBoot2Geckoプロジェクトの中ではこういうJSでJPEGのEXIFを読んでいるみたいですね

• gaia/jpeg_metadata_parser.js at master · mozilla-b2g/gaia · GitHub

JSでEXIF情報を読むライブラリもあるようです。

• GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata

EXIFで回転させた画像群、このリポジトリにあって便利

• GitHub - recurser/exif-orientation-examples: Example images for the various EXIF orientation flags, in both landscape and portrait orientation.