Hey everyone, I’m seeing this thread for the first time and also the first time I’ve heard of this happening. Unfortunately there isn’t enough information or project links in this thread to be able to reproduce the issue. I checked @LEX_LUMBETO project and the example image is rotate correctly for me. For anyone still following here, it would be helpful if you could share the following information so that our team can identify what’s happening here.
project url
project read-only share link
type of device the issue was noticed on including what operating system
type of browser the issue was noticed on including the version number if possible
(optional) screenshots or recording of the issue both in the Designer and in the browser
(optional) the device/method used to upload the image
Any additional information would be very helpful. I’m sorry that it has taken this long for us to get eyes on this. Since the forum is for getting design help from the community, anytime you experience a bug or issue with Webflow please don’t hesitate to reach out directly to our support team, support@webflow.com. One of our Customer Support Team Specialists will be able to investigate and respond via email
The problem is for SOME pictures (in this example the Minions picture is one) but not most.
I am pretty certain that ALL photos were taken on Android phones of some description.
I think ALL photos have been resized using Windows Power Toys Resize (with options to ignore orientation and to remove metadate that does not affect rendering removed)
Pictures were uploaded from Windows 11 file explorer
Pictures are rotated on: WINDOWS Edge and Firefox; MacOS Safari, Chrome
Pictures are NOT rotated on Android (MIUI) Edge
Pictures were rotated and then 'flipped. to normal before our very eyes(!) in MacOS Chrome when narrowing the view!
I can try photoshop/equiv the specific pictures to rotate, but as others have said this isn’t the best/most efficient. So I thought I’d give you the details to look into.
I have been using webflow for not very long. I am not an expert at anything. I am old. Ask away if you need more, but be aware that I may need things spelling out!
Additional info: Looking at the website in Mac Chrome the picture is rotated, but when developer tools opens the picture rights itself. Looking at it in Mac Safari or Windows Edge the picture is rotated and stays so regardless of developer tools opening.
This solution worked for me. I exported the image from photoshop and it was the correct orientation when publishing. Not the ideal solution but it’s a quick fix.
@TBCC and @matthewpmunger I’ve run in the image orientation problem again with another client, and asking them to pre-process their images won’t work for them - so I decided to investigate further.
The problem is that Webflow is stripping most of the EXIF data- including the image orientation- when images are uploaded to Webflow assets. If I take a photo, upload it to assets, download it again, and compare, you will see this immediately.
I verified this by taking 4 images on my Samsung Galaxy Note 10x, rotating the camera 90 degress with each shot. Here’s how Chrome displays those 4 images directly from the camera;
If I then upload those 4 images into Webflow assets and display them, the orientation is stripped, and the browser loses the ability to display them properly. Here’s what I see on my Webflow site;
These are the exact same 4 images, but effectively broken by Webflow’s assets upload.
At first I thought this was a problem only with img srcset variants, but no- if I upload an image to assets, and immediately re-download it from assets, the orientation is stripped. So is most everything else, including the Copyright data. Whoa.
Here’s the full test so you can see how it behaves on your browser-
Is this on the bugs list? It’s such a critical one, given how often client capture and upload images by phone. How can you have a photo gallery that cannot handle photos?
I am experiencing this issue too and thank you for this post it was very informative. Could you please keep me updated if there are any updates to this? Or if there is a bug report open for it?
The issue is when Webflow generates the responsive (smaller/compressed) image versions when a new image is uploaded to the Webflow Designer/CMS. It appears the process doesn’t take the Exif data into consideration, meaning the responsive image versions could be incorrectly orientated once generated.
To add to the confusion, the original/source image file (which also gets uploaded) retains its Exif information which is also used/displayed in the Webflow Designer/CMS (so will appear correct). However, published website previews will likely be using a responsive image version (with no Exif data), which is why images could appear differently between the Webflow Designer/CMS and the published preview.
Ideal Solution
When Webflow generates the responsive image versions, it would take into consideration the Exif data and add it to the newly generated imagery. Or, automatically rotate the image before generating the responsive image versions.
I need some assistance with my website. My Hero Sections are appearing inverted when I publish my website but they are normal in the editor. Can anyone please assist me with this?
Hello friend, this is how I solved the problem when it happened to me:
Like you, I couldn’t figure out why my image appears rotated when the site is published but appears in the correct orientation when I use the editor. I tried many things and at the end of my alternatives I tried to crop the image with gimp (the free photoshop) and got this message:
The message mentions that the image has: “orientation exif metadata”, and asks me if I want to orient it or keep it with the default metadata (sorry for the language, I’m from Latin America). So I took the opportunity to shorten it a little and when I exported it without saving the exif data, the image already looked as it should when published.
