• Content Delivery Hub does all the work for you by quickly creating variations of your images in the formats needed for your website.
  • Size, cropping and file format can easily be adjusted by setting simple parameters in the image URL.
  • Once an image variation is created it is cached for future use, speeding up the loading process even more.
  • Below we will show you some examples of the many image transformations, which are possible with the Content Delivery Hub.
Thumbnail Crop MainImage

Parameters

size = 400(lowercase spelling: bounding box containing the image)

format = webp(when using automatic cropping only webp format is possible, the parameter does not need to be set explicitly)

Preview

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/4be365162b9e421487d044b166f96214/p/size=400;format=webp

size=400

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=400;format=webp

size=400

Parameters

Size = 300(uppercase spelling: image will be cropped to a square of Size)

format = webp(when using automatic cropping only webp format is possible, the parameter does not need to be set explicitly)

Preview

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/4be365162b9e421487d044b166f96214/p/Size=300;format=webp

Size=300

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/Size=300;format=webp

Size=300

Parameters

width = 400

height = 600(both lowercase spelling: bounding box containing the image)

format = webp(when using automatic cropping only webp format is possible, the parameter does not need to be set explicitly)

Preview

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/4be365162b9e421487d044b166f96214/p/width=400;height=600;format=webp

width=400, height=600

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/width=400;height=600;format=webp

width=400, height=600

Parameters

Width = 500

Height = 250(both uppercase spelling: image will be cropped to Size)

format = webp(when using automatic cropping only webp format is possible, the parameter does not need to be set explicitly)

Preview

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/4be365162b9e421487d044b166f96214/p/Width=500;Height=250;format=webp

Width=500, Height=250

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/Width=500;Height=250;format=webp

Width=500, Height=250

Parameters

Width = 400

Height = 250

Size = 400

Gravity = none / north / south / auto i

format = webp

Preview

Url i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/size=300;format=webp

Smaller size with original aspect ratio

size=300, no gravity

Url i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Width=400;Height=200;format=webp

Automatic cropping without gravity

Width=400, Height=200, no gravity

Url i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=north;Width=400;Height=200;format=webp

Automatic cropping with gravity = north

Gravity=north, Width=400, Height=200

Url i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=south;Width=400;Height=200;format=webp

Automatic cropping with gravity = south

Gravity=south, Width=400, Height=200

Url i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Gravity=auto;Width=400;Height=200;format=webp

Automatic cropping with gravity = auto

Gravity=auto, Width=400, Height=200

Parameters

size = 400(lowercase spelling: bounding box containing the image)

cropLeft = 470

cropTop = 320

cropWidth = 800

cropHeight = 800

format = png

Vorschau

URL i

https://demo.cdn.contentdeliveryhub.net/api/data/std/images/622a56e977744dc1b6d1cee86c02d067/p/size=400cropLeft=470;cropTop=320;cropWidth=800;cropHeight=800;format=png

Zuschnitt 400px x 400px

Parameters

Responsive Design with image source set

size = 700(medium size and cropped to vertical size for under 1100px viewport)

size = 700(medium size for 1100px to 1300px viewport)

size = 900(large size for over 1300px viewport)

format = webp

Preview

URL i

To see the image variations please adjust the window width

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

Viewport max 1100px - size = 700
cropped to vertical
Viewport max 1300px - size = 700 Viewport over 1300px - size = 900 Viewport over 1300px - size=900

Questions?

Email us and we‘ll get back to you promptly

Footer Image

Content Delivery Hub –

All images everywhere