Resize your images with PHP

**Spiral** · #1 (**permalink**) 04-15-2007, 09:25 PM

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 Code:


			
<?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() [4]. 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").

PHP Code:


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

Now, $mysock is an array [6] 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 Code:


			
<?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.

Shawon Haldar
shawon[dot]haldar[at]gmail[dot]com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode


<<< The Web Hosting >>>