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?
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.
To fix the EXIF orientation, open the image in an image editing program. Rotate the image to the correct orientation, then save the file and reupload your image. As an alternative, you can simply remove all EXIF data from images in Windows and macOS.
1 Answer. Show activity on this post. When you go to File > File Info, select Raw Data. The data will be available under Orientation as a number.
The EXIF orientation value is used by Photoshop and other photo editing software to automatically rotate photos, saving you a manual task.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With