Is there a way to tell browsers to honor the jpeg exif orientation?
I know that the automatic rotation of JPG files is disabled in browsers.
They can not enable it because it would break the layout of some websites.
Is there a CSS property? or javascript code to achieve that? or something else? or maybe the solution to this problem doesn't exist yet?
Solution 1:
CSS image-orientation: from-image
from the specs https://www.w3.org/TR/css4-images/#the-image-orientation
6.2. Orienting an Image on the Page: the ‘image-orientation’ property
image-orientation: from-image
from-image: If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. If necessary, this angle is then rounded and normalized as described above for an value. If there is no orientation specified in its metadata, this value computes to ‘0deg’.
Matching Chrome-Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=158753
But the browser support is not here yet: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility
Rotate via JS
There is a JS snippet to do this: https://gist.github.com/runeb/c11f864cd7ead969a5f0
My conclusion
I think rotating the image on the server with tools like imagemagick is too much overhead.
The browser can rotate the image, but the web application needs to give the advice how to rotate this explicitly.
This explicit in browser rotation could be done like this: https://stackoverflow.com/a/11832483/633961
Solution 2:
Since Chrome 81, image EXIF orientation is respected by default. Latest Safari (13.1 as of now) is also working correctly.
Firefox hasn't fully implemented this (see Bugzilla issue #1616169).
Here's a couple test pages I found:
- https://image-orientation-test.now.sh
- https://softov.org/oria/image-orientation
As for the standard, the image-orientation property is now marked deprecated on the latest CSS Images Level 3 spec draft:
'image-orientation'
This property is deprecated, and is optional for implementations.
Solution 3:
From the latest update of chromium/chrome version 81, it will support exif orientation from image itself. This means that the exif orientation when present in an image, will be used to orient the image unless the "image-orientation: none" CSS property is present.
Before this update, you may used any other work around to rotate images or manually rotate based on the known image orientation. Then the newer chrome 81 will automatically rotate the image. If you need to avoid the automatic rotation and continue with the same work around option used for older chrome , you may need to set image-orientation: none, because now the image-orientation value is from-image by default.
image-orientation support chrome 81