If you’ve looked at some of my earlier posts in Firefox, you may have noticed something odd about them. Some of the photos will appear to be rotated in the wrong direction, but if you view the same post in Chrome or on an iPhone, they’ll appear to be rotated correctly.
When I’m working in my garage, I take all of my photos on my iPhone, and I’ve recently found out that when I take a picture in landscape orientation (with the home button held to the left or the right, rather than the top or bottom of the screen), iOS doesn’t rotate images to match the orientation of the phone when it writes them to storage. Instead, it writes the image data in the same orientation as the camera, and saves some time by writing the orientation information separately into the metadata that it attaches to the image. This lets the device take pictures faster, but means that some of the images have to be rotated before I post them.
Unfortunately, I didn’t notice this behaviour up until now, thanks to a series of unfortunate circumstances:
- As previously mentioned, Chrome looks at images’ EXIF data and re-orients them as necessary
- The file browser on my Ubuntu 14.04-LTS machine also auto-corrects for iOS’ sloppy behaviour
- Unlike the other parts of my toolchain, WordPress ignores EXIF orientation information when images are uploaded, taking the stance that it’s not interested in automatically modifying users’ images.
So what to do? Well, I could open each of the images in an image editing program like Pinta, apply the necessary rotation and resize the file. On the other hand, that sounds boring and time consuming, and I’d rather figure out how to do the job automatically.
Since we’re modifying images, the go-to tool in our kit will be an amazing suite of image editing tools called ImageMagick. It’s 100% free and open source, runs damned-near anywhere, and can do pretty much anything that you might want to do with an image file.
I’m working on an Ubuntu system, so I’ll install ImageMagick like this:
$ sudo apt-get install imagemagick
If you’re on some other platform, you can read up on how to download the tool here.
Now we just have to string together some command line switches to do what we want. Here’s what I came up with:
$ mogrify -auto-orient -resize 584x438 -strip -quality 85% *.jpg
The command that we’re running is called mogrify, and will modify your images in place, so you’re going to want to cd into a directory that contains a copy of your images before running it.
After the mogrify command, we specify a number of command line switches that change how it behaves:
- -auto-orient fixes the iOS image orientation problem described above
- -resize resizes the image to the size provided (specified as maximum width x height in pixels), and respects the source image aspect ratio if it can’t make the image exactly that size
- -strip removes all EXIF data and other metadata from the image, including timestamps, GPS location data, and information about the device that took the image. It also removes the pesky orientation data that caused Chrome and Safari to automatically correct for iOS’ behaviour, which is important, because we’ve just rotated the image, so if we leave the metadata in place, the image might actually appeared double rotated after I post it
- -quality specifies the compression level to use when resizing the image (specified as a percentage between 0 and 100)
The last thing in the command, after all of the command line switches, is *.jpg, which tells mogrify to do all of the previous steps on every file in the current directory that ends with .jpg.
Once I’ve run this command, I’m left with a directory full of properly oriented images that are the right size for posting on my website, with all of the private/identifying metadata stripped out of them.
Handy, right?
