squoosh: Inspect EXIF data for rotation - Image orientation/rotation is wrong for some images
I tried compressing a photo taken with my Samsung Galaxy S8 (in portrait orientation) but the image shows up in wrong orientation (rotated 90 degrees) in https://squoosh.app/ and there also didn’t seem to be any option to rotate the image.
The photo shows in correct orientation if I view it e.g. in image preview of macOS Finder. If I save the compressed image from squoosh then it will show up in wrong orientation also in other apps.
I suspect the issue is that squoosh doesn’t take into account the EXIF Orientation information in the photo.
Here’s the photo I had the issue with:
(Ps. looks like the image also appears in wrong orientation in this GitHub issue using Chrome at least, but if I click on it so that it opens in a new tab then it is shown in the correct orientation. It should be shown so that the text is oriented horizontally [easily readable].)
If I check the EXIF data of the image (with e.g. exiftool) I can see it has the correct orientation info:
$ exiftool test.jpg | grep Orientation
Orientation : Rotate 90 CW
Or checking with identify (from ImageMagick):
$ identify -verbose test.jpg | grep Orientation
Orientation: RightTop
exif:Orientation: 6
exif:thumbnail:Orientation: 6
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 3
- Comments: 36 (1 by maintainers)
Btw I just tested my image (the one above) by loading it into https://squoosh.app/ in these browsers.
Tested on macOS Mojave 10.14.1
Tested on Android 8.0.0 (Samsung Galaxy S8):
All of these browsers consistently show the image in wrong orientation (all the same way) when loaded into Squoosh. I also tested loading this GitHub issue in all of these browsers and it was exactly the same. All browsers tested show the image in the same way. In the
<img>tag in an HTML document the image is always shown wrongly oriented. And in all of the browsers when opening the image directly in a new tab, only then the image is shown in correct orientation.I’m working on a rotate option right now. The second phase of this would be to read exif data to set the rotation automatically. Thanks for filling this!
@Haprog Thanks for creating the issue! definitely heard the same from attendees at ChromeDevSummit. We’ll discuss with the team after a little break & travel back home.
I can only re-state @jakearchibald’s comment: Have you seen the rotate button?
Maybe someone can re-state what the problem is. Everything that has been described in this thread so far is solved by this very rotate button as far as I can tell.
@OliverJAsh
The problem case is iOS Safari. It seems to be the only browser that applies EXIF orientation data to an
<img>. Test: https://output.jsbin.com/wamevelupa/.I guess you’d need to feature-detect it by creating a 1x2 JPEG with a 90 deg rotation via EXIF, and see what the width is when it’d decoded.
Is there any progress on this? It feels like this has been going on forever. I really hate building sites that give users the ability to upload images if there is no way to render them to the page correctly
This has landed. But I’d still like to consider reading exif data and auto-applying the “correct” rotation.
I’ve got a PR open for a “rotate” option https://github.com/GoogleChromeLabs/squoosh/pull/322 (https://deploy-preview-322--squoosh.netlify.com/).
Personally, I’d prefer to keep it simple. I’d vote for ignoring EXIF data completely and just offering a “Rotate by 90 degree” button.
That doesn’t necessarily matter. When the user selects an image you could just immediately remove the EXIF data (or at least the Orientation property) and apply the rotation specified by it to the binary data and display that image. Then all browsers should display it correctly. At least this is not a concern for the modified/compressed images, right?
But if you want to be strict about being able to display the original image without any modifications, then I guess you could do something like you suggested (have a small test image with the Orientation property set and check the size) and if needed rotate the original image via e.g. CSS transformation?