Next post Previous post

Flickr as a poor man's CDN

May 9, 2012 at 9:53 PM by Dr. Drang

I’ve discussed my various Flickr scripts in earlier posts, but I’ve never laid out in one post the reason I wrote them. This will be that post. All prose, no code—if you want to see the code, it’s in this GitHub repository.

With a few exceptions, all the images—screenshots, photos, and drawings—on this site are served from my Flickr Pro account. I recognized the advantages of having images on a different server in February of last year, when a post I wrote about iPhone text editors got Fireballed. I wasn’t using a caching plugin at the time, and the post had a dozen screenshots, all of which were served from my web host, which couldn’t stand the strain. I’ve been Fireballed a handful of times, but this was the only time a significant number of visitors had to use the cache at Brian Stucki’s fireballed.org.

I solved part of the problem by installing the Hyper Cache plugin by Stefano Lissa. This makes a static copy of pages when they are first visited and tells WordPress to serve those on subsequent visits instead of rebuilding every page from scratch. It’s worked quite well. Last December, my post about Doug McIlroy and Don Knuth got linked by both Hacker News and Reddit a few days after it was published, and to my knowledge the site never went down, even though the number of pageviews exceeded that of the February Fireballing.1

Serving images from Flickr was the second stage of load reduction for the web host. As it turned out, there was an additional advantage to using Flickr: because Flickr makes several sizes of every image, I no longer had to do that myself.

Getting the URL of an image hosted on Flickr isn’t the most straightforward thing in the world. If you want to do it “by hand,” you have to run through several steps:

  1. Go to the image’s page.
  2. Choose “View all sizes” from the Actions menu.
  3. Click on the size you want.
  4. Right click on the Download link to copy the image URL.
  5. Paste the URL into your post.

To speed this up, I wrote some Python code and a set of TextExpander snippets that allow me to reduce that to two steps:

  1. Go to the image’s page.
  2. Type the appropriate abbreviation for the URL of the image size I want (e.g., ;640 for a Medium 640).

Regardless of how I get the image onto my page, the Flickr Community Guidelines require a link back to the Flickr image page:

[P]ages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr.

I always use the image itself as the link. Getting the URL of the image’s page is easy—I just use my ;furl TextExpander snippet, which inserts the URL of the frontmost Safari tab. As it happens, this is also easier when I use my two-step process because I never leave the Flickr image page.

Since I use a lot of screenshots in my posts, I wanted a fast way to upload them to Flickr. The repository has a script called snapflickr which:

  1. Takes a snapshot of either a window or a rectangle of the screen (just like the built-in ⇧⌘4 action).
  2. Asks me to name it.
  3. Uploads the image to Flickr.
  4. Opens a new tab in Safari (or whatever the default browser is) to the image’s Flickr page.
  5. Puts the appropriate <img> link on the clipboard ready for pasting into a post.2

I know there are commercial programs that assist with taking screenshots and uploading, but nothing can compare with a script written to match your workflow precisely. Gabe at Macdrifter does something similar with Hazel and Python.

One thing did change when I started using Flickr to host screenshots: I had to change my screenshot format from PNG to JPEG. Flickr accepts PNGs, but it saves the resized images as JPEGs, and any transparent areas in the original PNG become black in the resized JPEGs. Since many of my screenshots are of windows with the semi-transparent shadow, the resized versions on Flickr look like shit. With JPEG screenshots, the window shadow backgrounds are white, which is just what I want.

So there you have it. I wanted to use Flickr as a sort of content distribution network for images, so I wrote a few scripts to make it easy to do so. My web host is relieved of some burden, and I can put together a post as quickly as I could before.

  1. That was a weird day. I was with my wife at the local cancer center for her first day of chemo. She had her iPad and I had my MacBook Air, and we were playing Words With Friends to keep our minds off the poisons that were flowing into her arm. At some point, while the nurse was changing from one poison to another, I checked ANIAT and noticed there were a bunch of new comments. Where the hell are these people coming from? Then I looked at Google Analytics and saw a huge spike. On another day, I might’ve thought that was important. ↩

  2. You may be wondering why I’m using HTML to define an image link when I write my posts in Markdown. Two reasons:

    1. I’ve never liked the ![]() notation Markdown uses for image links. It’s barely shorter than full HTML and less obvious.
    2. I like to use a particular CSS class for images in my posts so they get centered. Markdown doesn’t allow that.

    Since Markdown does allow embedded HTML, that’s what I use for images. ↩

Next post Previous post