Automatic PHP Thumbnail Script

sunset slide image
Original Size Image

Smart website designers know that making their pages load quickly makes their site better in several ways. Most importantly, it prevents users from leaving your site because the page loads too slowly. Thumbnail images are naturally faster to load and also helps reduce the bandwidth that your site consumes by reducing the amount of data required to be sent for each page. And, Google considers the speed of your site in the rankings. Most webmasters simply create their own thumbnails using a graphics program like Photoshop whenever they want to offer large images on their website. But that can be time-consuming and mind-numbingly tedious work. There are a few benefits of creating your thumbnails manually, not the least of which is that you can fine-tune the image to get the best possible quality. But most of the time, a simple resized version of the graphic is perfectly adequate, which means that you can use a PHP thumbnail script like the ones presented here to create your thumbnails automatically. The scripts are not complicated. The object is to provide a ready-made solution to a common problem, and to structure the scripts so that they're easy to understand and to add your own enhancements. Two versions of the script are presented here; one that uses the standard GD library, and one that relies on ImageMagick.

Let's start with the example image shown here. I used this particular image here just because it's handy. But let's assume that it's an image we'd rather not display at full size in our webpage design. We'd rather use a thumbnail and offer the user a link to allow him to view the full size image if he likes.

[Thumbnail Using GD]  [Thumbnail Using ImageMagick]  [Automatic Thumbnail Maker] 



PHP Thumbnail Script Using GD

thumbnail of slide image
Example Thumbnail Image

Most hosting services offer PHP programming support, including the GD graphics library, so we'll start there. The file you can download using the button below includes the PHP script "makeThumb.php". All it takes is replacing the "src" parameter in the img tag with the URL for the PHP script, including the parameters "src" which contains the path to the original image file, and "color" to select the color for the font. The script also supports a "width" parameter to specify the width of your thumbnail image. Using that script to display the above image as a thumbnail by setting the "src" attribute to "makeThumb.php?src=slides/slide1.jpg", we get the resulting image shown on the right. The script relies on the PHP function imagecopyresampled() and uses a quality setting of 90 on imagejpeg() so that the image quality is improved while the output file size is still reasonably small.

Note that I incorporated my Pop-up Zoom feature here so you can click on the thumbnail image and you'll see a pop-up window that displays the full-size image. The code is search-engine friendly and degrades nicely for users running with JavaScript disabled. Check it out by viewing the HTML source for this page.

There is a button at the bottom of this page where you can Download This Code with the documentation .



PHP Thumbnail Script Using ImageMagick

thumbnail of slide image
ImageMagick Thumbnail Image

If ImageMagick is installed on your server, you can use it to create thumbnails with a little extra style and quality control. This version of my thumbnail maker script is a little more robust in that it outputs the same file type as the origial (where the GD version always uses JPG), and you can add an optional colored border. The width and color of the border is up to you. I used lime green here to make the feature more obvious, even though it looks so ugly. If you do use a border, remember to account for the border width in your webpage design.

You can use this script for automatic thumbnails just as you would the GD version above. ImageMagick is not only capable of adding special effects like borders, it can also do image optimization like sharpening and brightening. Check out the ImageMagick Commands Documentation for detailed information on the command line interface commands which this script relies upon.

There is a button at the bottom of this page where you can Download This Code with the documentation .



Automatic Thumbnails with .htaccess

While having this script available is handy, unless you take some additional steps, you have to use a direct call to the thumbnail script "makeThumb.php" in every img tag on your pages. So I suggest that you add an instruction to your .htaccess file to simplify the URLs. This instruction intercepts HTTP requests that begin with a special folder name you can select (my example uses "/thumbs/") and reroutes them through the thumbnail script - automatically. The following instruction should do the trick:

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/thumbs/(.+)$
RewriteRule ^thumbs/(.*) /makeThumb.php?src=$1 [L]

Just insert "thumbs/" between the root URL for your website and the path to the original large image file, and install makeThumb.php in the root directory for your website (ie. the same directory where your website's main page is located). For example, the direct URL would be:

http://www.example.com/makeThumb.php?src=/path/to/the/image.jpg

But with the above instruction added to your .htaccess file, you could use:

http://www.example.com/thumbs/path/to/the/image.jpg

From then on, as long as your img's URL begins with "thumbs", your server will redirect the request to makeThumb.php and tell the script to fetch the original, full-size image file and use it to create a thumbnail-sized replacement image to send to the user's browser.

You can add a "&width=xx" parameter to the query string in the last line of the above code to set the width of the thumbnail image, but it's simpler to just change the default settings in the makeThumb.php script file. With this instruction in place, you can use simple URLs in your img tags and the thumbnail will be created automatically.




The Automatic Image Thumbnail Scripts package is provided free of charge. If you use and appreciate it, please post the following link in an appropriate location on your site:

a href="http://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a


This page was last modified on October 24, 2017.


Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!