Is there a way to tell browsers to honor the jpeg exif orientation?
HtmlCssBrowserJpegExifHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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
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 - Html
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:
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 - Html
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.
Solution 4 - Html
I've written a little php script which rotates the image. Be sure to store the image in favour of just recalculate it each request.
<?php
header("Content-type: image/jpeg");
$img = 'IMG URL';
$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
$degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
$degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
$degrees = 180;
} else {
$degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);
?>
Cheers
Solution 5 - Html
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.
Solution 6 - Html
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
…
Solution 7 - Html
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.