CDNs have become a crucial part of how content is delivered online. Likewise, file transformations and transcoding are necessary parts of the content pipeline to help bring down costs. In today's blog, you'll learn how to combine the best of both worlds into a single, unified content delivery and file transformation platform with the Transloadit Smart CDN (TLCDN).

Getting started with the Transloadit Smart CDN

What is a CDN?

A CDN, or Content Delivery Network, is a globally distributed network of servers that work together to deliver content to users quickly and efficiently. By storing cached copies of content on servers geographically closer to the user, CDNs help to reduce latency and improve website performance, especially for users located far from the origin server.

What is a Smart CDN?

A Smart CDN allows for file transformations as part of the content delivery process. This way, your content is not only presented, but also transformed in real time. For example, the Transloadit Smart CDN (TLCDN) is designed to seamlessly integrate with Transloadit's existing transcoding API, offering a comprehensive solution for delivering and transforming content to users all around the world. This integration allows for on-the-fly image resizing, video transcoding, and other file transformations without the need for pre-processing or storing multiple versions of each asset.

Why would I use a CDN?

CDNs deliver the majority of online content these days, and for good reason! CDNs offer many upsides to both you and your customers, such as:

  1. Improved performance: CDNs cache content closer to users, reducing the time it takes for content to load.
  2. Scalability: CDNs can handle high volumes of traffic without impacting website performance.
  3. Reduced bandwidth cost: Due to clever caching, CDNs allow you to reduce the amount of data that needs to be sent and transcoded, lowering your bandwidth costs.
  4. Global reach: CDNs have servers distributed worldwide, ensuring fast delivery of content to users regardless of their geographical location.
  5. Reliability: CDNs offer redundancy and failover mechanisms, ensuring content remains accessible even in the event of server failures.

Why would I want to use a Smart CDN?

On top of the five benefits of a CDN listed above, the Transloadit Smart CDN lets you:

  1. Do real-time transformations: The TLCDN lets you perform file transformations in real-time, without having to wait for long encoding times.
  2. Adjust parameters on the fly: Change transformation settings directly from the URL in order to quickly experiment with different looks, without having to navigate back and forth to the Template Editor.
  3. Cache transformation results: Save yourself the cost of repeated transformations, as the TLCDN automatically caches the results from transformations. If the same transformation is requested, the previously generated resource can be served.

How does the TLCDN work?

Two Robots work hand in hand to deliver and serve content: /file/serve and /tlcdn/deliver.

The /file/serve Robot is included in the Assembly Instructions, allowing you to specify which Steps you want to deliver results from. It ensures that the media created by our powerful conversion API is returned as a response to the HTTP request.

While it could return this directly to the user's browser, doing so would mean a new conversion for each request, which becomes inefficient and costly for busy sites.

To optimize this process, we place a CDN between the browser and the /file/serve Robot. This allows an encoding result to be cached and served multiple times to different users, making the process not only faster but also far more cost-efficient.

Transloadit handles this entire process transparently for you using the /tlcdn/deliver Robot. This Robot is implicitly used when requests are made to tlcdn.com. It sets up AWS CloudFront, tracks usage, and appears on your invoice for any consumed bandwidth from the cache to your end users. This seamless integration ensures optimal performance and cost-efficiency for your content delivery needs.

A world map showing how content is distributed across the CDN.

How do I use the TLCDN?

To begin serving content with the TLCDN, you first need to create a Template that defines the transformations you want to perform. Navigate to the Transloadit Console and create a new Template with a memorable name. Then, add the following Assembly Instructions:

{
  "steps": {
    "imported": {
      "robot": "/s3/import",
      "credentials": "my-s3-credentials",
      "path": "/images/${fields.input}"
    },
    "resized": {
      "use": "imported",
      "robot": "/image/resize",
      "width": "${fields.w}"
    },
    "served": {
      "use": "resized",
      "robot": "/file/serve"
    }
  }
}

In these Assembly Instructions, we define two fields: input and w. These fields allow you to specify parameters on a per-URL basis, enabling the use of the same Template in various ways. It's important to note that input is a special implicit parameter; its value isn't defined by a query parameter but instead by the destination of the URL. The w parameter, on the other hand, is used to specify the desired width of the resized image.

Now, in order to use the Template, we need to craft a URL following the format below.

https://WORKSPACE_NAME.tlcdn.com/TEMPLATE_NAME/FIELDS.INPUT?EXTRA_FIELDS

The URL can optionally be extended with an expiration time and signature to prevent outsiders from tampering with the URL and its parameters. For more details on how to generate a correctly hashed signature, take a look at our detailed guide.

To add the content to your site, simply include it as part of an image tag. Here's an example that uses the TLCDN to serve and resize an image:

<img
  src="https://my-app.tlcdn.com/resize-img/canoe.jpg?w=730"
  alt="A car with a canoe on top in a canyon environment."
/>

In this example, my-app is your workspace name, resize-img is the name of your Template, and canoe.jpg is the input file. The w=730 query parameter specifies the desired width for the resized image. The content on your site should appear, and you can programmatically change the width of the image while preserving its aspect ratio. You don't have to worry about any of the infrastructure, as Transloadit handles it all for you, saving you precious development hours.

You can try TLCDN file transformations in the demo below, by simply changing the width value using the slider. Then, try setting the slider to the same width value twice, and notice how a cached version of the file is fetched within only a few milliseconds. Since the transformation has already been performed once, our CDN avoids incurring additional costs and instead simply serves the cached copy – saving you money and delivering the content quicker.

 
 

To start integrating the TLCDN into your product today, make sure to sign up for a Transloadit plan, as the TLCDN is currently only available for paid plans.