Exif orientation is known to cause problems and over time similar issues have cropped up in different circumstances. Web browsers and other software are slowly getting better at handling Exif orientation, and nowadays, there shouldn't be too many problems with JPEGs. Other image file formats are, however, a different story.

Why would an image even use Exif orientation? I can think of three reasons:

1. Normally it's added by a camera to differentiate landscape and portrait shots.
2. It's copied while converting image from one file format to another.
3. It's added or modified by some image preview application, image editor or utility like ExifTool or Exiv2.

Next, let's investigate Exif orientation in different image file formats.

JPEG

According to the Exif specification section 4.7.2 JPEG stores Exif metadata in APP1 marker where data starts with the string "Exif\0\0". Here are JPEG test images which should look the same if your browser handles Exif orientation properly:

WebP

Extended WebP file format can store Exif metadata in EXIF chunk. For example, running cwebp with -metadata exif copies Exif metadata from the source image. However, at the time of writing, no browser seems to support the orientation tag in WebP. Test your browser below:

PNG

Exif metadata extension for PNG was standardized in 2017 with the introduction of eXIf chunk. An earlier nonstandard way of storing Exif metadata was using zTXt chunk with keyword "Raw profile type exif". At the time of writing, only Safari seems to support the orientation tag in PNG, and it supports both the standard and nonstandard chunks. Test your browser below:

AVIF

AV1 Image File Format, or AVIF for short, is a promising image file format currently supported in Firefox and Chrome (see Can I use for more details). It's based on the HEIF container format which is prominently used by Apple. According to the HEIF standard, HEIF files can store Exif metadata in Exif item, but the format also has a built-in way of transforming images: irot property rotates the image 0, 90, 180 or 270 degrees and imir property flips the image vertically or horizontally.

It's unclear whether you should use Exif orientation or the built-in transformations. For instance, iOS creates HEIF files with both Exif orientation and irot property containing equivalent values. At the time of writing, Firefox and Chrome seem to only support irot and imir properties in AVIF. Test your browser below:

Exif metadata and image data order

In order to use the orientation information, web browsers may require that Exif metadata is stored before image data in the image file (see this issue). This way the browser can reserve space and start displaying the image while its loading and the image won't suddently change orientation after it's fully loaded. Nevertheless, some applications may write the Exif metadata after the image data. You can inspect the file structure of your images for example with Exiv2:

exiv2 -pS print image.png

However, in well-formed WebP images, the Exif metadata should be written after the image data according to the specification. For this reason, it's unclear whether web browsers will ever support Exif orientation in WebP images.

Handling Exif orientation

Inspired by Dave Perrett's work, I've created a collection of CC0-licensed test images to check Exif orientation support in different file formats. You can browse the images or download everything as a zip file (11 MiB). Similarly to the images in this article, software that support Exif orientation should display these images in the same orientation.

As we've seen, different web browsers provide varying level of support for Exif orientation. This is why you shouldn't rely on the Exif orientation, but rotate and flip the image data accordingly when publishing images on the web. You can do this with -auto-orient option of ImageMagick:

magick source.jpg -auto-orient destination.jpg

If you're developing an image library or application, here are the operations required to rotate and flip the image data according to the Exif orientation value from 1 to 8:

1. no nothing
2. flip horizontally
3. rotate 180 degrees
4. flip vertically
5. rotate 90 degrees clockwise and flip horizontally
6. rotate 90 degrees clockwise
7. rotate 90 degrees clockwise and flip vertically
8. rotate 270 degrees clockwise

After rotating and flipping the image data, you need to remove the Exif orientation tag (or set its value to 1) in order to display the image in the correct orientation. You may also consider stripping the Exif metadata altogether when writing images. In addition to removing the orientation tag, this will also reduce the file size and remove personal information, such as location, that may be stored in the metadata.

In practise, you're likely to encounter images with incorrect Exif orientation. To work around this, your application could provide a user interface to manually verify and correct the orientation after loading an image.

This article focused mainly on image formats popular on the web. For more information on different formats and the metadata they may store, check out ExifTool's Tag Names and Exiv2's Metadata reference tables and Image Metadata and Exiv2 Architecture. Many image formats, including those listed in this article, can store also XMP metadata which might include Exif properties like orientation. Fortunately, this doesn't seem to be widely used or even supported, so we don't need to worry about it.