Automatic PHP Thumbnail Script
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
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
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:
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:
But with the above instruction added to your .htaccess file, you could use:
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="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
This page was last modified on August 27, 2020.
