CDN Image Optimizer – Afbeeldingen bewerken via de URL

Met de CDN Image Optimizer is het vrij eenvoudig om afbeeldingen te bewerken voordat ze worden gepresenteerd. De output van de afbeelding kan via de URL parameters aangepast worden. Zie hieronder de aanpassingsmogelijkheden.

 

  1. Afbeeldingsbreedte aanpassen
  2. Thumbnail maken
  3. Afbeelding croppen
  4. Afbeeldingskwaliteit aanpassen
  5. Blur toevoegen
  6. Origineel afbeeldingsformaat behouden
  7. URL signing

 

1.

Afbeeldingsbreedte aanpassen

Om een afbeelding bij te snijden, naar een breedte/width van bijvoorbeeld 400 pixels, gebruik dan:

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

—-

De breedte van de afbeelding is nu vastgelegd en de hoogte is variabel. Zie als voorbeeld onderstaande afbeelding:

 

 

Terug naar het begin van de pagina.

 

2.

Thumbnail maken

Voor het inladen van een vierkante afbeelding gebruik je:

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

—-

De afbeelding is nu passend gemaakt. De eventuele zijkanten zijn opgevuld met witruimte net als bij de onderstaande afbeelding:

 

Terug naar het begin van de pagina.

 

3.

Afbeelding croppen

Om een vierkante uitsnede uit een afbeelding in te laden stuur je een crop parameter mee zoals in het voorbeeld hieronder:

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

—-

Nu wordt de grootst mogelijke uitsnede uit de afbeelding gehaald. Er wordt zo min mogelijk afgesneden om de afbeelding vierkant te krijgen, net als bij het onderstaande voorbeeld.

 

Terug naar het begin van de pagina.

 

4.

Afbeeldingskwaliteit aanpassen

Om de kwaliteit van de afbeelding aan te passen en de grootte in bytes, kan je de Q parameter gebruiken zoals in het voorbeeld hieronder:

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

—-

De afbeeldingskwaliteit is nu teruggebracht naar 10% net als bij de onderstaande afbeelding:

Terug naar het begin van de pagina.

 

 

5.

Blur toevoegen

Om blur aan de afbeelding toe te voegen kan je de B gebruiken zoals in het onderstaande voorbeeld:

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

—-

De afbeelding heeft nu blur net als de onderstaande afbeelding. Hiervoor kunt u het beste een waarde van 0 t/m 3 aanhouden.

Terug naar het begin van de pagina.

 

 

6.

Origineel afbeeldingsformaat behouden

Om het originele formaat te behouden gebruik je de S zoals in het onderstaande voorbeeld:

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

—-

De afbeelding heeft nu zijn originele formaat behouden zoals hieronder:

Terug naar het begin van de pagina.

 

 

7.

URL signing

Het is mogelijk om externe afbeeldingen te optimaliseren en te gebruiken binnen uw website(s). Er dient hiervoor gebruik te worden gemaakt van zogenoemde URL-signing welke middels een unieke sleutel gekoppeld is aan uw Image Optimizer Platform. Deze unieke sleutel zal worden gebruikt om een handtekening te maken welke specifiek geldt voor één afbeelding (URL).

Stap 1
Je ontvangt van ons de unieke sleutel en zien er ongeveer als volgt uit: f61739f5a93ddab5da5104cf3bf3367815ab1db7654a8c47e521a5beef7fc

Stap 2
In dit voorbeeld gaan we https://externdomein.com/images/logo.png optimaliseren. Dit doe je door een sha256 hash te maken van de URL van de afbeelding, gecombineerd met een . (punt) en tot slot de handtekening met uw unieke sleutel.
In bash:
echo -n https://externdomein.com/images/logo.png.f61739f5a93ddab5da5104cf3bf3367815ab1db7654a8c47e521a5beef7fc | shasum -a 256

Stap 3
Gebruik de resulterende sleutel in URL om de afbeelding te laden:
https://uwcdndomein.com/mijnproxy/s/#sleutel#/https://externdomein.com/images/logo.png

Deze url kunt u aanvullen met de optimalisatie parameters zoals in dit document beschreven.

Terug naar het begin van de pagina.