I'm building a web gallery made for self-hosting. When I tested the first prototype of my gallery with my personal pictures, I immediately noticed that something was wrong with all the pictures in portrait format: their orientation was wrong. It was odd, because any other mean of watching the pictures, such as my camera and my image viewer on Linux, rendered the correct orientation.

The reason the images were wrongly orientated is because my camera uses Exif data in order to encode the actual orientation of the image. Exif (Exchangeable image file format) is a collection of metadata such as GPS location, date and time, etc, about the picture that was taken, that is contained in the file, alongside the actual image data. The image is always stored in landscape mode, and the orientation is solely encoded in the Exif data.

This is not new nor bizarre. In the old days, camera did not know whether a picture was taken in landscape orientation or in portrait orientation (or upside-down) and people had to manually rotate their images on their computer. Then came cameras with orientation detection, which were able to tell how they were orientated while taking the picture. However, instead of actually rotating the image (that is, the content), such cameras simply indicated the orientation via the Exif orientation tag. All modern cameras do that, and most modern software knows how to read Exif data in order to display the proper orientation. Except browsers.

Actually, browsers know too. If you directly open an image in a modern browser, the orientation is correct. It's only when the image is embedded in a web page (via img) that the orientation might be wrong. Fortunately, there is a way to tell the browser to use Exif data to display the correct orientation, thanks to the CSS image-orientation property:

image-orientation: from-image; /* Use EXIF data from the image */

Unfortunately, as of today, this is still an experimental standard, and it only works in Firefox. No joke. iOS Safari is a special case, as it doesn't support the property, but doesn't need to as it honors Exif by default. Overall, there is currently no reliable pure HTML/CSS solution to properly orientate pictures in a web page according to Exif data.

Even if we accept the lack of support for image-orientation, its specification itself is bizarre. By default, Exif orientation is ignored. Shouldn't from-image be the default? To understand the current state of specification and of support, I've searched and read the Firefox bug tracker, the Chromium bug tracker and the W3C mailing list. More precisely, I've found the following threads quite interesting:

• Bug 298619 on Bugzilla: (exif) should consider using exif orientation flag when displaying JPEG images, reported in June 2005
• Issue 56845 in the Chromium bug tracker: EXIF orientation is ignored, reported in September 2010
• This thread in the W3C mailing list: [css3-images] honoring EXIF orientation from images, started in November 2011

The reason Firefox bug report is so well ahead of Chromium's one is because the Chromium project started in 2008 while Firefox had already a solid community in 2005. In fact when the Chromium bug was reported in 2010, Firefox hadn't made much progress on the bug since the third answer to the bug was posted in 2009 and was just trying to attract more attention to it.

Three main points can be extracted from these discussions:

• Nobody had planned to implement the standard. As can be seen in the mailing list above, the W3C started worrying about Exif in 2011, after browsers started worrying about it for very practical reasons. Browsers had no plan to implement the standard. They flat-out ignored it until Exif became mainstream enough in order to cause "bugs".
• The alert was raised by smartphones and email. The Exif-related bugs started to appear in emails because of photos sent directly out of smartphones. The iPhone started using the Exif standard quite early on, and people started sharing pictures by email directly with their phone. Since the "default" way people hold their phone is vertical, it means that many pictures exchanged by mail suddenly depended on Exif. For this reason, the Bugzilla bug tracker mostly worried about Thunderbird while the Chromium bug tracker mostly worried about Gmail.
• Everybody feared breaking the web. A straightforward support for Exif orientation by default was considered out of question by all parties (browsers and W3C) because they thought it would break the web. The idea is the following:

Someone took a picture. The picture carries Exif data. Photographer opened the picture with a software application that doesn't understand Exif data and saw the picture badly oriented. Photographer manually rotated the picture so that it looked good. Picture is now inconsistent with Exif data. If the browser suddenly starts honoring Exif data by default, picture is badly oriented again.

As you can see, the scenario is based on the idea that the web contains a lot of pictures whose actual orientation is inconsistent with their Exif orientation. In such case, a support for Exif orientation can break sites that worked very well until the support was installed. However, there was no data to support such claim. Some people in the threads pointed out that the web might actually not contain so many such pictures and that not supporting Exif orientation might be causing more breakage than supporting it, but this opinion was mostly ignored.

As the fear of breaking the web related only to images embedded in pages, most browsers implemented partial support for Exif orientation: it worked when a picture was directly opened as a file, but not when it was displayed using img. The answer from the W3C to this compatibility problem was to allow developers to opt-in to Exif orientation via image-orientation: from-image;

With hindsight, it seems that many contributors in those threads weren't aware of how widespread the support for Exif was among cameras and among other types of photo viewers. As I said, they basically waited for the standard to become mainstream enough to cause bugs, and even then some of them were still questioning the relevancy of the standard.

I've honestly no idea whether supporting Exif by default would cause more damage on the web than the damage the lack of support is currently causing, but the fact is that today, browsers can cause bad surprises to web developers and seem to be quite late on the Exif game. Apparently Apple didn't wonder much about legacy when they honored Exif by default on their iPhones apps, maybe browsers should follow the lead.

As of today, the only way for a site such as my photo gallery project to store and display pictures properly is to rotate the picture according to the Exif orientation tag upon acquiring it (server-side), get rid of the tag, and then display the picture without any additional CSS. The web is basically living in denial of the Exif orientation standard, while every other piece of software is dealing with it.