Format webp rotate image but not for png or jpg

[bjarnef]

Prerequisites

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

ImageSharp version

3.1.6

Other ImageSharp packages and versions

ImageSharp.Web 3.1.3

Environment (Operating system, version and so on)

Windows 10

.NET Framework version

8.0.113

Description

We noticed in Umbraco 13.7.0 an image uploaded shown correct at thumbnail e.g. ?rmode=max&width=500

Viewing the EXIF meta data via e.g. https://jimpl.com/ I see the following: Orientation: Rotate 90 CW

Not sure why the rotation is different depending on format though.

The image seems also to be rotated correct using these querystrings:

?quality=80&width=500
?format=jpg&quality=80&width=500
?format=png&quality=80&width=500

but using WebP the image is rotated:

?format=webp&quality=80&width=500

Steps to Reproduce

Use the example image below and test with ?format=webp in querystring.

Images

I have attached the original image used in the example: test.zip

[JimBobSquarePants]

I moved this to the right repo for you.

See #375 Browsers do not respect these values for WEBP so there’s nothing we can do.

[bjarnef]

Thanks :)

Anyway update to image to workaround this? Because most other images in portrait format is rotated correct. E.g. this: ai-butterfly.zip

/media/ckdpih5n/ai-og-sommerfugle-2.jpg?format=webp&quality=80

However I don't see the `Orientation EXIF meta data on this image.

[JimBobSquarePants]

See https://github.com/SixLabors/ImageSharp.Web/issues/375#issuecomment-2250017834

[bjarnef]

Okay, was more looking for a manual solution to adjust image.

I could remove the Orientation EXIF data via https://www.thexifer.net/ ... in that case the image show on Windows is rotated as the WebP example.

We could probably just edit the image and save it as a new image.

Or I could ask ChatGPT to remove it.

[JimBobSquarePants]

I don’t think you understand what I’m saying. Or maybe I don’t understand what you are asking for. Your image has metadata that says it should be displayed rotated by 90 degrees. The browser is ignoring those instructions because it doesn’t support parsing EXIF rotation for WEBP.

You cannot do anything to make the browser respect those instructions while keeping the format as WEBP.

Removing the instructions will leave your image displayed with the wrong orientation as you currently have.

The only valid workaround would be to create a clone of the image swapping the height and width and remapping the pixel data to the new image saving it again as WEBP with the EXIF instruction removed which is exactly what I suggested with the processor. By using a processor you future proof yourself against future instances.

There’s no magic solution to this.

[bjarnef]

I do understand the issue and the limitation in the browser.

We could handle this as you suggest via code, but since it works correct for this image https://github.com/SixLabors/ImageSharp.Web/issues/381#issuecomment-2700498494 without EXIF orientation, I am just suggesting it could be handle manual for these few images.

I rarely see this issue in Umbraco projects, and it seems mainly to be an issue when images uploaded where taken from mobile device camera.

So it is something the content editors could handle themselves. The simplest solution it probably just to edit the image in an image editing tool, e.g. Photoshop, save the image as a new image, and upload this instead.

or when EXIF Orientation meta data is removed, the image is sideways. I can them from right-click menu on Window rotate the image.