gatsby-plugin-image: gatsbyImageData does not respect the orientation meta data

[danielmoessner]

Description

gatsby-plugin-image: gatsbyImageData doesn't respect the orientation metadata on images and changes the aspectRatio if the orientation is for example LeftBottom. It should not change the aspect Ratio.

Steps to reproduce

Update: It does not happen everywhere. Actually it only happens with my specific images. I've created a repo where the problem is reproduced: https://github.com/danielmoessner/issue

The problem

The problem is that gatsbyImageData does not respect the Orientation meta data. In my specific case the Orientation is set to LeftBottom which gatsby-plugin-image doesn't recognize. This leads to the image being cropped top and bottom.

The fix

gatsbyImageData should check the Orientation meta data of the images and adapt the width and height correspondingly.

Expected result

The image's aspectRatio should not change.

Actual result

The aspectRatio changed.

Environment

The environtment doesn't really matter but here it is:

npmPackages:
gatsby: ^3.2.1 => 3.2.1
gatsby-image: ^3.2.0 => 3.2.0
gatsby-plugin-eslint: ^3.0.0 => 3.0.0
gatsby-plugin-image: ^1.2.0 => 1.2.0
gatsby-plugin-manifest: ^3.2.0 => 3.2.0
gatsby-plugin-netlify: ^3.2.0 => 3.2.0
gatsby-plugin-netlify-cms: ^5.2.0 => 5.2.0
gatsby-plugin-postcss: ^4.2.0 => 4.2.0
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
gatsby-plugin-sharp: ^3.2.0 => 3.2.0
gatsby-plugin-sitemap: ^3.2.0 => 3.2.0
gatsby-remark-images: ^4.2.0 => 4.2.0
gatsby-source-filesystem: ^3.2.0 => 3.2.0
gatsby-transformer-remark: ^3.2.0 => 3.2.0
gatsby-transformer-sharp: ^3.2.0 => 3.2.0
gatsby-transformer-yaml: ^3.2.0 => 3.2.0
npmGlobalPackages:
gatsby-cli: 2.16.1

[danielmoessner]

I found out:
The metadata of my image tells not the correct width and height. I don't know why that's the case but the images are uploaded with the wrong width and height into the cms. Is there a way, so that gatsby-plugin-image does not use the metadata but the actual image size.

[danielmoessner]

Thanks for your response, That makes sense. You can also read out the orientation metadata. And depending on the orientation metadata set the correct width and height. Does that make sense to you?

[ascorbic]

Can you say which placeholder you're using? If it's dominant color, can you switch to something else and see if that helps, and if not then vice versa. The reason is that if you use dominant color it uses a different method to read the metadata and I'd like to see if that makes a difference.

[danielmoessner]

Hi Matt, I've just tested it and it makes no difference. I pushed my example to Netlify, so that you can check it out.
https://gatsby-plugin-image-issue.netlify.app/

I hope this helps, if you need anything I'm happy to help.

I've also added the original image. You can download that and run identify -verbose dsc00250.jpg to see the orientation meta data.

[calvin-f]

@danielmoessner Did you find a solution yet? I'm struggling with the same issue. I don't see editing all the pictures before they get uploaded to the CMS as a great solution.

[danielmoessner]

@calvin-f My only solution is with imagemagick. I think the gatsby team should fix the problem, as it looks like an easy fix. But they have always closed my bug reports and sent me to discussions.