- 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.
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)
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)
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)
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)
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
Url i
https://demo.cdn.contentdeliveryhub.net/api/data/std/images/357e8c69ad4b42f5b8c7d1861b3f3baa/p/Width=400;Height=200;format=webp
Automatic cropping without 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
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
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
Parameters
size = 400(lowercase spelling: bounding box containing the image)
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
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
