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


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.


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).


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.


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

  • Clive Uy
  • Jun 5 2021
  • Reviewed
  • +2