API

How to automatically resize, fit, and align any image using only URL parameters

- January 25, 2017


 

Image Resize

Resizing images like pngs, jpgs or gifs is one of the most common things we have to do as developers.  You might need to optimize the layout of a website or application, reduce the size of your images to increase page performance or even just get the alignment of that reaction meme you’re playing around with just right before Slacking it to a colleague.  To do that you need to resize, align, clip, crop, scale or otherwise fit your image to a particular dimension.  This post is for you!

Can’t I use CSS… Or Photoshop… Or Graphicsmagick… instead?

Typically to resize, fit and align images you can use something simple like CSS to display the part of the image you want, Photoshop to manually crop or something complicated like Graphicsmagick or Imagemagick to automate transformation.  Like anything, these different solutions have pros and cons.  

“Resizing” with CSS is easy, but page load suffers

For CSS, the advantage is its easy.  Take this example from Stack Overflow of someone trying to use CSS to display an 800×600 image resized and cropped to 200×100.  Just a bit of playing background properties and you’re done.

.with-bg-size { background-image: url('https://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width: 200px; height: 100px; background-position: center; /* Make the background image cover the area of the <div>, and clip the excess */ background-size: cover; }

The problem here is that while this CSS hack will display the image at 200×150, the user will be still be downloading the entire 800×600 image.  If this is a ecommerce site, then suddenly your site is going to slow down way more than necessary and your users, especially on mobile, are going to go somewhere else.

Resizing with Photoshop works but is slow

Photoshop “just works” but a) it’s a really expensive way to just crop and image and b) do I seriously have to wait 37 seconds for it to initialize just to open an image?

ImageMagick is probably overkill

ImageMagick is another solution that will allow you to truly crop the image to size, but at over 11,000 words just for the docs on cropping, ImageMagick is complicated to say the least and overkill for most tasks (full disclosure, we use ImageMagick and use some of its options in our own backend, but we have a team of 20 developers building Filestack and you probably don’t).

How to resize any image with just an url

In today’s post, I will show you how to automatically resize, fit, and align any image stored on an object store like AWS s3, Azure Blog Storage, or Google Cloud storage.  All the examples with use images stored on s3, but all the examples will work with any image stored on any internet-accessible storage.  Basically all you need to have in order to do everything in this post is an image stored on a publicly accessible server and a free Filestack account.

Also, while this blog with use jpg in the example, you can also automatically resize, fit, and align the following file types: png, gif, ai, psd, tiff, bmp. Let’s go!

As we’ve just seen, while there are many ways to resize, fit, and align  images, today I’ll show you how to do it using the Filestack API.  Filestack is the file uploading API designed for developers.  Creating your account takes 23 seconds and we have a Free Forever plan so you can try it to make sure we solve your problem before making a commitment.

Let’s start with an image.  I like this one.

V-J Day in Times Square picture

This image is available from wikipedia at the following url:

https://upload.wikimedia.org/wikipedia/en/9/95/Legendary_kiss_V%E2%80%93J_day_in_Times_Square_Alfred_Eisenstaedt.jpg

In order to resize, fit and align this image however I want, all I am going to do is append some simple parameters to the URL.  That’s it. No messing around with CSS.  No opening up Photoshop. No installing and configuring ImageMagick.

I’ll just take the image url that I want to transform (e.g. my S3 object url or in this case, wikipedia url), add the Filestack transformation API endpoint, an API key and the conversion parameter.

https://process.filestackapi.com/[API-key]/[Conversion-Task]/[external-url]

Let’s start by resizing to a width of 200px by adding resize=width:200 to our base url.

The whole thing will look like this:

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/https://upload.wikimedia.org/wikipedia/en/9/95/Legendary_kiss_V%E2%80%93J_day_in_Times_Square_Alfred_Eisenstaedt.jpg

Notice the image is smaller now, but the aspect ratio is preserved even though I only specifically one dimension.

V-J Day in Times Square image resize width:200

I can also set a height dimension resize=width:200,height:200

V-J Day in Times Square image resize width:200 height:200

 

We assume that most people don’t want to distort their images when resizing, so even given resize=width:200,height:200, Filestack resizes to 134×200 to preserve the aspect ratio.

If for some reason you want to distort the image, you can do that too by adding the fit:scale parameter.  So resize=width:200,height:200,fit:scale

V-J Day in Times Square image image resize distorted

 

Let’s say we don’t want to just resize, but we want to crop too.  No problem. We’ll use add the fit:crop parameter to our url:

resize=width:200,height:200,fit:crop

V-J Day in Times Square image resize crop 200x200

We even choose to crop from the left, right, top or bottom.  Let’s try from the top:

resize=width:200,height:200,fit:crop,align:top

V-J Day in Times Square image resize crop bottom align

 

And now bottom:

resize=width:200,height:200,fit:crop,align:bottom

V-J Day in Times Square image resize crop bottom align

A couple of things to note:

  • I’m doing this for free with the Filestack API.  Any Filestack account can do up to 500 file transformations per month.
  • All images are served back to the end-user via our super fast CDN
  • These are true resizes, not masks, so the image size itself is changing. You can even add a /compress task to reduce size even further using our lossless compression, so you won’t lose quality at all.

Let’s put that all together:

filestack automatic image resizing

Cool, but what about cropping, filters, facial detection…

We do that too and you can simply layer on those effects in the same way as above.  Here is a complete list of all the transformations that Filestack can do, with a link to the relevant page in documentation:

Compress
Watermark
Facial Detection
Crop
Rotate
Border and Effects
Filters
Collage
Image Enhancements
URL Screenshot
Image to ASCII
File type conversions
Zip

I hope that this has given you a task of how you can use Filestack to automatically automatically resize, fit, and align any image.

Michael @ Filestack

 

P.S. Remember the example from Stackoverflow we started the post with?  The user wanted to crop a 800×600 image down to 200×100 but preserve the aspect ratio.  Here it is, just using url transformations

resize=width:200/crop=d:[0,25,200,100]

solution to https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped