Smart CDN
Traditional Content Delivery Networks (CDN) distributes your media globally, serving files from
the datacenter closest to your users. This means faster load times and lower costs. Our Smart CDN
goes further - it can transform your media on-the-fly based on URL query parameters through our
tlcdn.com
domain.
This allows you to save on development and integration time and reduce time-to-market. Also instead of preprocessing your entire media library, you only pay for the transformations your users actually requested on your website or app.
See it in action
Move the slider below the image to have to automatically resize the image to the desired size. There is no caching involved - these are actual API requests.
How it works
- 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.
- Create a Template like the one below with all the needed importing and transcoding Instructions, and adjust their settings with variables that are populated via query parameters.
-
Build file URLs by refering to your
Workspace
and
Template
names, the
file path
and pass the
parameters
that will determine the transformation:
https://my-workspace.tlcdn.com/my-template/path/to/file/on/storage.png?w=400 - Use these URLs in your HTML, and Transloadit will automatically transform the corresponding file on the fly. Caching and delivery is automatically taken care of and resizes are only triggered if you change the URL parameters.
Your Template
{
"steps": {
"imported": {
"robot": "/s3/import",
"credentials": "my-amazon-s3-bucket-credentials",
"path":
"${fields.input}"
},
"resized": {
"use": "imported",
"robot": "/image/resize",
"width":
"${fields.w}"
"resize_strategy": "fit"
},
"served": {
"use":
"resized"
,
"robot": "/file/serve"
}
}
}
How to handle multiple regions
Our Smart CDN caches globally, but the initial transform is fastest when source files are in an S3 bucket that is close to where the end-user is that triggers the request that causes the transform.
If you have many unique transforms and want to save ~700ms on this request time, you can set up buckets in each of our 3 regions. Then you set up credentials in your Transloadit workspace for each of those naming them:
- "my-amazon-s3-bucket-credentials-in-us-east-1"
- "my-amazon-s3-bucket-credentials-in-eu-west-1"
- "my-amazon-s3-bucket-credentials-in-ap-southeast-1"
You can then refer to them dynamically in your Template like so:
"credentials": "my-amazon-s3-bucket-credentials-in-${assembly.region}"
.
Prime use case: Preview images for any file type
Our powerful 🤖/file/preview Robot can generate meaningful previews for virtually any file type. For images, it creates optimized thumbnails (even supporting RAW formats). Videos are transformed into frame extracts or short clips, audio files display their embedded artwork or waveform visualizations, documents show their first page, and web pages are converted into screenshots. Even for archives and other binary files, the Robot provides type-specific icons.
The best part? It's smart about resources - for example, it doesn't need to download an entire 4GB video just to create a 20KB thumbnail, making it both fast and cost-effective. Since this is all coming from just one Robot, your Template is also going to be very short and manageable. Learn more
More use cases
Here are some more examples of how you could leverage our Smart CDN:
- Responsive images for any device - dynamically resize images based on the device type, screen size, or user preferences.
- Digital Rights Management (DRM) - add dynamic watermarks based on user licenses or ownership. Obtain auth tokens for your content on the fly based on user identifiers passed in the URL.
- AI enhanced image processing - Use AI to intelligently crop images around faces or important subjects, perfect for profile pictures or product thumbnails.
- Content moderation filters - blur sensitive content on the fly without preprocessing your entire media library or exposing URLs to your original, unfiltered files.
- Localized image texts or video subtitles - show texts on media files in the language of the user, but only on request. Save costs by not having to preprocess all files for all languages with complex workflows and scripts.
SmartCDN Performance
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.
SmartCDN Affordability
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.
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. This also helps you decimate your time to market.
SmartCDN Security
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)
Food for thought
You can also use our SmartCDN to run other transformations in the background. For example you could show a preview image for a video and also trigger its transcoding pipeline in the background at the same time - the possibilities are nearly endless.
Related blog posts
- How WeTransfer elevated file previews with Transloadit's Smart CDN May 23, 2024
- Reduce costs & latency with Transloadit's Smart CDN file previews June 17, 2024
- Generating meaningful file previews January 14, 2025