Image Transformations: One Image, Infinite Possibilities

We tend to use the line “one image, infinite possibilities” when talking about Filestack’s image transformations. Our on-the-fly transformation of delivered images allows customers to serve a single image in an almost infinite number of variations without ever changing the original file. To show how easy it is to use our powerful image transformations in your app, I took one picture and served it 20 different ways. I’ll let you do the math to extend that to, um, infinity.

Image Transformations Using Conversion URLs

Using Filestack’s image transformation API is as easy as constructing a URL. The structure is as follows:

https://process.filestackapi.com/[API KEY]/[CONVERSION TASKS]/[FILE HANDLE]

Using this method you can easily create complex image transformations by adding one or more conversion tasks to the URL. The specified image transformations are then applied to to any photo added to the end of the URL. The file handle can be the unique handle generated by Filestack upon upload (https://cdn.filestackcontent.com/fTQK8OaVSdiz3EcWzlxg) or any URL that is publicly accessible on the Internet (https://upload.wikimedia.org/wikipedia/commons/1/1e/Alamo_pano.jpg).

For example, if I wanted to convert three different images into thumbnails, I would create a conversion URL where the conversion tasks are resize=w:100,h:100 and add the URL of the file I want to convert to the end:

https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:100,h:100/http:example.com/https://cdn.filestackcontent.com/fTQK8OaVSdiz3EcWzlxg

https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:100,h:100/http:example.com/fTQK8OaVSdiz3EcWzlxg

https://process.filestackapi.com/A1AJmUYdDTj2Y5wEFtRO7z/resize=w:100,h:100/http:example.com/https://upload.wikimedia.org/wikipedia/commons/1/1e/Alamo_pano.jpg

Notice how I can use the full Filestack URL, just the unique file handle at the end of a returned Filestack URL or the URL of a publicly available imge? Filestack’s cloud file infrastructure is versatile enough to process any images, even those stored outside of our platform.

Using this method you can crop, resize, rotate, compress, watermark, and colorize images instantly and without ever changing the master file. This processing can be done programmatically for a consistent look and feel regardless of photo size or orientation. You can also create heavily dynamic sites that offer different designs based on sub-domain, user information or even time of day.

Since performance matters and we know our users care about their page load times, processed images are cached at various points in the delivery path. This prevents from having to re-process images every time the transformed images are served. Building responsive websites or playing around with highly dynamic, visual designs is easier than ever before with minimal performance cost.

The Test Case

When our new t-shirts showed up we took this picture of Filestackers, Bethany and Caitlin. It was taken on a Galaxy S6 and uploaded directly to Slack. The original image is 5212 x 2988 and “weighs” 5.3 MB. This should be similar, if not identical, to the types of images users are uploading into your site.

Using only our image transformation URL I can easily and programmatically serve the image 20 different ways without touching the original file or applying CSS.

 

Black and white, resized to 500 pixels high

 

 

Round avatar automatically created with face detection, size set to 100 x 100

 

 

The entire picture blurred (value 7) and resized to 250 pixels wide

 

 

Picture resized to 500 pixel wide and watermarked with Filestack logo in white

 

250×250 thumbnail preview

 

Oil painting effect, resized to 800 pixels wide

 

Now You Try

These are just a few examples of what you can do with Filestack’s image transformations. Want to learn more? All of our image transformations are documented in our knowledge base.

Want to see the code I used to perform the transformations in this post? All of these images were created using a very simple app I built that performs these image transformations on uploaded photos by appending the assigned Filestack URL to the end of 20 pre-built image transformation URLs. You can try it out and see the code here.

Read More →