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?
...because, WTF, right?
And none of it helped.
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.
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;
Times 2 different ways the image can be mirrored.
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.
Here's what that looks like;
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.
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?
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;
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;
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.
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.
Specialists in business software technology and Internet strategy since 2001.
