Image resizing the smart way

We developers like to make it our users as easy as possible to use the Soflomo system. The content management system is meant to serve any kind of user, so also those who don’t understand the principles of resizing image for better and faster displaying.

Therefore an automated resize script is a necessary tool to have inside the system. A user can point to an image to display it on its website by using a common image dialog, but different pages requires different image sizes for e.g. a blog or portfolio item. It’s too difficult for them to upload multiple resized images for all the use cases, so uploading the original, largest image must be enough.

At Soflomo we have constructed such a tool inside the Sofzo, the Soflomo framework. It’s useful for our clients, but also front end webdevelopers might have some benefits from using the image processor. Yes, I’m talking now of an image processor and not a simple resize tool anymore. Sometimes you need a square crop of your image. Sometimes you need a bit more sharpening because the image is getting blurry. And that’s not the work of an image resizer, it has become a real processor.

The programmer’s side

Instead of having a html tag like <img src="/img/image.jpg" height="200" width="150">, the height and width of the image is also given as a parameter to the image like <img src="/img/image.jpg?h=200&w=150" height="200" width="150">. Of course you need only to do so if you want to scale the image.

Now it’s time to configure the webserver. You pointed to an image, but you want it to be processed by your script. Thus .htaccess all the way. You catch all requests to /img/* and point them towards your php script, e.g. image.php?src=$1&$2. This means the following rule will do the trick for the situation above:

RewriteRule ^img/(.+)$ image.php?src=img/$1 [L,QSA]

Doing such is useful for the not so sophisticated webbrowsers. Some are looking to the image path and find it’s a php file instead of the expected image and you don’t get your desired result. This way you have very clean html code with normal images inside your image tag, though you have still the control to resize them.

Inside your image.php file you get the source of the image and all the other attributes (thanks to the QSA flag). With GD you can do whatever you want. A good example is the script from Joe Lencioni. He has a tool for image resizing where you’re able to determine width, height, crop ratio (so “1:1” for a square crop), sharpening and image caching (including 304 Not Modified headers and ETags, if enabled).

Conclusion

Your webdevelopers want to avoid ugly browser resizing of images. You don’t want to interrupt your users because their image size is wrong. You need a tool to resize automatically to the right width, heigt and width/height ratio (by cropping the image). You like to keep the generated html as clean as possible.

An elegant solution is to rewrite all urls pointing to image towards a php file. The file is able to alter the images on demand, returning the new image. Implementing new functions is easy because of the parameterized url, and with server side caching and implementing the right headers, it’s fast too.