Web Tools #558 - ImageKit Review, JS Libraries, Git/CLI Tools, Jamstack

The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help you build stunning visual experiences.

If you’ve been a long-time reader of this newsletter, then you might already be familiar with this week’s featured product: ImageKit is a developer platform that allows you to do real-time media transformations and optimizations. I did a full review of ImageKit’s basic features more than two years ago, which you can read in the newsletter archives here.

For this week’s review, I’m going to focus on ImageKit’s Video API. This feature is developer-friendly and can be a catalyst for your product’s engagement and conversions, providing a single source for a wide variety of transformed media files. Let’s take a look at how it can be used.

ImageKit’s Video API is based on a series of URL parameters that allow you to easily manipulate videos in real time. Note the URL structure shown in the image below.

The example URL includes a basic path along with the file name at the end of the URL. But notice the transformation parameters. The example video URL without transformations is as follows:

https://ik.imagekit.io/demo/sample-video.mp4

But with transformations, the URL will look like this if you’re using path parameters:

https://ik.imagekit.io/demo/tr:w-300,h-300/sample-video.mp4

If you’re using query string parameters, the URL is constructed like this:

https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200

This is a powerful way to transform your media content because the original video stays intact and the transformations are added optionally as you need them.

Video Resizing
The ImageKit docs have a comprehensive reference that describes all of the available video transformations, with demos and example syntax for the transformations.

To demonstrate with a live transformation, the example video from above (which is naturally 1280x720) can be modified on-the-fly by applying the following transformations:

• Crop the video to 400x300
• Maintain the aspect ratio
• Set the focus point

The transformed URL params look like this (click to view the transformed video):

tr:w-400,h-300,c-maintain_ratio,fo-left

Notice use of the fo-left parameter, which tells the cropping engine where to place the focus. In this case, I’ve chosen “left” as a relative crop, that is, the focus is on the left side of the image. Other focus settings include center, top, right, top_left, top_right, bottom_left, and bottom_right.

It should be noted that some parameters don’t work on their own; they’re designed to be used along with others. For example the fo-* (focus) parameters need to be used along with cm-pad_resize, c-maintain_ratio, or cm-extract – otherwise they won’t have any effect.

Video Overlays
Another useful transformation that ImageKit allows is the ability to do video overlays. This can be used for adding a watermark, instructional text, captions, and more.

I uploaded my own video and added my newsletter’s logo using the following URL params:

tr:l-image,i-wtwlogo_qnqiN0CWO.png,l-end

I can also change the transformation parameters to position the logo in the bottom right corner of the image using the following parameters:

tr:l-image,i-wtwlogo_qnqiN0CWO.png,lx-850,ly-530,l-end

The l-image and l-end parameters work sort of like opening and closing tags with the other parameters in between. The result is shown below.

This isn’t the most attractive example (i.e. the logo doesn’t really work well with this video as a background) but it demonstrates how simple it is to use a video and a logo to add a visual identifier that’s not intrinsically part of the original video.

In addition to adding images over videos you can also add text. Here’s a simple example where I’ve added the word “SQUIRREL” over my squirrel video:

tr:l-text,i-SQUIRREL,fs-50,co-red,l-end

Using the URL params I’ve specified the following:

• I’m overlaying text (l-text)
• What text I want to use (i-SQUIRREL)
• The font size (fs-50)
• The text color (co-red)

The docs include details on all the parameters available for overlaying text.

Other overlays that are possible using ImageKit’s Video API:

• Add video over video
• Add color blocks
• Add subtitles (e.g. using an .srt file)

When adding such overlays, you can also specify a whole slew of options on the overlays themselves, including position of the overlaid image and transformations on the image itself. This is known as layering the transformations, giving you full control over exactly what’s displayed to the user.

One thing to note is that when you’re experimenting with different transformations using a video URL, you might notice that the desired transformation doesn’t take place right away. This is due to the transformations being delivered asynchronously.

The asset is prepared when the transformation is requested and when it’s ready it will display (usually from 5 seconds up to 15 seconds, which can be changed in your settings). If the transformation isn’t ready when the video is requested, the default non-transformed version of the video will display instead.

Thumbnail Creation
Using the Video API, it’s easy to get a thumbnail or still-frame from any point in a video. To get the first frame of the video, for example, add ik-thumbnail.jpg to the end of any video URL. The end of my example video’s URL would look like this (click for full URL):

squirrel_J655PZMnK.mp4/ik-thumbnail.jpg

To get a still-frame from a certain point in a video’s duration to use as a thumbnail or for some other purpose, simply use the so (start offset) transformation parameter. Now the URL looks like this:

tr:so-20/squirrel_J655PZMnK.mp4/ik-thumbnail.jpg

My thumbnail is grabbed from the 20-second mark from the 22-second video, which you can compare to the original first-frame thumbnail. Just like any images being manipulated, you can adjust the thumbnail’s width, height, aspect ratio, etc. The full gamut of image transformations is listed in the docs.

Adaptive Bitrate Streaming
One final feature I'll discuss is the powerful way that ImageKit allows you to stream your media for different devices on different connection speeds, referred to as Adaptive Bitrate Streaming (ABS). During a stream, a client application will continuously optimize the delivered media to ensure smooth playback with minimal buffering.

For example, using the HTTP Live Streaming (HLS) protocol, the following parameters can be added to a video URL:

/ik-master.m3u8?tr=sr-240_360_480_720_1080

This generates an HLS manifest and five variants at the specified resolutions (240p, 360p, etc). This is a powerful feature for building streaming applications and similar tools that rely on smooth, uninterrupted playback.

ImageKit also supports Dynamic Adaptive Streaming over HTTP (aka "DASH"), which would look similar when represented with the API:

/ik-master.mpd?tr=sr-240_360_480_720_1080

With these streaming solutions, you can provide uninterrupted playback no matter the network conditions, bandwidth, or other constraints. You can read more about this in ImageKit's use case page covering ABS.

The docs on Video Transformations are a great place to start if you want to get familiar with all of ImageKit's Video API features. You can also check out the pricing plans. The free plan allows up to 20GB in bandwidth, 20GB of storage, unlimited requests, and unlimited image transformations. This is a great way to launch an MVP before committing to something larger.

So be sure to check out ImageKit’s Video API to see if it can fill your media transformation needs.

Now on to this week's tools!