Webflow sync, pageviews & more.
NEW

Why is one of the images on my Webflow site appearing rotated after publishing, even though it displays correctly in the Webflow Editor and Preview?

TL;DR
  • Check EXIF metadata by downloading and opening the image in a viewer.
  • Remove EXIF data by opening the image in an editor, rotating if needed, and saving as a new file.
  • Re-upload the corrected image in Webflow, replacing the old one.
  • Test on different browsers and clear cache if the issue persists.

An image appearing rotated after publishing in Webflow is often caused by incorrect EXIF orientation metadata embedded in the image file. Some browsers interpret this metadata differently, leading to unexpected rotations.

1. Check Image Orientation Metadata

  • Download the published image from your site by right-clicking and selecting Save Image As.
  • Open it with an image viewer (e.g., Windows Photos, Preview on Mac).
  • If the image displays rotated, the issue is likely due to embedded EXIF data.

2. Remove EXIF Orientation Data

  • Open the image in an image editing tool like Photoshop, Preview (Mac), or an online tool like TinyPNG.
  • Manually rotate the image if necessary and save it as a new file.
  • Use "Save As" or "Export" rather than just re-saving to remove embedded orientation data.

3. Re-upload the Image

  • In Webflow, delete the existing image from the Asset Manager and affected elements.
  • Upload the new, corrected image and add it back to your design.
  • Publish the site again and check the live result.

4. Test on Different Browsers

  • Open the published site in Chrome, Safari, Firefox, or another browser to confirm the issue is resolved.
  • If the issue persists, clear cache or view the site in incognito mode.

Summary

Rotated images after publishing are usually caused by EXIF metadata. Removing this data by re-saving the image in an editor and re-uploading it to Webflow typically resolves the issue.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a simple, no-code solution in Webflow to set up recurring payments for renting a product using the Stripe integration without the need to build everything from scratch?
How can I add numbered pagination to a slider in Webflow? Thank you.
Why do design changes made on one page in Webflow's "lander" template affect other pages as well?
Are there any reported issues with FIXED-BACKGROUND-IMAGEs on iOS devices in Webflow? The background image scrolls with the page instead of staying fixed. Could this issue be related to iOS?
How can I create a gallery with multiple images in Webflow and hide the scroll bar using CSS code, such as the mentioned code for body::-webkit-scrollbar?
What are the two types of Parallax implementation on my Webflow Codes and Tutorials site?
How can you make an element in Webflow look different when hovered over and add a smooth transition effect?
Why are some Flexbox settings like Height and Width greyed out in Webflow?
How can I fix the issue with the "sticky" position not working in Webflow when using the luxy.js smooth scrolling on the wrap luxy, section 7, reviews holder?
Can anyone advise on how to link an existing external database to a Webflow site?
How can I fix the issue of being unable to open my site on Webflow's Designer View due to a persistent "you are not currently logged in" error message after transferring the website to another account?
Can the form's action in Webflow be overwritten using JavaScript when the checkbox is unchecked, without causing a "405 Not Allowed" error?
How can I rotate and scale my logo in Webflow when transitioning between pages?
How can I change the text color in a rich text field using Webflow? I've tried setting the color to the value stored in the collection's field but it's not working. The forum discussions on this topic are closed and the solutions are not visible.
Is it possible in Webflow to have unique animations applied to specific viewports, such as altering the direction of movement for text from left to right on desktop and along the y-axis on mobile? Is there a workaround for this limitation?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?