Smart CDN

A Content Delivery Network (CDN) is the best place to host content. Videos, images, and any other type of static deliverable can be cached and distributed globally to keep latencies low. If someone in Tokyo requests your photo, they will receive it from a Tokyo datacenter. Faster and cheaper.

But a CDN is typically "dumb", basically just copying a file. What if you could dynamically change the file right before it is served? You could resize images to the perfect size for the device that is consuming it, on the fly.

This is what we call a Smart CDN. With Transloadit's special domain, tlcdn.com, you can have instant URL-based transformations of your media.

Here’s what’s under the hood:

{
  "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"
    }
  }
}

How to use it

1. Save the original files in your own cloud storage. Since we are on AWS, S3 buckets will have the lowest latency, but any cloud bucket will work.
2. Create a Template with all needed importing and transcoding Instructions, and adjust their settings with variables that are populated via query parameters.
3. Refer to your Workspace and Template names in the URL, request a file and pass the parameters that will determine the transformation.

Versatile

With the ability to leverage Transloadit’s Templates with tlcdn.com, you can embed complex workflows into transformations. This lets you only expose a few dials to the outside world as query parameters, making URLs short and secure. At launch, URL-based transformations support:

• Workflows with up to 3 Robots combined
• All importing and exporting Robots
• 🤖/file/serve to customize delivery options
• Triggering other transcodes or background jobs to move data around when a URL is requested
• Transformations from these Robots:
  
  • /audio/artwork
  • /document/convert
  • /document/merge
  • /document/ocr
  • /document/thumbs
  • /file/decompress
  • /file/filter
  • /file/preview
  • /file/read
  • /file/serve
  • /file/verify
  • /html/convert
  • /image/describe
  • /image/facedetect
  • /image/merge
  • /image/ocr
  • /image/optimize
  • /image/resize
  • /meta/write
  • /script/run
  • /speech/transcribe
  • /text/speak
  • /text/translate

Performant

Our Smart CDN consists of a global network of servers (the CDN part), and a glue layer that forwards requests to our API's Assembly Engine, in order to transform media in realtime (the Smart part). The transformed results are cached, so that for the next 30 days (configurable), they do not need to be re-processed, but are served directly from a datacenter close to the end-user, saving time and encoding budget.

Loading time: CDN vs. API requests

We measured the loading time of the demo image of a canoe, shown above.

Our CDN is based on AWS CloudFront. Its global network continues to grow, and now includes well over 200 Points of Presence.

Affordable

While our Smart CDN is not positioned as the cheapest CDN on the market, it is powerful and can help you save development, integration, and maintenance time. With our Smart CDN, there is no need to write code in the form of SDKs, or to glue together many moving parts, roll out deploys or update apps in app stores. Our Smart CDN seamlessly integrates into Transloadit’s powerful encoding backend, yet is superbly easy to use.

If you can add an <img> tag, you’re ready to start using Transloadit's Smart CDN. Any fine-tuning of conversion parameters can be done in your Template.

<img
  alt="Thumbnail of my canoe trip"
  src="https://my-app.tlcdn.com/resize-img/canoe.jpg?w=400"
>

Up to 90% bandwidth reduction can be achieved by smart global caching and delivering photos and videos that are optimal for the device they are displayed on. Don’t waste a single byte on something that does not achieve higher display quality on the device. Besides cutting costs, smart global caching also helps you decimate your time to market.

Secure

DDoS Protection – customers are automatically protected against Distributed Denial of Service (DDoS), including the 2018 1.4 Tbps memcached reflection attack in 2018.

Signature Authentication – You can leverage Signature Authentication to avoid abuse of our encoding platform. Below is a quick Node.js example, but there are examples for other languages as well.

const crypto = require('node:crypto')

export function signedSmartCDNUrl(workspaceSlug, templateSlug, inputField, params = {}) {
  const AUTH_KEY = 'YOUR_TRANSLOADIT_KEY'
  const AUTH_SECRET = 'YOUR_TRANSLOADIT_SECRET'

  const encodedWorkspaceSlug = encodeURIComponent(workspaceSlug)
  const encodedTemplateSlug = encodeURIComponent(templateSlug)
  const encodedInputField = encodeURIComponent(inputField)

  const queryParams = new URLSearchParams(params)
  queryParams.set('auth_key', AUTH_KEY)
  queryParams.set('exp', `${Date.now() + 1 * 60 * 60 * 1000}`) // 1 hour
  queryParams.sort()

  const stringToSign = `${encodedWorkspaceSlug}/${encodedTemplateSlug}/${encodedInputField}?${queryParams}`
  const algorithm = 'sha256'
  const signature = crypto.createHmac(algorithm, AUTH_SECRET).update(stringToSign).digest('hex')

  const signedUrl = `https://${encodedWorkspaceSlug}.tlcdn.com/${encodedTemplateSlug}/${encodedInputField}?${queryParams}&sig=${algorithm}:${signature}`
  return signedUrl
}

// Example usage, which produces the following URL
// https://my-workspace.tlcdn.com/my-template/userA%2Fprofile.png?auth_key=YOUR_TRANSLOADIT_KEY&exp=1728925704720&height=100&width=100&sig=sha256:9d2dcf63600e454af9df15097e2a7c456e305c8e5c21e5abba61afe8e27e2556
const url = signedSmartCDNUrl('my-workspace', 'my-template', 'userA/profile.png', {
height: 100,
width: 100,
})
console.log(url)