27

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?

Marco
  • 1,073
  • 9
  • 22
Ido Ran
  • 10,584
  • 17
  • 80
  • 143
  • 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 Jan 24 '19 at 14:59
  • 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 Jan 12 '20 at 11:03

2 Answers2

26

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

Sebastian Tschan
  • 1,444
  • 15
  • 12
  • 20
    A year and a half later, chrome still doesn't support it ;( – Andrew Lam Aug 09 '18 at 04:45
  • 1
    Looks like it will only in far far future after us. – SerG Apr 09 '19 at 18:28
  • Why the inconsistency between showing the image inside HTML in the browser (ignoring EXIF orientation) vs by itself in a browser tab (which applies the EXIF orientation)? Is it because the OS handles image display if the image is by itself? It's baffling that this issue has been around for nearly 10 years and there isn't a fix for it that doesn't involve image processing (or JS manipulation, which has it's own problems). – B-Rad Apr 10 '19 at 00:02
  • This issue is not a priority and may never be corrected in modern browsers as the W3.org recommends: ``Note that some devices will "tag" an image with some metadata indicating its correct orientation, so image viewing software can do the necessary transformation themselves. Due to legacy compatibility restraints, Web browsers are required to ignore this data by default. A future level of this specification is expected to have a value that applies the metadata-specified transformation automatically.`` https://www.w3.org/TR/css3-images/#image-orientation – davidhartman00 Jun 28 '19 at 23:53
  • Isn't it there some prefix that could be used? – Jefry90 Nov 19 '19 at 07:42
  • Chrome version 81 is supposed to support this feature. – Guillaume F. Jan 30 '20 at 15:27
  • @GuillaumeF. thank for comment, can you please explain how i can download the chrome 81, – Vinay Kaithwas Jan 31 '20 at 04:59
  • @Connectify_user : It is not released yet. We are currently on version 79. But this issue has been fixed a few days ago. – Guillaume F. Jan 31 '20 at 06:29
10

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

gannonbarnett
  • 1,638
  • 1
  • 16
  • 28
  • 3
    Thanks for saying! I just had a problem in a webapp where images were rotated correctly in IE and Firefox (because of my code to do so), but in Chrome the image would now be rotated two times - in Chrome and by our code, which meant it would not be rotated correctly. – anaotha May 22 '20 at 11:45
  • Well, and it seems like MDN put deprecation for image-orientation css property.https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation – stopsopa Dec 27 '20 at 03:12