Is there a way to tell browsers to honor the jpeg exif orientation?

Question

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

Answer 1

Use https://github.com/blueimp/JavaScript-Load-Image

It includes a demo index.html file that can load an image and display it correctly with the correct rotation applied.

Answer 2

The tool exifautotran can be used beforehand to quickly replace the EXIF orientation with the default one (1, for “top left”) and to rotate the image automatically so that the image looks the same as before the transformation. You can then use the JPG files thus obtained in a webpage without worrying about that stuff:

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…

Answer 3

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.

Answer 4

As the previous poster said, you will need to rotate the image itself. But next to that, you might also want to set/reset the rotation tag in the EXIF. That way you will avoid that viewers that do respect the orientation tag will rotate it again. A tool that can edit the EXIF for you is called ExifTool, and is free.

Answer 5

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

Answer 6

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