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.
Netlify:
I really love the Netlify platform and all its features it provides so hopefully there is some fix!! Thanks!
At the moment, I see 2 different images and they look same on both platforms. Is this resolved?
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?
Do you have a reproduction to share?
Interesting, thanks for sharing. We’ll discuss this with the devs.
I tried adding an attribute as per this S/O thread and the images displayed in a way that looked less broken, but they were still not rotated / displaying sideways not as intended.
<Image
src="/static/images/aaron-blue-face.jpeg"
alt="image"
width="700"
height="1500"
objectFit="contain"
/>
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.
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:
- Upload photo to google photos
- Edit photo in google photos, rotate image
- Download photo to desktop
- Use photo in a next.js site locally (displays correctly)
- Deploy site to netlify
- Photo displays without correct rotation
Thank you for the details. We’ve passed it on to the devs.
Hey all, this appears to be an upstream issue: Support auto-rotation based on EXIF data · Issue #81 · unjs/ipx · GitHub. Once that’s closed, I believe the functionality would be available on Netlify too after some time.
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)
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.
This is pretty rough! It basically makes my site unpublishable. Is there any workaround?
Unfortunately, till the upstream PR has been merged, we can’t do anything about this.
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.
@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.
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?
No. Runtime v5 currently needs Next.js 13.5+ and Node.js 18+.
