CSS image-orientation Property

Controls whether an image is automatically rotated based on its internal EXIF metadata or displayed as its raw pixel data suggest.

img { image-orientation: from-image; }
from-image Uses the EXIF metadata embedded in the image file to automatically rotate the image to the correct orientation.
none Ignores all embedded orientation metadata and renders the image using the raw pixel data as-is.

Code Examples

This basic example forces the browser to ignore any rotation metadata in the image, showing the raw uncorrected pixel data.

<style>
.ignore-meta {
  image-orientation: none;
  border: 5px solid #ff0000;
}
</style>
<img src="user_upload.jpg" class="ignore-meta" alt="Raw uncorrected photo">

This advanced example uses JavaScript to toggle between corrected orientation and raw pixel data, which is useful for debugging image metadata.

<style>
  #gallery-img {
    image-orientation: from-image;
    max-width: 400px;
    transition: outline 0.3s;
  }
  .debug-mode {
    image-orientation: none !important;
    outline: 5px solid #00ff00;
  }
</style>

<img id="gallery-img" src="camera_shot.jpg" alt="Dynamic Orientation">
<button onclick="toggleDebug()">Toggle Raw Pixels</button>

<script>
function toggleDebug() {
  const img = document.getElementById("gallery-img");
  img.classList.toggle("debug-mode");
  console.log("Current orientation mode: " + getComputedStyle(img).imageOrientation);
}
</script>

Pro Tip

If you are seeing images appear sideways on your site, it is usually because the image was stripped of its EXIF data during an optimization process or a server-side resize. Before you go crazy with CSS, check your build pipeline. It is much more efficient to fix the file data once than to rely on CSS to patch up broken assets across millions of client views.

Deep Dive

When you snap a photo on your smartphone, the device records its physical orientation in a hidden metadata layer called EXIF. Think of this like a physical photograph with a sticky note on the back that says "Rotate 90 degrees clockwise before looking." Modern browsers are smart enough to read that note and fix the photo for you automatically using the from-image value. If you use none, the browser ignores the metadata and displays the image exactly how the raw pixels were saved. In the past, this property allowed for specific degree values like 90deg, but the modern standard has simplified this to either trust the file data or ignore it entirely.

Best Practices

In 99 percent of cases, you should leave this property alone or explicitly use from-image. Browsers have moved toward making from-image the default behavior because users expect photos to be upright. Only use none if you have a specific technical reason to display the raw, uncorrected image data, such as in a professional photography metadata inspector or a specialized image processing app.

Common Pitfalls

The biggest trap is trying to use angle values like 90deg or keywords like flip. While those were part of earlier drafts, they have been deprecated and removed from the modern CSS specification. If you try to use them today, they will likely be ignored. Also, remember that this property only affects images that actually contain orientation metadata; it won't do anything for a standard PNG or GIF that lacks EXIF headers.

Accessibility

If an image is displayed with the wrong orientation because none was used, it can be confusing for users, especially for those with cognitive impairments. Always ensure that the orientation of the image does not change the context or meaning of your content. If the orientation is critical for understanding, using none might be an accessibility failure.

Dev Data Table: image-orientation property

default from-image
animatable no
inherited yes
experimental no
year_intro 2012
year_standard 2020
js_syntax_1 element.style.imageOrientation = "none";
js_syntax_2 element.style.setProperty("image-orientation", "none");
js_note Useful when building image editing tools where the user needs to see the raw file state versus the corrected state.
browsers { "Chrome": 81, "Edge": 81, "Firefox": 26, "Safari": 13.1, "Opera": 68, "Chrome Android": 81, "Safari on iOS": 13.4, "Samsung Internet": 13, "Opera Mobile": 58 }
results render here...