Wie richte ich das creoline CDN für ein eigenes Projekt ein?

Voraussetzungen

Aktive CDN-Ressource
Original-Bilder öffentlich abrufbar via HTTP / HTTPS

Installation

Für die Einrichtung des creoline Content Delivery Network muss die Asset-URL, die auf der Webseite zum Laden von externen statischen Inhalten verwendet wird, durch die CDN-spezifische Domain ausgetauscht werden.

Beispiel

Sofern Sie eine Internetseite unter beispielsweise creoline-demo.com betreiben und externe Bilder unter der identischen Domain geladen werden, z.B. creoline-demo.com/img/example.png, muss der Ziel-Server entsprechend zu dieser Domain ausgerichtet werden.

Anschließend können Sie Ihre Asset-Domain, die zum Laden externer Ressourcen verwendet wird entsprechend anpassen.

# Implementierung von Grafiken ohne CDN
<img src="https://creoline-demo.com/img/example.png">
# Ihre Domain ---^^^^^^^^^^^^^^^^^^

# Implementierung von Grafiken mit dem CDN
<img src="https://demo.cstatic.com/img/example.png">
# CDN Domain -----^^^^^^^^^^^^^^^^

In diesem Beispiel müsste als Ziel-Server der CDN-Ressource creoline-demo.com konfiguriert werden. Sobald HTTP-Anfragen an demo.cstatic.com gesendet werden, wird die Anfrage durch unsere CDN-Technologie an Ihren Ziel-Server weitergeleitet. Unser CDN lädt anschließend das Original-Bild von Ihrem Ziel-Server herunter und führt basierend auf der Original-HTTP-Anfrage des Clients die unterstützte Komprimierung On-the-fly durch. Das Ergebnis wird anschließend an den Client ausgeliefert und im internen CDN-Cache abgelegt, sodass zukünftige Aufrufe der identischen URL keine weiteren HTTP-Anfragen an Ihren Ziel-Server gesendet werden müssen.

Vorteile:

Sie müssen Bilder nicht an zwei unterschiedlichen Orten pflegen, sondern Ihr Webserver behält die Datenhoheit
Das CDN kann jederzeit aktiviert und deaktiviert werden
Sie müssen keine unterschiedlichen Thumbnail / Vorschau-Varianten generieren. (PNG / WebP / AVIF)
Ihr Webserver muss statische Inhalte nur noch an das CDN ausliefern, sodass der Webserver deutlich entlastet wird

Thumbnail-Generierung via Rendering API

Sofern Sie für Ihr Projekt Thumbnails benötigen, können Sie die Rendering API verwenden. Bitte stellen Sie sicher, dass die Option Rendering-API in den Einstellungen Ihrer CDN Ressource aktiviert ist.

Anschließend können Sie in den Templates Ihres Projektes die gewünschten Parameter zum automatischen Resizing der Grafiken implementieren.

Beispiel - Reduzierung der Bildbreite auf 200 Pixel unter Berücksichtigung des Seitenverhältnisses:

# Bildgröße reduziert auf: 200 x 200
https://assets.cstatic.io/img/cdn/example-resize.jpg?w=200

Alle Optionen unserer Rendering API finden Sie in dem Hilfecenter-Artikel Rendering API.