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?

An image on your Webflow site appears rotated only after publishing, even though it looks correct in the Editor and Preview. This usually relates to EXIF orientation metadata or how browsers interpret that metadata once published.

1. Understand the EXIF Orientation Issue

• Many images taken with smartphones or cameras contain EXIF metadata that indicates their orientation (e.g., rotated 90°, 180°, etc.).
• Webflow's Designer and Preview might correctly interpret this metadata, displaying the image with the intended orientation.
• Browsers, when rendering the published site, may ignore or differently interpret the EXIF orientation, which leads to the image appearing rotated.

2. Remove EXIF Metadata Before Upload

• Open the image in an image editor (like Photoshop, Affinity Photo, or Preview on macOS).
• Re-save or export the image as a new file, ensuring EXIF data is stripped.
• Alternatively, take a screenshot of the image and save it—that removes metadata by default.
• Upload the corrected version to Webflow.

3. Double Check Image Placement on Canvas

• In Webflow Designer, confirm that the image isn't manually rotated via transforms (check rotation settings under Style → Transform).
• Make sure the image is not being styled by custom CSS that applies rotation via the class or media query.

4. Use a Consistent Image Format

• Prefer .JPG or .PNG formats for photos and graphics.
• Avoid uploading images directly from mobile devices without processing them first, as mobile images often carry orientation metadata.

Summary

The rotated image on your published Webflow site is likely caused by EXIF orientation metadata. To fix it, remove the metadata by re-saving or exporting the image in an editor, then reupload it to Webflow. Always verify there's no CSS transform or image style applied in Webflow that could be causing the tilt.