Omnichannel Services – Dynamically Sized Images

Today I’m going to talk about how you can create an omnichannel service to provide images to your apps and web that are sized dynamically. This is very useful when you need to support a number of different resolutions and orientations.

In this example, I will use PHP and its support for image manipulation, but the same functionality can be achieved on all major platforms, like any Java variation and .NET. The idea is to have a high resolution image on the server that is transformed by an omnichannel service to any size that is needed by an app or web in each channel.

To enable image manipulation from PHP, we need to login to the virtual server that I showed you how to create in a previous video, and enter the following commands in a terminal on Mac or Linux (or using puTTY on Windows):

sudo apt-get install php5-gd
sudo service apache2 restart

Now, let’s put up an image (e.g. using https://panic.com/coda) on the virtual server by creating a subfolder to the web root and upload the image there. To allow support for as many resolutions as possible, it’s a good idea to use an image with high resolution (I’m using one with the view from my window, and with a resolution of about 16 megapixels or 4608×3456).

With the image in place, let’s create a service that can return it in any size…

…and first we collect the parameters (line 2-5) and retrieve the original image (line 6-7). We get its dimension (line 8), and set the response headers (line 9-10). We check if any resizing or quality parameters were specified (line 11) and if not, we just return the original image (line 58). If any resize parameters were specified (line 13), we make sure that the image will fill the new size (line 15-21) and crop the image to that size (line 23-40), and if no resize parameters were specified, we simply use the original image (line 44). Finally, we check for the quality parameter (line 47), and if specified we use it (line 49), and if not, we use the default quality (line 53) of about 75% (i.e. 25% compression).

To put this code on your server, I just create a new file named image.php, paste the code we just walked through, save it, and then it can be called with (replace 0.0.0.0 with the IP of your server):

http://0.0.0.0/image/test?name=view&width=200
http://0.0.0.0/image/test?name=view&width=400&height=400
http://0.0.0.0/image/test?name=view&width=400&height=400&quality=25

An important detail is that this actually works very well with any Content Delivery Network (CDN), which can cache each size of the image all over the world.

There you have an omnichannel service that can deliver images in any resolution and quality and that can be easily consumed by your apps or webs.