Image Orientation and Rotation in EXIF

The EXIF Orientation Tag

The Orientation tag (0x0112) is one of the most practically important EXIF fields. It tells image viewers how to rotate and/or mirror the image for correct display, without requiring the pixel data to be physically rearranged.

Why Orientation Exists

Camera sensors always capture image data in the same pixel order, regardless of how the camera is held. Rather than physically rotating millions of pixels (which would require re-encoding), the camera simply records how it was held and writes an orientation flag.

The 8 Orientation Values

The EXIF standard defines 8 possible orientations, combining rotation and mirroring:

Value 1: Normal                    Value 2: Mirrored
┌─────────┐                       ┌─────────┐
│ 1  2  3 │                       │ 3  2  1 │
│ 4  5  6 │                       │ 6  5  4 │
│ 7  8  9 │                       │ 9  8  7 │
└─────────┘                       └─────────┘

Value 3: Rotated 180              Value 4: Mirrored + 180
┌─────────┐                       ┌─────────┐
│ 9  8  7 │                       │ 7  8  9 │
│ 6  5  4 │                       │ 4  5  6 │
│ 3  2  1 │                       │ 1  2  3 │
└─────────┘                       └─────────┘

Value 5: Mirrored + 270 CW       Value 6: Rotated 90 CW
┌─────────┐                       ┌─────────┐
│ 1  4  7 │                       │ 7  4  1 │
│ 2  5  8 │                       │ 8  5  2 │
│ 3  6  9 │                       │ 9  6  3 │
└─────────┘                       └─────────┘

Value 7: Mirrored + 90 CW        Value 8: Rotated 270 CW
┌─────────┐                       ┌─────────┐
│ 9  6  3 │                       │ 3  6  9 │
│ 8  5  2 │                       │ 2  5  8 │
│ 7  4  1 │                       │ 1  4  7 │
└─────────┘                       └─────────┘

Most Common Values

In practice, you will encounter these orientations most frequently:

• 1 (Normal): Landscape, camera held normally
• 6 (Rotated 90 CW): Portrait, phone held with home button on the right
• 8 (Rotated 270 CW): Portrait, phone held with home button on the left
• 3 (Rotated 180): Camera held upside down (rare)

CSS Handling

Modern browsers automatically apply EXIF orientation when displaying images via <img> tags. However, when working with Canvas or CSS background images, you may need to handle orientation manually:

img {
  image-orientation: from-image; /* default in modern browsers */
}

Common Problems

1. Double rotation: Some older software applies orientation then does not clear the tag, causing viewers to apply it again
2. Stripped orientation: Metadata stripping removes the orientation tag, causing images to display sideways
3. Canvas ignoring orientation: When drawing to Canvas for processing, check if the browser applies orientation automatically
4. Server-side processing: Image processing libraries (Sharp, Pillow, ImageMagick) may or may not auto-orient; check the documentation