Webflow's Image-Orientation Bug

And How to Avoid it

No items found.

Perhaps you've encountered it on your own sites...

An image on your layout looks perfectly fine in Webflow's designer, but when you publish the site, it suddenly rotates on its side, or flips upside down. Sometimes it mirrors itself.

If you're like me, you've muttered... "whoa." And rubbed your eyes disbelievingly.

What's happening?

  • You've re-published your site.
  • You've re-opened the image to make sure it looks ok, and it looks fine.
  • You've shaken your cameraphone gently and listened for any loose parts rattling around...

...because, WTF, right?

And none of it helped.

Why this Happens

This is a story of technology progression, and how gaps that once weren't so wide can become a chasm that's all too easy to fall into.

To understand this, we need to understand how cameraphones work, and how the Internet works and how Webflow breaks those rules. Because... they don't quite line up.

First, camera phones

Camera phones are used increasingly by clients to capture photos of their business. They photo their staff, their clients, their projects. Awesome restaurant dishes they've prepared, or parties they've DJ'd.

Photos tell the story, and when there is story to be told, often your camera phone is the closest thing handy to capture that moment.

But, unlike most cameras, camera phones can be held in variety of different ways, which affect how the photo is captured.

Specifically, there are 8 ways a camera phone can take a photo.

4 different ways that the camera can be rotated;

  • Normal landscape
  • Camera rotated left 90
  • Camera rotated right 90
  • Camera upside-down

Times 2 different ways the image can be mirrored.

  • Regular "un-mirrored" mode, which is usually the mode for the away-facing camera
  • Horizontally-mirrored "selfie" mode, which is usually the default for the self-facing camera

Here's the thing;

Behind the scenes, in the photo's file structure, the camera always captures and stores the photos exactly the same way. But it also captures the orientation and mirroring settings, and stores them with the photo- so that it can be displayed in the same way it was taken.

This information about how the photo was taken is encoded in EXIF data.

EXIF encodes this orientation as a number from 1 to 8.

  • 1 = 0 degrees: the correct orientation, no adjustment is required.
  • 2 = 0 degrees, mirrored: image has been flipped back-to-front.
  • 3 = 180 degrees: image is upside down.
  • 4 = 180 degrees, mirrored: image has been flipped back-to-front and is upside down.
  • 5 = 90 degrees: image has been flipped back-to-front and is on its side.
  • 6 = 90 degrees, mirrored: image is on its side.
  • 7 = 270 degrees: image has been flipped back-to-front and is on its far side.
  • 8 = 270 degrees, mirrored: image is on its far side.

Here's what that looks like;

EXIF Orientations
Credit: Dave Perrett and 80sidea

Second, the Internet

Modern image viewers and web browsers know this EXIF data is essential to displaying the photo correctly, so when you view the photo, your browser uses that EXIF data to orient and flip the photo properly.

Just like magic.

Take your photo however you want, and it will display exactly the way you captured it- as long as it preserves that EXIF data, and as long at the viewing software uses it.

Third, Webflow's part

Unfortunately, here's where things go sideways.

For whatever reason, Webflow unfortunately strips that EXIF data on upload to assets, including the image orientation.

This means that when that image is served to modern browsers, they must assume that the photo was taken landscape, unflipped, and that no adjustment is required.

If that's not how you took the photo, you're going to get some weird results.

To further confuse things, Webflow appears to keep that original copy somewhere for use in the Designer. So while you're designing your site, the image appears correctly oriented... but when you publish your site, the image is sideways, upside-down or flipped, depending on how it was taken.

Surprise!

Want to see this in action?

A Demonstration

Take a portrait selfie, upload it to assets, download it again, and view each of those images in Google Chrome. You will see the problem immediately.

Here I've taken 4 images on my Samsung Galaxy Note 10x, rotating the camera 90 degrees with each shot. Here’s how Chrome displays those 4 images, unedited, from the camera;

image

If I then upload those 4 images into Webflow assets and display them, the orientation is stripped, and the browser loses the ability to display them properly.

Here are how those same 4 images appear on my published Webflow site;

image

These are the exact same 4 images, unedited, but "broken" by the EXIF-stripping behavior of Webflow’s assets upload.

DEMO - Have a look for yourself.

How to Prevent This

When uploading photos to Webflow's assets, it's essential to make certain that they are correctly oriented ( rotated ) before upload.

There is no way to prevent this. If you upload your images to Webflow's assets, the EXIF will be stripped.

The workaround is to edit your photos before upload, so that the photo is digitally re-oriented. Then, the EXIF orientation no longer matters, because the file has been physically rewritten to the desired orientation and mirroring state.

Opening the image in Photoshop and re-exporting is one way to do this. Many photo editors will re-orient the photo to 0 degrees, on saving a new file.

This becomes a more difficult problem if you have clients who are uploading their own photos to e.g. a CMS photo gallery. There, you either need to supply them with tools and training, or to build a system that automatically pulls images from e.g. a Google Drive folder, fixed them, and then uploads them to the CMS.

Another possibility is to simply host your image assets elsewhere, and then to reference them into your published website as external resources. This requires a bit of programming, and content-flow planning... but it's worth it.

Need help? This is what I do.

Resources

Want to support our team?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.
Buy us a beer
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.