Chrome Image EXIF Orientation Issue

27
votes

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?

2
google-chromefirefoxbrowserexif
This seems like a large issue to me. I am building a database with thousands of images with various orientations. Now I have to use Imagemagick's convert with -auto-orient to fix them before importing... – masterxilo
Related note, that might be useful for somebody: In case you are using iMazing HEIC Converter or similar tool to convert your images, sent from iOS device, be sure to uncheck Keep EXIF data, so your picture is not flipped afterwards when trying to view in chrome(e.g. during upload). You can see difference in Get info for selected image, it should contain more data, when persisting EXIF data. – Alexey Vorobyov

2 Answers

26
votes

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

9
votes

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