It may seem counter-intuitive to use anything other than or to resize images: why on earth would you rescale an image with a server-side technique when the same could be done easily and quickly with a modification to the image’s width and height in your code?

The need for a server-side image resize will often occur when you are interacting with a service external to your own site: an API that requests an image in a particular size and format, for example. Another possibility is : if you allow users to upload images to your site, you’ll want to be sure they are scaled and cropped to specific dimensions. Under such circumstances, CSS is useless: the image must be the right size and format before it is used. Another good example is social media sites’ request for a thumbnail image to associate with a web page or blog post, during a “share” or “like” action.

Facebook Share Thumbnail Standards

Facebook has very specific requirements for the thumbnail image used to illustrate a share. First, the image must be specified, usually inside a meta tag: 

<meta property="og:image" content="http://mydomain.com/images/tiny.jpg">

The thumbnail image must be at least 50 pixels high and wide, and cannot exceed 130 × 110 pixels.  In addition, the aspect ratio of the image must be at least 1:3. Due to these limitations, it’s very common to define a preset square thumbnail image for Facebook: on this blog, I create a thumbnail image for each article that is 114 × 114 pixels square.

Google+ Share Thumbnail Image Restrictions

Like Facebook, Google uses a meta tag to determine the thumbnail image to use, as embedded microdata: 

<meta itemprop="image" content="http://mydomain.com/images/tiny.jpg">

You’d think that if Google wanted to compete with Facebook, they’d make their rules for share thumbnails the same, but no. Thumbnail images in Google+ must be at least 120 pixels high and wide in order to be shared: otherwise, Google will just grab the first suitable image it finds on the page and use that by default.

Does this mean I have to batch process all of the images in PhotoShop to 120 × 120 and keep copies in a special folder just to have them work on Google+?

The answer, thankfully, is no. Instead, we’ll create a script that resizes the thumbnail image when it is requested by Google. I’ll create this script as a file called googlerequest.php at the root of my site.

First, we need the name of the image that we wish to resize. There are many ways of gaining this information: defining a static image, pulling a record from a that contains the filename, etc. In this example, I’ll assume that the image filename will be passed to googlerequest.php from the page to be shared as a URL variable named thumb: 

<meta itemprop="image" content="//domain.com/googlerequest.php?thumb=tiny.jpg">

Now to the script. First, we’ll get our variable: 

<?php
	$thumb = htmlspecialchars($_GET['thumb']);
	$filename = /images/'.$thumb;
	..
?>

These two lines get the value of the variable we passed to the script (cleaning it up with htmlspecialchars to prevent any cross-site exploits) and tells PHP where the thumbnail is to be found by concatenating it with our known folder structure.

Next, I’m going to convince Google that the result of this script is an image: 

header('Content-type: image/jpeg');

We rewrite the header of the file – much as I’ve demonstrated in how to create CSS3 with PHP – to convince Google that it is receiving a JPEG.

Next, we need to create a variable that will receive our new, resized image, specifying the new width and height: 

$image_p = imagecreatetruecolor(120, 120);

Problem: we don’t know the filetype of the original image: it could be a GIF, PNG, or JPEG. Without knowing that information, how are we meant to convert the file?

There are lots of ways of determining and converting a filetype in PHP, but the easiest method in this case is to transfer the existing image into a variable with imagecreatefromstring, which autodetects the format of the original image for us: 

$image = imagecreatefromstring(file_get_contents($filename));

Then, in the penultimate and most complex line, we convert and upscale $image into $image_p. We could crop the image at the same time, but we won’t – so the first four digits specified in imagecopyresampled are set to 0: 

imagecopyresampled($image_p, $image, 0, 0, 0, 0, 120, 120, 114, 114);

Finally, output the image. The entire googlerequest.php page: 

<?php
	$thumb = htmlspecialchars($_GET['thumb']);
	$filename = /images/'.$thumb;
	header('Content-type: image/jpeg');
	$image_p = imagecreatetruecolor(120, 120);
	$image = imagecreatefromstring(file_get_contents($filename));
	imagecopyresampled($image_p, $image, 0, 0, 0, 0, 120, 120, 114, 114);
imagejpeg($image_p, null, 100);
?>

Using this technique, we can resize images for any purpose, before they hit the <body> or an API request. In this case, we’ve just saved ourselves hours of work by ensuring that we can use just one image thumbnail for sharing on multiple social media services.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.