How do I set up the creoline CDN for my own project?
Prerequisites
- Active CDN resource
- Original images publicly accessible via HTTP / HTTPS
Installation
To set up the creoline Content Delivery Network, the asset URL used on the website to load external static content must be replaced by the CDN-specific domain.
Example
If you operate a website under creoline-demo.com, for example, and external images are loaded under the identical domain, e.g. creoline-demo.com/img/example.png, the target server must be aligned to this domain accordingly.
You can then adjust your asset domain, which is used to load external resources, accordingly.
# Implementation of graphics without CDN
<img src="https://creoline-demo.com/img/example.png">
# Your domain ---^^^^^^^^^^^^^^^^^^
# Implementation of graphics with the CDN
<img src="https://demo.cstatic.com/img/example.png">
# CDN domain -----^^^^^^^^^^^^^^^^In this example, the target server of the CDN resource creoline-demo.com should be configured. As soon as HTTP requests are sent to demo.cstatic.com, our CDN technology forwards the request to your target server. Our CDN then downloads the original image from your destination server and performs the supported compression on-the-fly based on the client's original HTTP request. The result is then delivered to the client and stored in the internal CDN cache so that no further HTTP requests need to be sent to your target server for future requests of the identical URL.
Advantages:
- You do not have to maintain images in two different locations; your web server retains data sovereignty
- The CDN can be activated and deactivated at any time
- You do not have to generate different thumbnail / preview variants. (PNG / WebP / AVIF)
- Your web server only has to deliver static content to the CDN, which significantly reduces the load on the web server
Thumbnail generation via rendering API
If you need thumbnails for your project, you can use the Rendering API. Please make sure that the Rendering API option is activated in the settings of your CDN resource.
You can then implement the desired parameters for automatic resizing of the graphics in the templates of your project.
Example - Reduction of the image width to 200 pixels, taking into account the aspect ratio:
# Image size reduced to: 200 x 200
https://assets.cstatic.io/img/cdn/example-resize.jpg?w=200All options of our rendering API can be found in the help center article Rendering API.