Exif orientation in different formats
- Published
- Last updated
- Revisions
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:
- Normally it's added by a camera to differentiate landscape and portrait shots.
- It's copied while converting image from one file format to another.
- 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:
![JPEG without Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif0-1x.jpg
)
![JPEG with Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif5-1x.jpg
)
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:
![WebP without Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif0-1x.webp
)
![WebP with Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif5-1x.webp
)
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:
![PNG without Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif0-1x.png
)
![Standard PNG with Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif5-1x.png
)
(standard)
![Nonstandard PNG with Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif5-NonStandard-1x.png
)
(nonstandard)
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:
![AVIF without Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif0-1x.avif
)
![AVIF with Exif orientation](https://zpl.fi/exif-orientation-in-different-formats/Exif5-1x.avif
)
(Exif)
![AVIF with built-in transformation](https://zpl.fi/exif-orientation-in-different-formats/Rot3Mir1-1x.avif
)
(
irot
& imir
)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:
- no nothing
- flip horizontally
- rotate 180 degrees
- flip vertically
- rotate 90 degrees clockwise and flip horizontally
- rotate 90 degrees clockwise
- rotate 90 degrees clockwise and flip vertically
- 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.