Image Resizing

Category: PHP
Reviewed by: aegir   
Reviewed on: Jun 28 2006
» Discuss this topic ( Posts)

This tutorial is meant to exhibit and explain a script that is often asked for, but that I rarely see recreated: Image Resizing. The tutorial requires previous PHP experience with functions. Other than that, I'm reasonably sure that everything is explained fully.

Enabling GD

For basically any image manipulation you want to do it is necessary to enable the GD library PHP fuctions. You'll want to get the latest version possible, as this tutorial uses functions from GD 2.0.1+.

Installation instructions can be found at php.net.

Resizing a single image: Part I

Purpose: Write the header, define the filepath to the file to be resize, and create the image from the filename. For this portion of the guide I will be using the image located here in my script. You will need to change the URL to either your own URL or filepath for whatever image you choose to resize.

<?php
header("Content-type: image/png");
$filename = "http://files.nwtclan.net/img/gd1437140.png";
$imgsrc = imagecreatefrompng($filename);

header(....) - Defines the types of images you will be creating and manipulating in the script. In this case it is the .png extension, because it's a personal favorite. I highly suggest, if you must change it, to use "image/jpeg". JPEG and PNG images tend to be the easiest to work with when doing image manipulation.

$filename... - Defines the location of the file we will be creating an image from. This may be either a URL (http://webiste.com/file.png) or a filepath (/directory/file.png)

$imgsrc - The GD function imagecreatefrompng($filename) creates the image from the file and sets the identifier it returns to $imgsrc, to be used later.

Resizing a single image: Part II

Purpose: Create a destination space with specified dimensions for the image to be created to when it is resized, resize the image using a GD function, and load the new image to the page for viewing using another GD function.

$imgdest = imagecreatetruecolor(50, 50);
imagecopyresampled($imgdest, $imgsrc, 0, 0, 0, 0, 50, 50, 800, 1067);
imagePNG($imgdest);
?>

$imgdest - Creates a "tablet" image of 50x50 pixels, which are width by height respectively. We will be resizing the slected image to fit on this tablet and then will be loading it.

imagecopyresampled(....) - This is the GD fuction that will resize the given image and copy it to our 50x50 "tablet". In order the parameters are:
  • image destination (tablet)
  • image source (image we will be resizing)
  • x-axis starting pixel distance from 0 (top-left corner) in the destination image.
  • y-axis starting pixel distance from 0 (top-left corner) in the destination image.
  • x-axis starting pixel distance from 0 (top-left corner) in the source image.
  • y-axis starting pixel distance from 0 (top-left corner) in the source image.
  • x-axis ending pixel distance from 0 (top-left corner) in the destination image. This will be the width of your destination "tablet".
  • y-axis ending pixel distance from 0 (top-left corner) in the destination image. This will be the height of your destination "tablet".
  • x-axis ending pixel distance from 0 (top-left corner) in the source image. This will be the width of your source image.
  • y-axis ending pixel distance from 0 (top-left corner) in the source image. This will be the height of your source image.

Note: If you don't like the way the image turn out (eg. Too blurry), then try replacing imagecopyresampled( ) with imagecopyresized( ). They both use the same parameters but return distinctly different image qualities.

imagePNG($imgdest) - Since the source image was just resized and copied to the destination ($imgdest), we need to show the finished product on screen. That's what this function does.

When you've gotten this far, save the code as a php file and load it in a web browser. Congratulations, you just resized the image. If you stuggled with this part of the guide then breathe a sigh of relief because it's all coasting from here.