By Jason Snell
October 30, 2014 2:31 PM PT
Resize and upload images with Acorn and Transmit
Note: This story has not been updated for several years.
Over the years at Macworld I built a bunch of workflow tools to make the business of writing and posting stories easier, and distributed them to my colleagues. They were generally AppleScript scripts for use with BBEdit, since that’s my writing tool of choice and we had a site license.
Now that I’m here and the initial burst of insanity in launching a new site during Apple’s high season is beginning to ease, I am slowly building new tools to help me do my new job in a more efficient fashion. Yesterday I bodged together an AppleScript (wrapped in an Automator action) to make it easier to upload images to this site, and a few people asked about it on Twitter, so I thought I’d share it here.
While I’ve been using Adobe Photoshop for years, I am no longer in the happy embrace of a company with a Creative Suite site license, so I’m using Acorn from Flying Meat as a replacement. And for FTP uploads, I’m currently using Panic’s excellent Transmit.
When I was building this site’s templates, one of the great mysteries was how to handle retina images. I didn’t want to force everyone to download huge images that their browser couldn’t display, but when I searched for the most common, accepted solution for serving retina graphics to those who require them and non-retina graphics to those who don’t, I came up empty. Everyone had a different approach, and none seemed to be the clear right way to do it.
I ended up going back to a JavaScript I had found and applied to The Incomparable’s web site, Retina.js. This is a JavaScript script that first loads a low-resolution image (allowing the page to load quickly), then goes back on Retina-class displays and replaces the images with 2x versions, where available.
This means that I need to upload two images to my web server every time. For horizontal images, this means one that’s 680 pixels wide and a 2x version that’s 1360 pixels wide. As you might imagine, that’s a lot of resizing and uploading, and I wanted to automate it.
I did so by using Automator to create a Service that works on selected images in the Finder. To create the basic wrapper, I opened Automator, created a new document, selected Service from the template picker, and then chose “Service receives selected image files in Finder.” What this means is that if I control-click on image files in the Finder and look in the Services menu, I will find an option to upload images for Six Colors, which is what I wanted all along!
Automator has a Run AppleScript module, which allows you to embed arbitrary scripts inside Automator. So after adding a Get Specified Finder Items action, I added a Run AppleScript action and pasted in an AppleScript script I had written based on scripting examples from the developers of Acorn and Transmit.
The script loops through every file selected in the Finder, opens them in Acorn, resizes them to the two sizes (or their equivalent sizes if they’re vertical rather than horizontal images) and saves out JPEG files, then uploads them via Transmit. It’s quick and dirty—if anything in the file’s name or path contains a period (other than the filename itself), it won’t work. And I’m sure that Dr. Drang would use the command-line tool sips instead. And a dozen people will tell me that this is the entirely wrong way to do Retina images on the Web—all of whom will offer their own unique solutions.
But it’s a step toward saving me time, so I’m glad I took it.
If you appreciate articles like this one, support us by becoming a Six Colors subscriber. Subscribers get access to an exclusive podcast, members-only stories, and a special community.