Introduction to Image Manipulation in php + GD

Written By: Nathan Baker

- 24 Jul 2006 -
















Description: We all know that php is very useful for generating dynamic webpages. However, fewer people know that it is also useful for generating dynamic images! In this tutorial, I will guide you through generating image thumbnails on the fly.

  1. Introduction
  2. php: HTML++
  3. OK, I'm excited! Let's write the getImage function!
  4. That's it!

Introduction

Have you ever been to a website that has some sort of gallery set up which seems to take forever to load? Maybe the server is just slow, or maybe the hapless web designer just used browser tags to resize the image rather than actually sending a smaller image. This is, of course, very stupid, and I will show you how to avoid this stupidity through the power of php.

php (which Word keeps wanting to auto capitalize) is a language designed around what its developer, Rasmus Lerdorf, calls 'the web problem'. Although it can be run as an interpreted script like other scripting languages, it is designed first and foremost around dynamically generating HTML pages. Combined with a robust set of libraries and one of the best, most comprehensive programming manuals on the web, you can do some totally sweet stuff with it.

One thing you will need to note is that this tutorial requires php to have been compiled with GD. Most standard distributions of php are, but if you built it yourself then you might want to read up in the php manual to see how to rebuild it with GD support.

Also, I am assuming that you are familiar with the basics of php. You don't have to be an expert, but you need to understand at least enough to get by writing simple scripts that pass variables through HTTP get or post. Understanding the basic syntax of the language is also a plus, though I will explain any of the more confusing or advanced features as I go.

Mise en scène

In case you're curious, the phrase 'mise en scène' means 'putting in scene', and refers to the art of properly setting the stage (and thus the mood) in theater. Not that I would expect you to know that.

ANYway, let's go through a high-level overview of what we're going to do. I know you're itching to get to the actual code, but this is my tutorial, so you have to get through all this pesky text first.

What we're going to do is called dynamic image scaling. Let's say you've taken a photo of yourself with your fancy new 1.5-terapixel digital camera, and you want to put it on your website to share with your aunt Matilda. But when Tilly (who was always your favorite aunt, even though she's getting a bit senile with age) tries to open it, she complains, saying the image is so huge that all she can see is one of your hair follicles, and it takes all day to download. Also, you want to put more pictures on your website, and then show thumbnails to the user for browsing. Thus, you will need three sizes of pictures: thumbnail size, web-viewing size, and download size. Thumbnail-size pictures are designed to be very small and quick to transfer, at the expense of the ability to see details. Web-viewing-size pictures are a good size to fit in a standard browser window and show more detail without going overboard. And download size is the actual file with its true dimensions, suitable for getting professionally printed and mounted on aunt Matilda's wall.

You could, of course, manually scale the photo to each of these three sizes. But this leads to several problems. For example:

But what if there were some way to tell the webpage "I want an image that's x pixels wide and y pixels high, so scale it if you have to"? Wouldn't that be handy? But wait! The HTML image tag does have that ability! So let's try this:

 src='/img/myimage.jpg' height='64' width='48' />

Alright! Now the image is a fraction of its normal size! But it seems to take remarkably long to load for such a small image. Hmm...the file size looks exactly the same as the original image! How come the original image is three gigabytes and the 3072-pixel version is still three gigabytes? Inconceivable!

The problem with using in-browser scaling is that the server transfers the entire image and the browser alters the dimensions to be whatever the tag says they should be. Thus, while it fixes your scale problem, your size problem still remains. So unless your users want the most detailed thumbnails known to man, it's time to ditch pure-HTML scaling and move to the next level: php.

Next >>