Robustify Webflow's image resizing method to detect and properly treat auto-rotation based on exif data

BACKGROUND

Sometimes digital images taken upside down or 90 degrees sideways contain exif data that allows photo viewers (including web browsers) to show the image right side up. This means you cannot tell if an image is truly right side up just by viewing it on Windows Photo Viewer, etc. unless you somehow ignored the exif data.

PROBLEM

When uploading images to Webflow, the current backend process saves a full-size version (with all the exif data included), as well as two downsized thumbnails. The latter are created by resizing the original without taking into account any exif data. Therefore, if the original was actually not upright, the two thumbnails will not be upright either, even though the full-size upload will show up correctly (since it still contains the exif auto-rotation data).

SOLUTION

Modify the image upload method to include the following steps:

  • Before upload, strip the full-size image of exif data.

  • Display preview of image and allow users to correct rotation.

  • Either rotate image in the front-end and upload, or upload image with rotation instructions.

  • Continue with current resizing routine.

RELATED REQUESTS

WEBFLOW-I-902 | Built-in Image editor that allows rotating uploaded images

  • Clive Uy
  • Jun 5 2021
  • Reviewed
  • Jay Holliday commented
    24 Mar 03:26pm

    Alternative solution;

    • Modify the code that creates the smaller copies of the image to rotate the copies based on the original images orientation so no user interaction is required

  • +2