56

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?

Marc MAURICE
  • 1,571
  • 1
  • 11
  • 9
  • 2
    Current CSS specs ignores EXIF data. Possible workaround is to set the `IMG` elements orientation style dynamically via script based on preprocessed image file names which contain a suffix to indicate the proper orientation. e.g.: a simple "a", "b", "c", "d" for 0, 90, -90, 180. – Jay Aug 20 '12 at 06:34
  • thank for the tip/idea. But this still require preprocessing. The best would be to have some CSS property to tell the browser to honor the EXIF orientation. I imagine the response will be in the browser code. – Marc MAURICE Sep 01 '12 at 06:35
  • 1
    As far as I can tell, iOS Safari *does* understand EXIF orientation information, at least from pictures taken with an iOS device. – Pointy Mar 06 '13 at 22:13
  • I think the best answer is here: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images/40867559#40867559 – sstauross May 08 '19 at 23:44

7 Answers7

35

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

Community
  • 1
  • 1
guettli
  • 25,042
  • 81
  • 346
  • 663
  • 5
    What is startling that if you view the straight URL pointing to the JPEG itself, then all browsers display it properly. And then you put the image into the background of an element and boom! Out of the blue it's upside-down or sideways. Even Firefox only gets one of these cases right (the img, but not the background): http://softov.org/oria/image-orientation/index.html – Csaba Toth Dec 04 '18 at 20:54
12

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.

MrFusion
  • 912
  • 7
  • 16
  • 7
    I wonder what the Chromium devs are smoking? How can they enable such a thing by default. We suddenly had all sorts of issues with our site with images rotated all over the place. – Johncl Jun 23 '20 at 16:15
10

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

ExOrIntro
  • 221
  • 3
  • 7
5

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

Thom
  • 59
  • 1
  • 1
2

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.

Jeroen Kransen
  • 1,379
  • 3
  • 19
  • 45
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.

masterxilo
  • 2,503
  • 1
  • 30
  • 35
0

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
…

Note that using jpegtran -copy all […] on its own leaves in the previous orientation, which may cause the image to be rotated twice in some viewers. exifautotran takes care of cleaning that up automatically.

Alice M.
  • 351
  • 2
  • 9
  • 1
    Another cli solution: ImageMagick `magick mogrify -auto-orient imagefile.jpg` – masterxilo Nov 06 '19 at 08:24
  • Major problem: `jpegtran -copy all -rotate 90` leaves in previous Orientation, so if your viewer supports exif orientation metadata the image would be rotated twice. The fix would be to reset the orientation to Normal: `exiftool -n -Orientation=1 P1000638.JPG` – glen Apr 28 '23 at 07:12
  • @glen Good to know. Still, the question was about web browsers, so the shenanigans of specific image viewers do not seem that relevant. And having one extra command or two to run seems acceptable to me as long as it’s scriptable and gives a nice result. Honestly though, I don’t even remember how I came to use this and where, and whether I kept it, haha. – Alice M. Apr 28 '23 at 13:50
  • `exifautotran` is okay, as it also calls `jpegexiforient -1`: - https://github.com/freedesktop-unofficial-mirror/libjpeg/blob/b4f886fcbb692e20fb4da4e6e3ead57f79444734/extra/exifautotran#L47 but `jpegtran` alone is not due the problem I indicated – glen Apr 29 '23 at 14:24
  • @glen Oh I did not get that subtlety. However, my answer was suggesting to use `exifautotran`, not `jpegtran`, so I’m not sure why I got downvoted if you say yourself that it’s okay. The `Executing: jpegtran […]` lines are just part of the natural output of `exifautotran` (as far as I remember), not an incitation to run `jpegtran` on its own. – Alice M. Apr 29 '23 at 21:10
  • Yeah, sorry for the diagonal reading. But I can't change vote unless the answer is edited. Perhaps edit and add the notice there that jpegtran -copy all alone causes unwanted results, so other diagonal readers don't, and can save some headache. – glen May 02 '23 at 10:59
  • @glen Done just now. =) – Alice M. May 02 '23 at 22:19