Recently, I went to a dinner party the day after Thanksgiving where I took some photos with my iPhone 4. When I got home, I decided to try and cook up some really basic HTML of the images manually in a text editor, toss the images into a folder on my website and eventually send the link to my friends to see the photos I had taken with links to the original files at their largest size.
While attempting to do this, I ran into a very odd and interesting problem. Images from my iPhone 4 that I took vertically as opposed to wide angle with the longest side of the camera oriented horizontally were flipped when I referenced them in HTML on my website.
I downloaded the images from the phone using the Mac's built in Image Capture application, used scp via the Mac's Terminal application to secure copy the images to a new directory on my website and created some basic image tags to reference the images. When I tried loading the HTML page I created and saved, all of the vertically oriented images appeared rotated 90 degrees counter-clockwise.
This lead me to do some research on how this could be happening. When I opened these images in Preview, Photoshop or Graphic Converter, an awesome shareware application I purchased some time ago, the images were all rotated correctly but in the HTML references to the files I had uploaded to the website, they were 90 degrees counter-clockwise. Strange business.
What I eventually learned from searching the web for info on this issue is that there's an orientation tag that gets written into the image's EXIF metadata (that's Exchangeable image file format, or EXIF, for those keeping score). The EXIF data includes the camera's make/model and additional information that varies with each image such as the orientation (rotation), aperture, shutter speed, focal length, metering mode and ISO speed. The EXIF data is written to the file as metadata when the photo is taken.
Additional info like whether or not the flash fired and the geo-location info may also be included in the EXIF data set.
It turns out that all of these apps (Apple's Preview, Adobe's Photoshop and Lemkesoft's Graphic Converter) were knowingly but silently rotating these images based on the orientation tag's value of "6" for all of the images taken vertically; This was the problem with the images on the server. The web browser and the HTML know nothing about this special rotation tag in the EXIF data and as such, were ignoring it and showing the files without checking the orientation tag in the file. Now, to find a solution.
The page below provides more information on the EXIF orientation values and what each one means. There are graphic representations of what each value does to a letter on the page depending on which value is saved for the orientation tag:
<http://sylvana.net/jpegcrop/exif_orientation.html>
I set about looking for a way to remove the tag from the EXIF data but that turns out to be more difficult that I had anticipated. Finally, I searched the Graphic Converter docs and found a setting in Graphic Converter's extended preferences in Graphic Converter 6.x under: Graphic Converter menu > Preferences > Open > Formats > EXIF Rotate image depending on EXIF orientation, or in Graphic Converter 7, under: Graphic Converter > Preferences > Open tab > Metadata under the EXIF section:
This box was checked when I first visited it so, I unchecked it (like in the screenshot above) and when I opened the files I'd imported from the iPhone again in Graphic Converter, the orientation tag was ignored and the images appeared as they did when referenced in the HTML on the website. That was step one.
The next step was to rotate the images 90 degrees clockwise and resave them as JPEGs so that the images appeared corretly on the website. Once that was done, I re-uploaded the files to the server and set a 75% height attribute for the image tags so that they wouldn't appear too large on the page. I add anchor tag links to the actual full size files on the web server that appeared below the 75% images on the web page and voilá, the fix was in.
The only issue now was, when someone downloaded the large image versions, the images would be rotated 90 degrees clockwise, or so I would assume. I sent an email that attempted to explain this scenario to Thorsten Lemke, author of the amazing shareware image editing app Graphic Converter, mentioning that an EXIF editor might be a good thing for someone to create. Thorsten, who personally replies to all posts sent to him, replied less than 24 hours later with an email that included a movie attachment showing how to use a feature in Graphic Converter's new Browser window's Actions pop-up that addressed this exact problem.
All you have to do is launch the shareware app Graphic Converter 7, which is free to try and way cheaper than Photoshop to buy, open the image browser from the File menu, select the files to convert in the browser window, click the Actions pop-up and choose Metadata (EXIF, IPTC,...) > Rotate Depending on EXIF (JPGs only) for the selected images and it's done.
Here's a screenshot of the command in the sub-menu of the Actions pop-up in Graphic Converter's Browser window:
There's also another menu item right below the Rotate based on EXIF tag called Change the Orientation Setting that provides a method to set the orientation value manually. There are eight possible values for this tag.
Browsing around in the Graphic Converter app's Browser Window Actions pop-up , I found tons of other EXIF edits are possible from the pop-up menu as well.
I hope this answers someone's question in the future when they run into the same issue I did and are puzzled about what's going on and how to go about fixing it.
Recent Comments