Images Rotating 90 Degrees on Published Site

Design help General
1

Hi all, encountered a bizarre bug and wanted to put here so it’ll show up on Google for others who may encounter it.

A client of mine informed me that some of their images, being populated by the CMS, were showing normally in the designer but rotated 90 degrees on the published site.

The bug seems to be caused by Webflow’s built-in image responsiveness feature. Using devtools I verified that the image source is rendering normally:

image
image870×680 114 KB

However, the srcset attribute reveals the auto-resized images return a rotated aspect:

image
image864×646 130 KB

To fix the problem, simply go to the element pulling the image and check “Disable Responsiveness.”

image
image640×788 76.3 KB

2

hi @gmack I would like to only clarify that values are width by height and not other way as you suggest. So in your case sidewise image is rendered correctly because width is bigger than height.

BTW here on forum are many solutions and result of all these is pointing to:

  1. wrong camera positioning when taking an image
    OR
  2. bad image export (imo your case)

Anyway, the responsive image feature will create different versions of your image for different breakpoints. When you disable it you will on any device load your giant 1.9MB image.

Im only pointing this out because when you decide to disable image variations you should optimise your images sizes and/or format to prevent coming back and ask why is your site too slow. :man_shrugging:

m2c

1 Like
3

Just to add, it’s not convenient, but Webflow tends to strip EXIF data which includes the camera rotation.

The best way to fix that is to orient the image properly at 0 rotation before uploading it. If your client uses a phone camera a lot for captures, you can use a tool like XnConvert to automatically re-rotate the image properly, as well as AVIF optimize it.

An extra step, but worth it.

1 Like