Image Cache using phpThumb and .htaccess

Generate thumbs by visiting a URL such as your.com/thumbs/images/image.50x50.jpg. This will create a 50x50px thumbnail of your.com/images/image.jpg.

The thumb will be stored on your server at your.com/thumbs/images/image.50x50.jpg so the next request for the same image will be loaded without loading php for ultra fast image cache.

Introduction

About a year ago I came across a fantastic script called phpThumb. It is an open source project used to resize images. Sure you can do the same thing with tools such as GD2 or imagemagick (or magickwand), however its much nicer to not have to worry about those things and just focus on getting the right image with ease.

It was as easy as

<img src="phpthumb/phpThumb.php?src=myimage.jpg&w=100&h=100">

The problems started to arise on high-volume servers when apache had to get PHP to parse the phpThumb code for every image requested. Sure it has caching but it still has to load PHP to decide if it should use the cache or not.

In the past I have seen this issue solved using mod_rewrite to redirect non-existent images to a script where they can be generated. As a proof-of-concept I will provide the basic information required to get this running.

What you need

  • Apache
  • mod_rewrite
  • PHP

These things usually come with dedicated and shared hosting servers by default, however installation is beyond the scope of this article.

Ok, just tell me how to do it!

Upload phpThumb

Download phpThumb from here:
http://phpthumb.sourceforge.net/

Upload phpThumb to yoursite.com/phpthumb

Setup Mod_Rewrite

Create yoursite.com/thumbs/.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?thumb=$1 [L,QSA]
</IfModule>

Create the Thumbnail Generator

Create yoursite.com/thumbs/index.php

$thumb = $_GET['thumb'];
if (!$thumb) {
        exit;
}

$thumb_array = explode('.',$thumb);
$image = '../';
foreach($thumb_array as $k=>$thumb_part){
  if ($k != count($thumb_array)-2) {
    $image .= $thumb_part . '.';
  }
}
$image = substr($image,0,-1);
list($width,$height) = explode('x',$thumb_array[count($thumb_array)-2]);

if (file_exists($image)) {
        require('../phpthumb/phpthumb.class.php');
        $phpThumb = new phpThumb();
        $phpThumb->setSourceFilename($image);
        $phpThumb->setParameter('w',$width);
        $phpThumb->setParameter('h',$height);
        //$phpThumb->setParameter('far','C'); // scale outside
        //$phpThumb->setParameter('bg','FFFFFF'); // scale outside
        if ($phpThumb->GenerateThumbnail()) {
                mkdir(dirname($thumb),0777,true);
                if ($phpThumb->RenderToFile($thumb)) {
                        header('Location: /thumbs/'.$thumb);
                        exit;
                }
        }
}

Test it out!

Upload an image to yoursite.com/images/myimage.jpg

Open your web browser to yoursite.com/thumbs/images/myimage.100x100.jpg

Check in your thumbs folder, the file should actually be there now. Next time it is requested PHP will not be loaded.

Post new comment

  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <css>, <diff>, <drupal5>, <html>, <javascript>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • You may use [img:xx] tags to display uploaded files or images inline.
  • Allowed HTML tags: <b> <br> <p> <a> <strong> <cite> <em> <code> <ul> <ol> <li> <dl> <dt> <dd>

More information about formatting options