CDN Image Optimizer – Edit images via the URL

With the CDN Image Optimizer, it is quite easy to edit images before they are presented. The output of the image can be adjusted via de URL parameters. See the customization options below.

 

  1. Adjust image width
    Create thumbnail
    Crop image
    Adjust image quality
    Add Blur
    Preserve original image size
    URL signing

 

1.

Afbeeldingsbreedte aanpassen

To crop an image to a width of, for example, 400 pixels, use:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400

—-

The width of the image is now fixed and the height is variable. As an example, see the image below: Back to the top of the page.

 

Back to the beginning of the page.

 

2.

Create thumbnail

To load a square image, use:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400&h=400

—-

The image is now made to fit. Any sides are filled with white space just like in the image below:

 

Back to the beginning of the page.

 

3.

Crop image

To load a square crop from an image, send a crop parameter as in the example below:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400&h=400&c=1

—-

Now the largest possible crop is removed from the image. As little as possible is cut off to square the image, just like the example below.

 

Back to the beginning of the page.

 

4.

Adjust image quality

To adjust the quality of the image and the size in bytes, you can use the Q parameter as in the example below:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400&q=10

—-

The image quality has now been reduced to 10% as with the image below:

 

Back to the beginning of the page.

 

5.

Add blur

To add blur to the image you can use the B as in the example below:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400&b=1

—-

The image now has blur just like the image below. For this, it is best to keep a value of 0 to 3.

 

Back to the beginning of the page.

 

 

6.

Preserve original image size

To keep the original size, use the S as in the example below:

https://www.yourdomainname/content/images/some/42025/1624397443.7077-12_5.jpg?w=400&s=1

—-

The image has now retained its original size as below:

Back to the beginning of the page.

 

 

7.

URL signing

It is possible to optimize and use external images within your website(s). For this purpose, so-called URL signing must be used, which is linked to your Image Optimizer Platform by means of a unique key. This unique key will be used to create a signature that is specific to one image (URL).

Step 1
You will receive the unique key from us and look something like this: f61739f5a93ddab5da5104cf3bf3367815ab1db7654a8c47e521a5beef7fc

Step 2

In this example, we’re going to optimize https://externdomein.com/images/logo.png. You do this by creating a Sha256hash from the URL of the image, combined with a . (period) and finally the signature with your unique key.

In bash:
echo -n https://externdomein.com/images/logo.png.f61739f5a93ddab5da5104cf3bf3367815ab1db7654a8c47e521a5beef7fc | shasum -a 256

Step 3

Use the resulting key in URL to load the image:
https://yourcdndomain.com/mijnproxy/s/#sleutel#/https://externdomein.com/images/logo.png

You can supplement this URL with the optimization parameters as described in this document.

Back to the beginning of the page.