Image Transformations: One Image, Infinite Possibilities

- February 26, 2016


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

fTQK8OaVSdiz3EcWzlxg

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

image transformation

 

 

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

o1ZVQlqbTLymXXR4cZ3M

 

 

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

o1ZVQlqbTLymXXR4cZ3M-1

 

 

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

image transformation

 

 

Rotated 180 degrees and resized to 250 pixels wide

o1ZVQlqbTLymXXR4cZ3M-1

 

 

Rounded corners and resized to 700 pixels wide

image transformations

 

 

Image rounded and background set to black, resized to 800 pixels high

image transformations

 

 

Polaroid effect rotated 15 degrees and resized to 250 pixels wide

image transformations

 

 

Image lifted off the page with a shadow, resized to 300 pixels high

o1ZVQlqbTLymXXR4cZ3M-1

Using face detect to automatically pixelate faces, resized to 800 pixels wide

image transformations

 

 

Converted to ASCII and colorized with a black background (using URLScreenshot)

image transformations

 

 

250×250 thumbnail preview

image transformations

 

 

Converted to .PNG and quality reduced by 50%

image transformations

 

 

Oil painting effect, resized to 800 pixels wide

o1ZVQlqbTLymXXR4cZ3M

 

 

Modulate effect with hue set to 240, saturation set to 200 and reduce brightness to 80

image transformations

 

 

Baconized using bacon watermark

image transformations

 

 

Mirror image, resized to 600 pixels wide

image transformations

 

 

Auto-crop to focus on all faces and adding a green border

image transformations

 

 

Adding 20px orange border, resized to 500 width

image transformations

 

 

Torn edge effect, image resized to 300 pixels wide

image transformations

 

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.