Chrome Image EXIF Orientation Issue

Question

I'm building a web app that shows pictures. Most of the pictures were taken by smart phones and have EXIF rotation information. I'm exposing a url which return the image blob without modification.

I've notice that when I put this url in img tag Chrome does not respect the EXIF orientation data but when I put the url in chrome address bar it show a page with the image and then it does respect the EXIF orientation.

Sorry I can't share the image, I'll try to find another example that I can share.

Has anyone notice this problem?

Answer 1

The reason for this behavior is that Chrome auto-rotates pictures based on EXIF data only if they are displayed directly in a browser tab as the main document.

The relevant chromium issue that tracked this implementation is the following: https://bugs.chromium.org/p/chromium/issues/detail?id=56845

In the future, Chrome (and other browsers) will allow developers to enable auto-rotation also for images displayed via img tags with the CSS image-rotation property: https://bugs.chromium.org/p/chromium/issues/detail?id=158753

Answer 2

Update: as of Chrome 81 (moved to stable on 5/13/20), this behavior is supported in both img tags and backround-image tags. https://www.chromestatus.com/feature/6313474512650240