Server-side Image Resizing

Over at my blog for random images and news Truth (plus lies), I made a change not so long ago after realizing what’s probably true for most blogs these days — that the home page is not the front page. In other words, most visitors don’t come to a site through the home page. Far more often, they come to the site directly to one post, making that page their entryway. Single post pages are the real front pages of contemporary blogs, so they should be designed to do that job as well as presenting their specific content.

With this in mind, all my single post pages on Truth (plus lies) show the 5 most recent posts in their side bars. Better yet, posts that have featured images will show a smaller version of that image. Which is fantastic visually, but presented me with a little technical challenge. All those featured images were actually being loaded by the browser at full size and being resized on the client’s side, adding a lot of bloat and load time to my pages. I could’ve gone through and made sure the featured images were stored at their thumbnail size, but I wanted a more flexible solution. If I went through resaving all my images at sizes dictated by my current design, then what happens in the future when I change that design? Do I want to resize them all again?

This actually poses a deeper question for me: should I be saving all my content images at sizes dictated by my current design? Wouldn’t it be better to store the highest resolution image so I’ll have it ready in case I ever redesign to display larger images in my posts? What are my options?

It turns out there is a very good option, which is storing — and referencing — the high-res image file but resize it on the server side rather than the client side. There are two good scripts out there ready to do this job for you in a smart way. In fact, one is callled the Smart Image Resizer, and the other is Timthumb. Either would have probably done the job for me, but I went with Timthumb because it seems to have a few more people dedicated to updating it.

Both scripts do the same thing. They take an image url as an argument, along with parameters about what size you’d like that image at, and they return you a perfectly-sized version. They also keep a cache of images they’ve processed, so if you request the same image at the same size over and over, they don’t have to reprocess.

Here’s a picture of Katharine Hepburn skateboarding. The url of the image is http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg

Now here’s a resized version generated by Timthumb. It’s done with a call like http://truthpluslies.com/wp-content/plugins/imgsize/timthumb/timthumb.php?src=http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg&w=260

It ends up being ridiculously simple. To add it to my blog, I decided to make a little custom plugin, but I could’ve easily done it in my theme’s functions file as well. One advantage to the plugin is that it gave me a place to put my Timthumb folder. For now, all the plugin does is look for a width attribute whenever a request for a post thumbnail is made. Then it generates the image based on that width. In the future, I’ll probably add to this so that it works on post images as well, but that’s trickier because I don’t have a universal width for images in posts.

Here’s the entire code for my plugin:

add_filter( 'post_thumbnail_html', 'resize_thumbnail');

$html = preg_replace('/ src\=[\'\"][^\'\"]*[\'\"]/', $add_string, $html);
return $html;
}