image‑orientation CSS Demo - Online Fix Rotated Photos

The image-orientation CSS property controls how a browser applies orientation correction to an image based on its EXIF metadata. It accepts two primary values: from-image (default in modern browsers) which rotates the image according to embedded EXIF orientation tags, and none which displays the raw pixel data without any automatic rotation. This property is especially useful when dealing with photos taken on mobile devices that store orientation information in EXIF rather than physically rotating the pixel data.

When you take a photo with a smartphone or digital camera, the device records the camera's orientation (portrait, landscape, etc.) in the EXIF metadata rather than physically rotating the pixel grid. Some platforms and older browsers ignore this EXIF orientation data, causing the image to appear sideways or upside-down. Modern browsers now default to image-orientation: from-image, which automatically corrects the display — but inconsistencies across platforms still exist. Our tool uses Canvas to permanently fix the orientation so your photo displays correctly everywhere.

EXIF orientation is stored as an integer from 1 to 8:
1 = Normal (no rotation needed)
2 = Flipped horizontally
3 = Rotated 180°
4 = Flipped vertically
5 = Rotated 90° CW + flipped horizontally
6 = Rotated 90° CW (most common for portrait phone photos)
7 = Rotated 90° CCW + flipped horizontally
8 = Rotated 90° CCW
Our tool reads this value and suggests the optimal correction automatically.

To permanently fix a photo's orientation, you need to re-encode the image with the pixel data actually rotated to the correct position, then strip or reset the EXIF orientation tag to 1 (Normal). Our tool does exactly this using the HTML5 Canvas API — it reads the EXIF direction, rotates the pixels accordingly on a canvas, and exports a new image file. The downloaded result will display correctly on any platform, regardless of EXIF support.

The image-orientation CSS property is supported in all modern browsers: Chrome 81+, Firefox 26+, Safari 13.1+, and Edge 81+. Notably, starting from Chrome 81 (2020), the default value changed from none to from-image, which caused many websites to suddenly display user-uploaded photos with unexpected rotations. Using image-orientation: none in your CSS resets this behavior and displays images in their raw pixel orientation.

No, PNG images do not natively support EXIF orientation metadata. The orientation tag is part of the EXIF specification, which is primarily used in JPEG and TIFF formats. If you upload a PNG file, there will be no orientation data to detect, and the image will display in its raw orientation. This is one reason why JPEG remains the dominant format for photographs — it carries rich metadata including orientation, camera settings, and GPS coordinates.

This online tool processes one image at a time for precise control. For batch processing, consider using command-line tools like ImageMagick (mogrify -auto-orient *.jpg) or ExifTool (exiftool -Orientation=1 -n *.jpg). These tools can automatically read EXIF orientation and apply the correct rotation to hundreds of photos in seconds. However, our tool is ideal for quick, visual fixes when you need to verify the result before saving.