1

I have some photos that were uploaded by a user who complained that the vertical photos were changed to landscape orientation when they were resized. Indeed, that was the case and in an effort to just move things along I reoriented the photos and uploaded in place. That had no effect when the pictures were viewed inside of a webpage though!

To make as simple a test as possible I created a bare bones web page with no CSS and a single IMG element with no attributes other than src. That continues to show the photo in landscape mode. Copy the photo's URL and paste into another tab and the photo shows in vertical mode. Download the file and open in Windows and it shows in vertical mode.

http://www.texashiking.com/test/PhotoOrientation.htm

The files are being stored on Azure BLOB storage.

I've duplicated this with Chrome version 56, Edge version 38 and Internet Explorer 11.

What could be causing this?

Robert Barron
  • 33
  • 4
  • How are your photos getting uploaded? – Obsidian Age Feb 09 '17 at 02:56
  • The photos were uploaded to the website using the ASP.Net FileUpload control. .Net's BitMap and Graphics classes are used for resizing. The resulting photos then transferred to Azure using Microsoft's StorageClient library. – Robert Barron Feb 09 '17 at 03:04

1 Answers1

0

Your image has embedded exif orientation data which is presumably being ignored when rendering the page. See this answer for a bit more detail.

Basically, the camera you took the image with stored it in landscape, but stored some metadata with it saying that the image needs to be rotated 270°. The browser is apparently ignoring this tag when rendering it in the webpage, but not when you access the image directly.

Community
  • 1
  • 1
JonRB
  • 175
  • 6
  • For what it's worth you can see this data on websites such as [this].(http://www.verexif.com/en/ver.php?foto_file=&foto_url=http%3A%2F%2Fstatic.logbookexplorer.com%2Fphoto2017%2F49876d80b05645f48ab7b796cff5251b-large.jpg) – JonRB Feb 09 '17 at 03:02
  • You are spot on. The EXIF orientation setting explains why things look fine in Windows but never right when included in a web page. I've cleared the EXIF data, reoriented to vertical and things look fine.Now to come up with a plan to automatically extract such settings in the future and reorient the photos so this doesn't happen in going forward. Thanks! – Robert Barron Feb 10 '17 at 06:14