WebP images don't auto orient based on EXIF metadata

[SigmundurMorkore]

Prerequisites

• I have written a descriptive issue title
• I have verified that I am running the latest version of ImageSharp.Web
• I have verified if the problem exist in both DEBUG and RELEASE mode
• I have searched open and closed issues to ensure it has not already been reported

ImageSharp.Web version

2.0.0

Other Six Labors packages and versions

2.1.1

Environment (Operating system, version and so on)

Linux

.NET Framework version

5

Description

When formatting a jpg image to webp using ?format=webp the resulting webp image does not orient itself according to the jpg's exif orientation metadata.

Formatted as JPG, the image is oriented correctly. Formatted as WebP, the image is oriented sideways.

Steps to Reproduce

Try to format a JPG image with orientation metadata to WebP with the following parameters:

?format=webp

The image will not be oriented according to the metadata.

Images

No response

[brianpopow]

@SigmundurMorkore can you provide the image in question?

[SigmundurMorkore]

Right sorry, was in a hurry when writing this issue up. Here you go @brianpopow :)

This is the JPG being formatted with: ?width=730&height=730&rmode=crop

https://hk.cdn.fo/savn/txre1cva/20220131_095657.jpg?width=730&height=730&rmode=crop&s=7vf1XiXI9f3Z8qBWADtVEuJC6pg

And then this is the same JPG but being converted to WebP with: ?format=webp&width=730&height=730&rmode=crop
20220131_095657.webp.zip
https://hk.cdn.fo/savn/txre1cva/20220131_095657.jpg?format=webp&width=730&height=730&rmode=crop&s=3ceq5WFoMMC_SBmzd73zGAaPZcQ

[SigmundurMorkore]

Made a discovery! It seems Firefox and Chrome both fail to rotate the webp image. But Safari does manage to rotate the webp image correctly. Could this instead be a browser issue?

[rosrosros]

Is this somehow the same issue as here: #258 ?

[SigmundurMorkore]

We've tried replicating our issue with JPG, but have only been able to replicate the issue when the image format is WebP. So considering #258 has an issue with JPG, it would seem to be that these are different issues 🤷‍♂️

[brianpopow]

@SigmundurMorkore this really looks to me like a issue with the auto orient of the viewer (=browser). The Exif Information is preserved with both:

• ?width=730&height=730&rmode=crop
• ?format=webp&width=730&height=730&rmode=crop

The browsers I tested: chrome, opera, firefox seem to ignore exif with webp and with jpg they all rotate the image according to exif.

Not sure yet how #258 is related. I have not looked into that so far.

[SigmundurMorkore]

@brianpopow Yeah that would make sense... I wonder why I am unable to find anyone else having this issue with webp in browsers.

Is it possible to actually rotate the image and removing the orientation exif metadata with ImageSharp.Web?

[SigmundurMorkore]

This actually seems to also be an issue with PNG and AVIF: https://zpl.fi/exif-orientation-in-different-formats/

So it would seem to be ideal to be able to actually rotate the image (and removing the orientation metadata)

[brianpopow]

So it would seem to be ideal to be able to actually rotate the image (and removing the orientation metadata)

I think we dont have that yet in ImageSharp.Web, @JimBobSquarePants please correct me if I am wrong. Should we maybe add a AutoOrientProcessor?

[SigmundurMorkore]

The AutoOrientProcessor would be very handy! 👍

[brianpopow]

It seems we had AutoOrientProcessor at some point, but it was removed again: PR220

I think its worth reconsidering this, as I believe auto orient makes sense also without resizing.

[SigmundurMorkore]

We have added our own AutoOrientProcessor for now (following the code in #220), which solves our issue.

Agree it is worth reconsidering adding it to ImageSharp.Web officially.

Our working image with the AutoOrientProcessor 🥳
https://hk.cdn.fo/savn/txre1cva/20220131_095657.jpg?width=730&height=730&rmode=crop&autoorient=true&format=webp&s=n0S2Km4sa0v1D4oYowQaJmneC-8

[JimBobSquarePants]

Yeah let’s re-add it. Was hoping to avoid it to preserve consistency with the CSS spec but with all those daft browser bugs we’ll need a backup plan.

[dlemstra]

The AutoOrientProcessor was removed because there was already an orient option in the ResizeWebProcessor that is enabled by default. Isn't this a bug instead the ResizeWebProcessor instead?

[JimBobSquarePants]

I wish it was a bug in our code.

It’s definitely a browser issue. We’re tracking the EXIF properties properly and orienting accordingly. Browsers are just super poor at implementing the CSS spec for the different image formats. That’s what happens when you cobble together a bunch of different libraries I guess…

[JimBobSquarePants]

Since we can't fix browser issues I would consider #260 to be an adequate workaround for now.