By: Greg Knox

April 17th, 2003

Reader Rating: 6

If you're anything like me, you're probably lazy (and if you're not, give yourself a pat on the back!).

Recently, as I built a Website to show off a range of products, I realized that not only was I going to want to use the same product image over and over again, but I was going to want to use that same image at different sizes throughout the site!

I thought to myself, "I don't feel like having 4,000 different thumbnails on my server for each product, and I don't want to have the image look all jacked-up and distorted if I hard code the image width and height in my HTML".

I know what you're thinking. Why couldn't I just use something like ImageMagik [1]?

In most cases, I would use ImageMagik so that I could have a regular version and a thumbnail version of each image. But in this particular case, I wanted to be able to display various sizes of the same image, without having 4,000 different thumbnails sitting around taking up space.

So how did I do it? Well, I improvised. I knew these things:

• I wanted one image per product.
• I wanted the size of the altered image to keep its aspect ratio, no matter whether it was landscape or portrait.
• I wanted one script to do all of this dynamically.

So, with the knowledge I'd gained using PHP almost on a daily basis, I sat down and started figuring out a function to achieve these goals. I am by no means a PHP guru -- in fact, I taught myself the language sometime in the summer of 2002, so by most standards, I'm still a newbie. But I thought I could create a script that would do exactly what I wanted...

Getting Started

Let's say you have a great line of socks that you want to sell through your site. Well, you're proud of these fantastic socks and want people to see as much of them as possible: on the product views page, on the search page, on the listing page, etc. But this doesn't mean that you have to use the default image size each time, nor risk the quality of the image being degraded when it is stretched or crunched into a space. Some socks are longer than others and so you might have the image sizes ranging from 200x400 up to 600x750 pixels.

To begin writing the function, we have to declare it as such... Then we have to throw in our attributes. We want to restrict our image, so we have to let the function know the dimensions to which we want to restrict it, and we have to know what the original image size is to begin with (we'll get to that part in a second).

<?php

function imageResize($width, $height, $target) {

//takes the larger size of the width and height and applies the  
formula accordingly...this is so this script will work  
dynamically with any size image

if ($width > $height) {
$percentage = ($target / $width);
} else {
$percentage = ($target / $height);
}

//gets the new value and applies the percentage, then rounds the value
$width = round($width * $percentage);
$height = round($height * $percentage);

//returns the new sizes in html image tag format...this is so you
can plug this function inside an image tag and just get the

return "width=\"$width\" height=\"$height\"";

}

?>

Before we take our new function on a test drive, we need to get the width and height of the image that we want to display. There is a magical command in PHP called getimagesize() [2]. This command, used properly, will return the image width, height, type, and even the width and height in HTML image tag format (width="x" height="y").

$mysock = getimagesize("images/sock001.jpg");

Now, $mysock is an array that holds vital information about the particular image we want to display. In index 0, we have the width ($mysock[0]), and in index 1, we have the height ($mysock[1]). That's really all we need, in order to get what we want done. Want to see the function... well, function? Here we go!

The Function in Action

Let's say you want to display a list of your beautiful socks, but you want room on the page to show them neatly in a row, and to do that they cannot be larger than 150 pixels tall or wide.

<?php

//get the image size of the picture and load it into an array
$mysock = getimagesize("images/sock001.jpg");

?>

<!-using a standard html image tag, where you would have the  
width and height, insert your new imageResize() function with  
the correct attributes -->

<img src="images/sock001.jpg" <?php imageResize($mysock[0],  
$mysock[1], 150); ?>>

That's it! Now, no matter what the original file size, it will be restricted to no more than 150 pixels in width or height (or whatever you specify).

Now, you may think "This sounds too good to be true. Is there any circumstance where using this technique could prove disastrous?"

Actually, there is. Keep in mind that you aren't changing the file's original size. That same 200x400, 50 KB picture you uploaded only moments ago is still 200x400, 50 KB. This script only changes height and width attribute in HTML, so that your original picture conforms to the height and width you think will look best on your Web page.

Having said that, if you have a page that lists 50-something products, the page will display the way you want it to, but uses will have to download all 50 of those 50 KB pictures, which could take some time. So I'd have to recommend this technique in situations where you're only showing a few pictures at a time.

[1] http://www.imagemagick.org
[2] http://www.php.net/manual/en/function.getimagesize.php