EXPERIMENTS

Image Orientation Testing

Experiments, discoveries & solutions regarding
Webflow's EXIF-stripping problem.

Read More
WHAT IS THIS?

Image Orientation Experiment

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;

  1. 4 images were taken with a Samsung Galaxy 10N at 4 orientations - 0 (landscape), 90 (portrait), 180 (inverted landscape), and 270 (inverted portrait).
  2. All 4 images checked for EXIF, which correctly shows the orientation.
  3. All 4 images viewed in Chrome individually, and in Windows 10 Explorer. All 4 orient normally in an viewable position, because both Chrome and Explorer see the EXIF orientation and rotate the image properly for display. Cameras always assume that "up" is the correct orientation, no matter which way the camera is rotated.
  4. All 4 images uploaded to Webflow, and they usually appear OK in the designer.
  5. On publication the images are rotated in 4 different directions.
  6. Downloading and inspecting those images shows the EXIF data has been stripped, so Chrome assumes they were all captured in a landscape orientation. Thus, the landscape one is the only one that's oriented "correctly."

Original images, hosted on Google Drive

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.

Orientation 0

Orientation 90

Orientation 180

Orientation 270

These same images, uploaded to Webflow assets, and to the CMS

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.

Orientation 0 ( normal )

Orientation 90

Orientation 180

Orientation 270

Note that the same problem occurs when images are upload into Webflow's CMS.

Orientation 0

Orientation 90

Orientation 180

Orientation 270

Same images, uploaded to Webflow assets, with Responsive Images disabled.

Image settings, showing the Responsive Image setting after CTRL+SHIFT+O.

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.

Orientation 0 ( normal )

Orientation 90

Orientation 180

Orientation 270

CONCLUSIONs

What I Learned

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.

What I learned about mobile phone cameras;

  1. Mobile phones are designed to capture photos in any of 4 orientations. The image data itself is always captured as a landscape image, but in the EXIF there is an orientation indicator that records the position the phone was in. This is used to display the photo correctly.
  2. All modern web browsers look for this EXIF orientation, and display images properly.
  3. Cameras always assume that "up" is the correct orientation, no matter which way the camera is rotated.

What I learned about Webflow;

  1. Webflow's DOES keep the image orientation EXIF data properly in uploaded images.
  2. However if the image is published with the Responsive Image setting enabled ( it is by default ), then the EXIF data is stripped on all of the published versions including the full-size version and all of the responsive image size variants.
  3. It used to be that EXIF data was stripped directly on

Solution;

  1. If you need the EXIF data, disable Responsive Images by selecting the designer element and using CTRL+SHIFT+O to expose the Responsive Image setting for that image.
  2. If your customer is uploading their own photos, and is taking them using a mobile phone, make certain that anywhere these images are published has the responsive image disabled.
  3. If you upload images into Rich Text elements and those images are taken from a mobile phone, you need to do the same thing in the Rich Text element. In the designer, this can be done by right-clicking that embedded image and choosing settings, then CTRL+SHIFT+O. I do not know if this is possible in Webflow's editor.

Testing I haven't done;

  • Is photo copyright EXIF data preserved also stripped? Under what circumstances?
  • Does the Editor interface allow Responsive Images to be suppressed in images that are uploaded & embedded into rich text content?
  • In CMS-bound rich text element, is there a facility ( in both the designer and editor ) to disable Responsive Images?
  • In my original tests, I determined that the EXIF data was stripped immediately on asset-upload. If you upload the image, and then download it again directly from assets, the EXIF was missing. However I suspect that has changed, because of the new responsive image setting discovery. Needs retesting.