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 TLCDN.

Getting Started with TLCDN

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 a cache of content closer to the user, CDNs help to reduce latency and improve website performance.

What is the TLCDN?

The TLCDN, short for Transloadit CDN, is a smart CDN powered by Transloadit, using AWS CloudFront infrastructure. The 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.

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 use the TLCDN?

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

  1. Realtime transformations: TLCDN lets you perform file transformations in realtime, without having to wait for long encoding times
  2. On-the-fly parameters: Change transformation settings directly from the URL, letting you quickly experiment with different looks, without having to navigate back-and-forth to the Template Editor.

How does the TLCDN work?

Two Robots work hand in hand to deliver and serve content: /file/serve and /tlcdn/deliver. However, only /file/serve is included in the Assembly Instructions, allowing you to specify which Steps you want to deliver the results from. It then makes sure that the media created by our powerful conversion API is returned as a response to the HTTP request.

It could return this directly to the user's browser, but that means each request will mean a new conversion. For busy sites, this will become inefficient and costly.

So, ideally we put a CDN in between the browser and the //file/serve Robot, so that an encoding result is cached, and can be served many times to different users. This is not only faster, but far more cost-efficient.

Transloadit can transparently handle all this for you with the /tlcdn/deliver Robot. It is implicitly used when requests are made to tldcdn.com. It sets up AWS CloudFront, tracks usage, and will be the Robot that shows up on your invoice for any consumed bandwidth from the cache to your end-users.

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

How do I use the TLCDN?

To get started serving content with the TLCDN, we first need to create a Template to define the transformations we want to perform. Head over to the Transloadit Console and create a 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"
    }
  }
}

As part of our Assembly Instructions, we define two fields: input, and w. Both allow us to specify parameters on a per-URL basis, so we can use the same Template in several different ways. It is also important to note that input is a special implicit parameter, meaning that its value isn't defined by a query parameter, but instead by the destination of the URL.

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

To add the content to your site, simply include it as part of an image tag:

<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."
/>

It's as simple as that! The content on your site should appear, and you can programmatically change the width of the image, whilst preserving its aspect ratio. You don't have to worry about any of the infrastructure, as Transloadit will handle 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.