Chrome and Edge Shows Wrong Photo Orientation

You have an application in which you show a photo. Intermittently, you get some photos show up with wrong orientation. In Internet Explorer, photo shows up correctly but Chrome and Edge causes the problem.

As a developer, you may think it is an Internet Explorer issue because Chrome and Edge conforms to the specs. But for this issue, Chrome and Edge is the issue.

Root Cause of Wrong Photo Orientation in Chrome and Edge

By default, Chrome and Edge reads the photo EXIF information and changes photo orientation based on EXIF orientation data. Even though this “feature” never made it to specs, it is still available in the browser.

Internet Explorer completely ignore EXIF information and show the photo as it is.

Typically when you edit photo (e.g. rotate), EXIF information should be updated accordingly but if it is not updated, you will see a wrong orientation on Website.

Two Ways to Fix Wrong Photo Orientation

Here are two ways to fix wrong orientation issue. Depending on your need and environment, you may choose either one solution or you may implement both the solutions.

Change HTML/CSS

Use style/CSS to force the browser to ignore EXIF information. You may either use inline style or CSS class to ignore orientation information.

Following is an HTML img tag with style attribute.

<img src="/img/logo.jpg" style="image-orientation:none;" alt="logo" />

Following is a CSS class definition. Add this CSS class to your img tag.

.img-orient-none {
	image-orientation:none;
}

Remove EXIF Information From Photo

You may remove the EXIF information from photo. Once removed, you don’t need to make any changes in HTML/CSS because browser will not find any EXIF information and will not change orientation.