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
What are the limitations on the number of fields in a collection in Webflow's CMS after purchasing the CMS or BUSINESS site plan?
How can I stop a video from playing when a modal is closed in Webflow? I've tried using an HTML embed but it didn't work.
How can you maximize your Webflow site performance and improve speed and load times?
Why don't tabs in Webflow behave like normal elements with flexbox or grid? How can I disable any preset CSS properties causing this issue?
Why does Webflow limit the number of items to 5 in a nested collection list?
Can I copy the styles and design elements from the 1920px breakpoint to the 992px breakpoint in Webflow without having to recreate everything?
How do I remove a pre-set "Area" in Webflow's grid system?
How can I style the bullet text of a list in Webflow when editing a blog post in the CMS?
Has anyone experienced a similar issue with the Webflow Lightbox element? When opening the lightbox on our Gallery page, an old image is displayed multiple times. We have tried changing the group name but the issue persists. Additionally, the positioning of the lightbox images is inaccurate. Any suggestions on how to fix this? Thank you!
How can I format a number field in Webflow's CMS to display the currency symbol and proper commas?
How can the appearance of the play button in the Webflow video module be customized to have a circle background instead of the default Vimeo rectangle shape?
Is there a way to remove the "Made in Webflow" badge from the Webflow pages plugin in Wordpress without affecting the integration with Intercom?
How can I remove underlines from links in Webflow?
Is there a way to integrate Webflow and Shopify without relying on Shopify for checkout, potentially using Zapier or Integromat to handle the ordering process in Webflow and the order management in Shopify?
How can I create additional sections with different background colors using Webflow, without altering the original sections?
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 fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked 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?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
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!