# NextJS Image Component Image Orientation

**URL:** <https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633>\
**Category:** Support\
**Tags:** nextjs\
**Created:** [July 19, 2022, 2:37am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633 "2022-07-19T02:37:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew4](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andrew4/32/23695_2.png) [@Andrew4](https://answers.netlify.com/u/Andrew4)\
**Post date:** [July 19, 2022, 2:37am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/1 "2022-07-19T02:37:23Z")

</div>

Hello, I am facing an issue where image orientation is correctly displayed using the NextJS Image Component locally on my machine and then when I deploy to Netlify the images are rotated sometimes. I was thinking maybe it is not respecting the EXIF image orientation metadata.

I also deployed to Vercel and it is displaying correctly there which is weird.

- Code: [https://github.com/andrewsuds/react-fish](https://github.com/andrewsuds/react-fish)
- Deployed on Vercel: [https://react-fish-two.vercel.app/home](https://react-fish-two.vercel.app/home)
- Deployed on Netlify: [https://fish.aks22.com/home](https://fish.aks22.com/home)

Netlify:

 ![Screen Shot 2022-07-18 at 10.32.31 PM](https://global.discourse-cdn.com/netlify/original/3X/7/d/7d534d7420447705d2d5ca05be2676b617ef9b17.jpeg)

I really love the Netlify platform and all its features it provides so hopefully there is some fix!! Thanks!

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 22, 2022, 12:09pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/2 "2022-07-22T12:09:21Z")

</div>

At the moment, I see 2 different images and they look same on both platforms. Is this resolved?

---

<div class="post-metadata">

**Author:** ![dirtybirdnj](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirtybirdnj/32/37884_2.png) [@dirtybirdnj](https://answers.netlify.com/u/dirtybirdnj)\
**Post date:** [July 24, 2022, 4:21pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/3 "2022-07-24T16:21:39Z")

</div>

I am having the same problem. It appears to be something that Vercel does, but netlify doesnt?

It looks like some part of the image optimization / webpack process isn’t respecting some EXIF data that shows the image is rotated.

Is there a way to fix this without going in and manually rotating all my images?

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 24, 2022, 5:14pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/4 "2022-07-24T17:14:40Z")

</div>

Do you have a reproduction to share?

---

<div class="post-metadata">

**Author:** ![dirtybirdnj](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirtybirdnj/32/37884_2.png) [@dirtybirdnj](https://answers.netlify.com/u/dirtybirdnj)\
**Post date:** [July 24, 2022, 5:43pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/5 "2022-07-24T17:43:49Z")

</div>

Yes

[https://rdy-next.netlify.app/](https://rdy-next.netlify.app/)

> **[GitHub - dirtybirdnj/rdy-next: robotdrawsyou.com next.js / site](https://github.com/dirtybirdnj/rdy-next)**
>
> robotdrawsyou.com next.js / site. Contribute to dirtybirdnj/rdy-next development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 24, 2022, 5:52pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/6 "2022-07-24T17:52:10Z")

</div>

Interesting, thanks for sharing. We’ll discuss this with the devs.

---

<div class="post-metadata">

**Author:** ![dirtybirdnj](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirtybirdnj/32/37884_2.png) [@dirtybirdnj](https://answers.netlify.com/u/dirtybirdnj)\
**Post date:** [July 24, 2022, 6:49pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/8 "2022-07-24T18:49:37Z")

</div>

I tried adding an attribute as per [this S/O thread](https://stackoverflow.com/questions/69932039/resize-image-on-phone-after-orientation-change-in-next-js) and the images displayed in a way that looked less broken, but they were still not rotated / displaying sideways not as intended.

```auto
<Image
 src="/static/images/aaron-blue-face.jpeg"
 alt="image"
 width="700"
 height="1500"
 objectFit="contain"
/>
```

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 31, 2022, 11:11am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/9 "2022-07-31T11:11:23Z")

</div>

Hey @dirtybirdnj,

Thanks for checking.

This is already on our radar and the developers are working on determining the cause. As a matter of fact, they were able to reproduce the issue in various scenarios, thanks to the reproduction you shared, but the actual source of the issue is still unknown.

---

<div class="post-metadata">

**Author:** ![dirtybirdnj](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirtybirdnj/32/37884_2.png) [@dirtybirdnj](https://answers.netlify.com/u/dirtybirdnj)\
**Post date:** [July 31, 2022, 2:41pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/10 "2022-07-31T14:41:06Z")

</div>

The source of the issue is google photos doing rotation operations and saving that info via EXIF data instead of ACTUALLY rotating the image and modifying the bitmap.

The photos I am using have been uplaoded to google photos by my phone. Then I go in and use google photos editing features, which lets me rotate them to be displayed correctly (in google photos, and on my desktop when I view images with Preview app).

APPARENTLY this is being done via EXIF data, and some part of the tag optimization process does not respect this. My only solution now is to go in and edit each photo individually, effectively re-exporting the bitmaps as new images that no longer have EXIF data indicating rotation.

Recreation steps:

1. Upload photo to google photos
2. Edit photo in google photos, rotate image
3. Download photo to desktop
4. Use photo in a next.js site locally (displays correctly)
5. Deploy site to netlify
6. Photo displays without correct rotation

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 31, 2022, 6:07pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/11 "2022-07-31T18:07:56Z")

</div>

Thank you for the details. We’ve passed it on to the devs.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [August 10, 2022, 11:31am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/12 "2022-08-10T11:31:07Z")

</div>

Hey all, this appears to be an upstream issue: [Support auto-rotation based on EXIF data · Issue #81 · unjs/ipx · GitHub](https://github.com/unjs/ipx/issues/81). Once that’s closed, I believe the functionality would be available on Netlify too after some time.

---

<div class="post-metadata">

**Author:** ![Jpaulsisson](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@Jpaulsisson](https://answers.netlify.com/u/Jpaulsisson)\
**Post date:** [July 18, 2023, 9:07pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/13 "2023-07-18T21:07:10Z")

</div>

Deployed a NextJS app today without Netlify and had 1 out of the 20 images turn sideways. Is there a solution you guys anyone here can provide?

(Also deployed on Vercel and the issue didn’t occur but the deployment broke my image grid responsiveness)

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [July 23, 2023, 12:13pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/14 "2023-07-23T12:13:40Z")

</div>

Unfortunately, as long as the issue linked above is nor resolved, Netlify can’t do anything about it. That’s a dependency of the image processing solution that we provide, so we will have to rely on them to fix it before we can implement it in our code.

---

<div class="post-metadata">

**Author:** ![Michael\_Mannucci](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/michael_mannucci/32/23695_2.png) [@Michael\_Mannucci](https://answers.netlify.com/u/Michael_Mannucci)\
**Post date:** [October 20, 2023, 6:36pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/15 "2023-10-20T18:36:13Z")

</div>

This is pretty rough! It basically makes my site unpublishable. Is there any workaround?

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [October 21, 2023, 4:58pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/16 "2023-10-21T16:58:33Z")

</div>

Unfortunately, till the upstream PR has been merged, we can’t do anything about this.

---

<div class="post-metadata">

**Author:** ![AndrewGroebe](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andrewgroebe/32/60305_2.png) [@AndrewGroebe](https://answers.netlify.com/u/AndrewGroebe)\
**Post date:** [April 12, 2024, 5:58pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/17 "2024-04-12T17:58:40Z")

</div>

This needs to be fixed. I literally have no option but to move to Vercel because I can’t deploy a website with a bunch of rotated images.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [April 12, 2024, 6:02pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/18 "2024-04-12T18:02:09Z")

</div>

@AndrewGroebe, are you certain this is still happening? In Next.js Runtime v5, we have dropped this IPX function and handle it directly via an Image CDN, so chances are things have changed.

---

<div class="post-metadata">

**Author:** ![AndrewGroebe](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andrewgroebe/32/60305_2.png) [@AndrewGroebe](https://answers.netlify.com/u/AndrewGroebe)\
**Post date:** [April 12, 2024, 6:11pm UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/20 "2024-04-12T18:11:59Z")

</div>

It seems my project is not eligible for the Next.js Runtime v5 due to outdated dependencies. Is there any workaround to fix my images before I get around to upgrading dependencies?

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [April 14, 2024, 11:35am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/21 "2024-04-14T11:35:20Z")

</div>

No. Runtime v5 currently needs Next.js 13.5+ and Node.js 18+.

---

<div class="post-metadata">

**Author:** ![joebell](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/joebell/32/74449_2.png) [@joebell](https://answers.netlify.com/u/joebell)\
**Post date:** [October 28, 2025, 8:27am UTC](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633/22 "2025-10-28T08:27:05Z")

</div>

Just chiming in to say this is unfortunately still an issue in October 2025. Would love to port my Next.js project over to Netlify but this is a pretty big hurdle

[Next page](https://answers.netlify.com/t/nextjs-image-component-image-orientation/71633.md?page=2)
