Some blogs automatically resize the pictures for you into a thumbnail – like the image to the right. What if you want the image a different size, though? You could allow the browser to resize it for you, or – better yet – write your own php script to resize the image dynamically.

Why You Shouldn’t Let the Browser Resize Images

Look at the original picture – the small thumbnail created by WordPress. Notice how large it is – 13.9kb. When WordPress resizes the image, it also reduces the file size. If I were to include the fullsize image and resize it using css height and width attributes, the file size would not be cut down.

Want proof? Look at the second image to the right – that’s simply resized by the browser. It’s a whopping 284.21kb.

If we write our own php script to resize the image dynamically, we can control both the image size and the file size. Check out the third image to the right – which was resized with a php script. You’ll notice that it looks nicer too – the browser isn’t designed to resize images.

Using the PHP GD Library to Resize the Image

So how do we do this? We’re going to make use of the PHP GD library to manipulate the image, and a $_GET parameter to tell it which image to re-size.

Let’s walk through using the GD library to re-size an image. Then we’ll see how to include that in your HTML to actually do the resizing for you.

First, we need to open up the original file and get it’s size and type characteristics.

$src_img = imagecreatefrompng('image.png');
$srcsize = getimagesize('image.png');

imagecreatfrompng() creates an image object and stores it in $src_image. If the file was a different type we could replace “png” with “jpeg” or “gif.” getimagesize() stores an array in $srcsize that contains the width of the image ($srcsize[0]), the height of the image ($srcsize[1]), and the filetype of the image ($srcsize[2]).

Now we need to create new dimensions for the new image and actually create an image. We’ll resize it to 200 pixels wide – and then adjust the height to maintain the ratio.

$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);

The calculations should be self explanatory. imagecreatetruecolor() creates a new image object for us with the given dimensions – which we will soon fill in with our resized image.

The next step is to place the resized image into $dst_img and output the image as Image content.

imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, 
    $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
header("content-type: image/png");
imagepng($dst_img);

imagecopyresampled() copies an image ($dst_img) into a new image ($src_img) with a set of given attributes (including our sizes). The “Header” line tells the browser that this is an image – so that it’s not displayed as a bunch of gibberish. Finally, the imagepng() function actually displays the image.

Now, we need to clean up and destroy the image objects. Otherwise, we could end up sapping a lot of memory from the server.

imagedestroy($src_img);
imagedestroy($dst_img);

Displaying the Script in HTML

If you load the script directly, you should simply see the image. It creates an image resource and displays it in the browser – as if “resize-image.php” was really “image.png.”

Therefore all we need to do to include this new image in an HTML page is use the php script as the src attribute of our <img> tag. Like so…

<img src='resize-image.php' />

The script will execute, create an image, and use that as the src.

The last thing we need to do is modify our script so that we can pass it some information.

It wouldn’t do much good if we had to write a new php script for every image we wanted to resize. Instead, we can use the $_GET array to send a variable (the image filename) to our image resizing script.

Here’s the entire image resizing script, with the $_GET variable used for the filename.

//  Create source image and dimensions
$src_img = imagecreatefrompng($_GET['image']);
$srcsize = getimagesize($_GET['image']);
$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);
 
//  Resize image
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
//  Output image
header("content-type: image/png");
imagepng($dst_img);
 
//  Destroy images
imagedestroy($src_img);
imagedestroy($dst_img);

To use this, you need to slightly modify your HTML and add an “image” parameter to the URL of your script. Like so…

<img src='resize-image.php?image=image.png' />

There ya go! Now you can resize images on the fly.

Next Steps to Take…

This is of course a basic introduction to the topic. You can add a lot of functionality to resize-image.php.

For example, you could take extra parameters – like a width and/or height. You might also want to include a bunch of error checking – make sure the file exists, make sure the new dimensions are appropriate, etc.

You could also use a switch() statement to open different types of images – based on the contents of $srcsize[2]. Remember, you can use the GD library to do more than work with .png files. By replacing ‘png’ with ‘jpeg’ or ‘gif’ you can use the same functions to work with these file types. For example, imagecreatefromjpeg is equivalent to imagecreatefrompng.

In the near future, I plan on extending this example into a full-fledged script for immediate download and use. So stay tuned – and leave any comments with suggestions for what the script should be able to do.

You can test how your site displays in a few browsers – for example, I often check mine out in Windows IE, Ubuntu Firefox, and Ubuntu Opera. But how am I going to check it on Mac browsers like Safari?

Enter Browsershots.

The premise is very simple. You check off a list of browsers and platforms, enter your website’s url, and click submit. Then the servers open your site, take a screenshot, and upload the display to Browsershots.

You can then view the screenshots and see how your website appeared in those browsers. You can check out some sample displays for an education related website that I created.

Your options are pretty extensive. At the moment you can choose from 36 Linux browsers, 12 Windows browsers, and 4 Mac OS browsers.

After you submit your request, you need to wait until your website comes up in the queue. Each server (factory, as they call it at Browsershots) has its own queue. A lot of the servers will be done in a couple of minutes, but some queues can be one to two hours long.

One of the downsides to the site is that your request will expire in 30 minutes. The completed screenshots will stay up there, but if you have any requests left in the queue they will be canceled.

You can refresh your request by clicking a button, but if you get stuck in a 90 minute queue you’ll have to remember to refresh your request several times.

All in all, very useful tool. I plan to use it to test out any future design projects. So the next time you want to see how a foreign browser would display your site, head over to Browsershots.