Create thumbnails on the fly with PHP

Generating thumbnails on the fly with php

“A picture is worth a thousand words” is a quote that all of us will agree 99 out of 100 times. Today on internet we search for all types of images and in various sizes. So how come we get the same images in various sizes. Well the simple answer would be manually re-sizing and uploading the images. But with the power of PHP coming into play we can generate thumbnails on the fly with php, which means that same image can be viewed in different sizes and that also without re-sizing it manually.

View Demo

What is thumbnail?

In Computers, a thumbnail is a reduced-size version of a picture. which is used purposely on web pages to reduce bandwidth and download time. Also thumbnail are used where you have a pictures of very high resolution or a very large image, so just displaying a small part or a re sized version of the picture can help user to quickly have a look at the image.

Generating thumbnail using timthumb library

TimThumb is a simple, flexible, PHP script that resizes images. The author of this awesome library is Ben Gillbanks. Using this library you can resize, crop, filters and even scale the images. Timthumb is not a perfect library there are some bugs but it gets sorted out from time to time by their authors, all in all it’s a very nice and simple library to use and generate thumbnails.

Requirements before running this script

Before using this script make sure your web server support PHP and GD image library. You also need to create a folder name cache and set the permission to 755.

Enough talking! Let’s generate thumbnails with php

Before we get started make sure the timthumb.php file is in your server. Also in my demo I have a sample image whose height and width are 512px X 512px (You can use bigger image if you want).

<img src="images/img1.jpg" alt="no image found" />

Now create a resized version of the same image lets say width 100px and height 100px. set w and h paramenter to 100.
<img src="timthumb.php?src=images/img1.jpg&w=100&h=100" alt="no image found" />

For creating a low quality image just put q parameter within 0-100
<img src="timthumb.php?src=images/img1.jpg&w=100&h=100&q=50" alt="no image found" />

When you have a transparent image(png mostly) you can choose to show background or leave it transparent. You then have to change ct to 0 to show background color and 1 to use transparency.
<img src="timthumb.php?src=images/logo.png&w=150&h=100&ct=0" alt="no image found" />

If you are unsure about the image size and want to automatically best fit within your given height and width set zc to 2.
<img src="timthumb.php?src=images/img1.jpg&w=150&h=100&zc=2" alt="no image found" />

You can set the alignment of the cropped image position to be displayed like top, bottom, left, right, top left etc. Use a parameter with their respective values.
<img src="timthumb.php?src=images/img1.jpg&w=180&h=100&a=t" alt="no image found" />

Also a very least used paramenter is the filter, with filter you can control brightness, contrast, turn image to grayscale, colorize it and many more. Just use the f parameter to set the action.
<img src="timthumb.php?src=images/img1.jpg&w=100&f=2" alt="no image found" />

Check out the Timthumb Parameters list

Parameter Stands for
Values What it does
src Source of the image Your image path Sets the images to be used.
w width Must be a positive number Resize to the given width
h Height Must be a positive number Resize to the given height
q Quality 0-100 Sets the image quality but don’t go below 40
zc Zoom/crop 0,1,2,3 resize or crops the image read more.
a Alignment c, t, l, r, b, tl, tr, bl, br Sets the croping position.
f filters too many Let’s you to set brightness, contrast and many more. read more
ct Canvas Transparency 0,1 Use transparency and ignore background colour
cc Canvas Color hexadecimal color value like(#000000) Change background colour. Most used when changing the zoom and crop settings, which in turn can add borders to the image.

You can also check the timthumb project website for more references.
View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.


Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

shivasurya on

nice article bro!

Parshv Shah on

thanks for sharing..

nice work dude!!

Dnyanesh Pawar on

timthumb is crackable,vulnerable for attacks

Nitish Kasar on

thanks for sharing shahrukh


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.