- Content Delivery Hub nimmt Ihnen die Arbeit bei der Erstellung von Bildern in verschiedenen Formaten für Ihre Website ab.
- Größe, Zuschnitt und Dateiformat können leicht über einfache Parameter in der Bild-Url angepasst werden.
- Sobald eine Bildvariante einmal erstellt ist, wird sie im Cache gespeichert, was den Ladevorgang noch einmal beschleuingt
- Hier zeigen wir Ihnen einige Beispiele von Bildumwandlungen, die mit dem Content Delivery Hub möglich sind.
Parameter
size = 400(kleiner Anfangsbuchstabe: Das Bild wird in eine Boundingbox der angegebenen Größe eingepasst)
format = webp(Bei automatischem Cropping ist nur webp als Format möglich, der Parameter kann auch weggelassen werden)
Parameter
Size = 300(großer Anfangsbuchstabe: Das Bild wird in der angegebenen Größe quadratisch beschnitten)
format = webp(Bei automatischem Cropping ist nur webp als Format möglich, der Parameter kann auch weggelassen werden)
Parameter
width = 400
height = 600(beide mit kleinem Anfangsbuchstaben: Das Bild wird in eine Boundingbox der angegebenen Größe eingepasst)
format = webp(Bei automatischem Cropping ist nur webp als Format möglich, der Parameter kann auch weggelassen werden)
Parameter
Width = 500
Height = 250(beide mit großerm Anfangsbuchstaben: Das Bild wird in der angegebenen Größe beschnitten)
format = webp(Bei automatischem Cropping ist nur webp als Format möglich, der Parameter kann auch weggelassen werden)
Vorschau
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/size=300;format=webp
Verkleinerung mit Original Größenverhältnis
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Width=400;Height=200;format=webp
Automatischer Beschnitt ohne Gravity
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=north;Width=400;Height=200;format=webp
Automatischer Beschnitt mit Gravity = north
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=south;Width=400;Height=200;format=webp
Automatischer Beschnitt mit Gravity = south
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=auto;Width=400;Height=200;format=webp
Automatischer Beschnitt mit Gravity = auto
Parameter
size = 400(kleiner Anfangsbuchstabe: Das Bild wird in eine Boundingbox der angegebenen Größe eingepasst)
cropLeft = 470
cropTop = 320
cropWidth = 800
cropHeight = 800
format = webp
Vorschau
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=400;cropLeft=470;cropTop=320;cropWidth=800;cropHeight=800;format=webp
Parameter
Responsive Design mit Image Source Set
size = 700(Mittlere Größe und als Portraitformat zugeschnitten für einen Viewport von unter 1100px)
size = 700(Mittlere Größe für einen Viewport von 1100px bis 1300px)
size = 900(Große Größe für einen Viewport von über 1300px)
format = webp
Vorschau
Url i
Verändern Sie die Fensterbreite um die verschiedenen Bildvarianten anzusehen
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=700;cropLeft=750;cropTop=420;cropWidth=400;cropHeight=600format=webp
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=700;format=webp
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=900;format=webp
