Easy Image Resizing with Filestack URL Parameters

 

Resizing images like PNGs, JPGs or GIFs is one of the most common things we have to do as developers. You may 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 it’s 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 still be downloading the entire 800×600 image. If this is an 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 its slow

Photoshop “just works” but a) it’s a really expensive way to just crop an 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 a URL

In today’s post, we’ll show you how to automatically resize, fit, and align any image stored on an object store like AWS s3, Azure Blob 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 Filestack Free Account.

Also, while this blog will use JPG in the example, you can also automatically resize, fit, and align the following file types: PNG, GIF, ai, psd, tiff and bmp.

As we’ve just seen, while there are many ways to resize, fit, and align images, today we’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 Account so you can try it to make sure we solve your problem before making a commitment.

Let’s start with an image like the one below.

 

In order to resize, fit and align this image however we want, all we’re 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.

We’ll just take the image URL that we 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://cdn.filestackcontent.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://cdn.filestackcontent.com/ARVNFDkIFTCy2nOXvYSoLz/output=secure:true/security=policy:eyJleHBpcnkiOiAxNTYwNTUwMjg1LCAiY2FsbCI6IFsicmVhZCIsICJzdGF0IiwgImNvbnZlcnQiLCAicGljayIsICJzdG9yZSJdfQ==,signature:5c96c569ede1a84d5e7b4f996f9b7083b377f27248032a48c3b6b084336def41/RH0aePntTSa8sjSmSDbZ

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

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

 

We’ll 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

 

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

 

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

 

And now bottom:

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

A couple of things to note:

• We’re able to do this on the Free Account with the Filestack API
• 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:

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, you can find our more about these transformation in our documentation.

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

We hope that this has given you a task of how you can use Filestack to automatically resize, fit, and align any image. Sign up for Filestack for free today!

P.S: Looking for guides on how to use Filestack for your tech stack? Check out these guides on how to handle a PHP file upload or AJAX file upload using Filestack.

Read More →