Blog images upside down on iPhone or iPad
Recently a client observed that photos she uploaded to her WordPress blog appeared fine on her computer, but were upside down when viewed on an iPhone or iPad.
This is NOT a problem if you prepare your images for use on the web by editing them on your computer.
I have been recommending Webresizer.com for patrons who don’t have photo editing software — or don’t know how to use what they’ve got.
Images optimized at Webresizer.com retain the camera’s exif data and if you rotate the image in the edit process it will be fine in operating systems and software that ignores the EXIF data, but cause problems in iOS devices that DO pay attention and “correct” the image per the instructions saved in that data.
Some research followed…
including this post: http://iphonephotographyschool.com/iphone-photos-upside-down/
Cameras note in the EXIF data the orientation of the camera when the photo is taken. This is probably a mechanism in the camera that notes where a tiny ball rolls — photos taken of a diagram with my iphone held basically level to the table did not contain rotational information, and thus, no software would auto -correct the rotation.
Below are four pictures taken with my iphone held in 4 different positions. On my Mac, in MacMail, and in IPhoto, the images are all displayed with the arrow pointing up (that’s how the paper was when the photo was taken) — on my webMail viewer, they were as you see below. I presume a Windows computer would also ignore the EXIF data — Webresizer ignores the EXIF data and displays them as you see below. We’ll see if Joomla corrects the orientation or not. (WordPress 4 did NOT)
Nope! All but the last are upside down on computers (but do display correctly when this blog is viewed on an ipad!)
Here’s a COPY of #3 that I opened and saved in Preview: (Note PREVIEW on my Mac paid attention to the EXIF data and rotated the image correctly before I saved it.)
So the ONLY images from an iphone or an ipad that will work without editing are taken with the volume buttons DOWN.
I don’t know how the “normal” position on other brands of phones would be described, but you can run your own tests to find out.
ALL other images will need to be opened and saved to strip out the EXIF data. Opening an image in PhotoShop and using the SAVE FOR WEB routine results in an image that displays correctly on all devices because the EXIF data has been removed.
Opening and saving an image with PREVIEW on the Mac also strips out the EXIF data, but it also further compresses a file with a loss in quality.
You could do this with your original images BEFORE editing with WebResizer — some compression from saving with Preview would probably be OK. Doing this to images that have already been optimized for the web results in OVERLY compressed images that are noticeably lower quality.
As long as that EXIF data is removed — you can do the rotation in Preview or in Webresizer.
How can we be sure the EXIF data is gone?
http://regex.info/exif.cgi
This website allows you to upload an image and then examine all the associated data.
In the EXIF section you’ll see a line for Orientation. We want it to be “0” (zero) or “horizontal(normal)” — then we can trust that no devices are going to mess us up.
Next test: If I just use WP to edit the photo and do the rotation, will it be “pure” for the sake of display on Apple and non-apple devices?
Here goes:
WP rotation took #2 from above and created this!
Here’s a generated thumbnail from the edited full size:
So far, so good.
Now to save, and view this on my ipad. — (Correct on the computer — upside down on the ipad!)
As I feared, the WP rotation does NOT remove the EXIF data and images rotated on the computer using WP image editing tools are then RE-ROTATED on the APPLE devices because they pay attention to the EXIF data.
Out of the box, the outdated version of Joomla this blog runs on does not have image editing to rotate, but I kind of have to assume the same issues would exist.
Ipad and Iphone images taken with the volume buttons on the bottom will be fine as is. Photos with other cameras that have a clear top and bottom should be fine for horizontal images.
All other images taken will need to be opened and saved using PREVIEW, PHOTOSHOP or some other image editing software on your computer before being optimized with the Webresizer.com tools or the WP editing tools. That step is required to strip out the EXIF data about orientation. Curiously, this process does not strip out other meta-data about when and how the picture was taken.
Tags: image editing