Experiments, discoveries & solutions regarding
Webflow's EXIF-stripping problem.
This site was built to test Webflow's image orientation behavior in various browsers, and to compare it with natural, un-edited images.
This was built to explore the problem after I encountered strange behaviors with images flipping to one side on the published site, even though they appear properly oriented in the designer. This appeared to happen most often with images that were taken using a mobile phone camera.
Testing process;
These are original 4 images, uploaded to Google Drive and served directly from there. These contain the correct EXIF orientation attribute, so browsers orient them correctly.
With the correct EXIF data, all 4 images should appear "upright" on modern browsers. I'm using Chrome Win.
In the designer, these all appear as upright. But in a published site, they typically appear oriented in 4 different directions ( Chrome / Win ).
This is because the EXIF orientation is missing from the asset hosted images, and therefore the browser is forced to assume they were all taken in "normal" landscape position, and do not require re-orientation.
NOTE: this behavior is now inconsistent. Regenerating responsive images with CTRL+SHIFT+I and republishing the site seems to have corrected some of the images, but not all of them. as you can see here.
Note that the same problem occurs when images are upload into Webflow's CMS.
By default, when you place an image element in the Webflow designer, there is a feature called Responsive Images that is enabled.
This feature is hidden, however there is a special key combination that makes the Responsive Image setting available. The key combination is CTRL+SHIFT+O ( Windows ) or CMD+SHIFT+O ( Mac ).
When pressed, a new setting appears under Image settings that allows you to disable Responsive Images on individual image elements.
In the designer, this also exists on images that have been embedded inside of a rich text element, however you need to right-click that image and click Settings from the pop-up menu.
NOTE: I've not tested whether this setting is available in the editor, for rich text embedded images.
These 4 images are the exact same Asset-stored images as above, however the Responsive Image setting has been disabled.
This site was built to test Webflow's image orientation behavior in various browsers, and to compare it with natural, un-edited images.
This was built to explore the problem after I encountered strange behaviors with images flipping to one side on the published site, even though they appear properly oriented in the designer. This appeared to happen most often with images that were taken using a mobile phone camera.