Ashley Sheridan​.co.uk

Smart Image Resizing

Posted on

When creating any sort of dynamic gallery there is always the issue of creating thumbnails. This is not a problem if all of the source images are the same size, but with a dynamic gallery that cannot be guaranteed. Sure, you could leave instructions that images must be of a certain width and height, and reject anything that doesn't fit, but isn't it nicer to create smart thumbnails from any size and orientation of image?

I wrote this function as a solution to that problem. It determines the proportions of the image you are using, and uses a clever crop and resize in order to pick the best parts of the image.

Portrait silouette of a person in profileWith a portrait photo, the focal point is usually in the top region of the image, aligned horizontally to the middle. This function will then crop the area at the top of the image if it has to crop.

Landscape silouette of some mountainsA landscape image tends to have the focal point in the center, both horizontally and vertically, so this function crops from the center if it has to.

So, here's the code:

function createResizedImage($url, $newUrl, $width, $height) { list($width_orig, $height_orig) = getimagesize($url); if(($width / $height) < ($width_orig / $height_orig)) { // landscape $ratio = $width / $height; $image_p = imagecreatetruecolor($width, $height); $image = imagecreatefromjpeg($url); imagecopyresampled($image_p, // dst_im $image, // src_im 0, // dst_x 0, // dst_y ($width_orig / 2) - ($height_orig * $ratio) / 2, // src_x 0, // src_y $width, // dst_w $height, // dst_h $height_orig * $ratio, // src_w $height_orig); // src_h } else { // portrait $ratio = $height / $width; $image_p = imagecreatetruecolor($width, $height); $image = imagecreatefromjpeg($url); imagecopyresampled($image_p, // dst_im $image, // src_im 0, // dst_x 0, // dst_y 0, // src_x 0, // src_y $width, // dst_w $height, // dst_h $width_orig, // src_w $width_orig * $ratio); // src_h } imagejpeg($image_p, $newUrl, 100); }

And it's called like this:

createResizedImage("image.jpg", "image_thumb.jpg", 150, 100);

The first argument is the source image, the second is the new thumbnail image that you want to create which can contain the path (relative or absolute). You should make sure that you have write permissions for the location of the new image. The last two arguments are the width and height of the new image.

And here is the result on some real photos I've taken (click an image to see the original 640×480 pixel image):