Resizing Images with PHP
There are two basic ways to resize images for Internet display, and there are two basic reasons for wanting them resized. First, let's discuss the two basic options on resizing.
Two Ways to Resize Images
Images you may want for your website come in an infinite variety of dimensions for display. But when you're resizing them, you need to pay attention to file size as well. If you were to resize a large picture in a graphics editor like Photoshop, you would change its default display size as well as its file size. But if you resize a picture by changing its dimensions in HTML, you're only changing the way it displays. The file is still the same size.
This has important ramifications, particularly if you're working in a graphics-heavy page. Large file sizes take longer to download, even with fast servers and speedy connections. One or two images on your page won't slow it down much. But if you're serving up thumbnails of a dozen or more books or art prints, you need to have small images that won't clog your viewer's bandwidth. For these types of images, you need to physically shrink images or to limit the number of images on your page.
Here's the problem. Basic PHP only resizes images in the way they display in HTML. That means if you have tons of shrunken images on your page, they are going to download very slowly. If you want to be able to serve up image-heavy pages without download problems, you'll need to either shrink them outside your site or use a PHP add-in program like Mogrify. Another problem with resizing them on the fly like this is that it will take up server resources. If you have a busy page, again, you're better off creating the thumbnails off-site and loading them as alternate images.
Two Reasons for Wanting Images Resized On The Fly
The two most common reasons for resizing images on your server are having a large image database you have integrated with your website, and having an active community who upload images to your site that you want to be able to browse by thumbnails. In both cases, you're looking at creating thumbnails. Considering the issues with doing this, you're probably better off limiting these pages to a display of maybe a half-dozen images at a time.
But another good reason for resizing images on the fly, and one that is workable within PHP's limits, is changing advertising. Suppose you sell books on your site. You want an easy way to put up a rotating Top Selection on your main page, but you don't want to mess around with resizing dozens of cover shots. You can put a script into the Top Selection area that will resize your chosen cover shot for you; and you can use the same script to show that single image in a variety of sizes on your main page and on any subsidiary pages you are using to sell as well.
Resizing That Image
The first two things you need to remember when you're setting up your resize script is that you want to be able to use a single image for each product, and that you need for this image to retain its aspect ratio.
So, start by declaring your function. This PHP function is a very simple math-based script:
<?php
//declare your variables
function imgResize($width, $height, $target) {
//takes the larger size of the width and height and applies the formula. Your function is designed to work with any image in any size.
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 so that it will set the image to the correct size, without putting a whole script into the tag.
return "width=\"$width\" height=\"$height\""; } ?>
As you can see, your image resizing is based on the percentage. The script uses basic algebra to look at the original width or height of the picture and determine what percentage you're shrinking it to, and then it will multiply the other dimension by the same percentage to see what value to assign it.
Next, you need to find the width and height of the image you're planning to display; the command in PHP for this is getimagesize(). This command returns image width, height, and type -- in HTML tag format (width="x" height="y"), if you wish.
$mypicture = getimagesize("images/picture01.jpg");
You've just created an array called $mypicture that holds important information about the image you're going to display. Inside the array, index0 will hold the width ($mypicture[0]), and index1 will hold the height ($mypicture[1]).
Now you're ready to resize your images.
Suppose the space you have allotted for your thumbnail book covers is 100 pixels x 100 pixels. Starting with your array $mypicture, you would write:
<?php
//get the image size of the picture and load it into an array
$mypicture = getimagesize("images/picture01.jpg");
?>
Now you can call this array with a standard HTML tag, allotting the different numbers for the array in the appropriate places.
<img src="images/picture01.jpg" <?php imageResize($mypicture[0], $mypicture[1], 100); ?>l>
This resizes your image to fit into your 100-pixel-square box. The larger dimension is shrunk into 100 pixels, and the smaller dimension will be proportionately less. Not so hard, right? Make sure that before you set up each picture, you create a new array. You can keep the array definition together with the image source code.
You absolutely must remember that this resize is not changing the file size, but only the display size. There is a good side to this, however. If you're serving pictures that you want people to be able to easily download, they can right-click directly on the thumbnail and save the image; in their computer, it re-expands to its normal default size instead of saving as a thumbnail.
Site Categories
Recent Blog Posts
