# Fonctionnement

### Introduction

Thumbor est un service open-source de traitement d'image en temps réel. Il permet de redimensionner, découper, ajuster, et transformer des images de manière dynamique via des requêtes HTTP. Thumbor est particulièrement utile pour les développeurs web et les administrateurs de sites qui ont besoin de manipuler des images sur le serveur de manière flexible et efficace.

### Fonctionnalités principales

- **Redimensionnement** : Redimensionne les images à des dimensions spécifiées.
- **Recadrage** : Recadre les images pour mettre en avant une partie spécifique.
- **Transformations** : Applique des transformations telles que la rotation, le renversement, et le changement de format (JPEG, PNG, etc.).
- **Filtrage** : Applique des filtres pour ajuster la luminosité, le contraste, ajouter des effets comme le flou, et plus encore.
- **Optimisation** : Optimise les images pour le web, réduisant ainsi leur taille tout en maintenant la qualité.
- **Sécurité** : Intègre des options de sécurité pour contrôler l'accès aux transformations d'image.

### Exemples de Transformations

1. ##### **Redimensionnement** 
    
    **Description :** Redimensionne l'image à des dimensions spécifiques. <p class="callout info">https://proxy.hyundai.media/thumb/?**500x300**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Redimensionne l'image à 500 pixels de large et 300 pixels de haut.
2. ##### **Recadrage Centré**
    
    **Description :** Recadre l'image pour qu'elle soit centrée sur une zone de 300x200 pixels. <p class="callout info">https://proxy.hyundai.media/thumb/?**300x200:600x400**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Recadre l'image de 300x200 pixels en son centre.
3. ##### **Rotation**
    
    **Description :** Tourne l'image de 90 degrés. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:rotate(90)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Tourne l'image de 90 degrés dans le sens des aiguilles d'une montre.
4. ##### **Effet de Flou**
    
    **Description :** Applique un effet de flou sur l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:blur(10)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Applique un flou de 10 pixels sur l'image.
5. ##### **Conversion en Noir et Blanc**
    
    **Description :** Convertit l'image en noir et blanc. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:grayscale()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image en niveaux de gris, supprimant toutes les couleurs.
6. ##### **Ajustement de la Luminosité**
    
    **Description :** Augmente la luminosité de l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:brightness(20)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Augmente la luminosité de l'image de 20%.
7. ##### **Ajout de Bordures**
    
    **Description :** Ajoute une bordure noire autour de l'image. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:frame(5, "black")**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Ajoute une bordure de 5 pixels de large de couleur noire autour de l'image.
8. ##### **Miroir Horizontal**
    
    **Description :** Retourne l'image horizontalement. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:flip()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image de gauche à droite.
9. ##### **Miroir Vertical**
    
    **Description :** Retourne l'image verticalement. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:flop()**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image de haut en bas.
10. ##### **Format de Sortie JPEG**
    
    **Description :** Convertit l'image au format JPEG. <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/**filters:format(jpeg)**/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format JPEG.

### Formats pris en charge

1. ##### **JPEG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format JPEG.
2. ##### **PNG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format PNG.
3. ##### **WebP**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(webp)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format WebP.
4. ##### **GIF**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(gif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format GIF.
5. ##### **AVIF**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:format(avif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Convertit l'image au format AVIF.

### Exemple avec Plusieurs Filtres

Thumbor permet d'appliquer plusieurs filtres en les combinant dans l'URL. Voici un exemple où plusieurs filtres sont appliqués :

**Description :** Redimensionne l'image, applique un effet de flou, ajuste la luminosité, et convertit l'image au format JPEG.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:blur(5):brightness(10):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication :**

- `350x200` : Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- `filters:blur(5)` : Applique un flou de 5 pixels.
- `filters:brightness(10)` : Augmente la luminosité de 10%.
- `filters:format(jpeg)` : Convertit l'image au format JPEG.

### Autres Exemples de Filtres Combinés


1. ##### **Recadrage Centré et Conversion en PNG**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?300x200:600x400/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Recadre l'image de 300x200 pixels en son centre et la convertit au format PNG.

1. ##### **Rotation et Noir et Blanc**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:rotate(90):grayscale()/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Tourne l'image de 90 degrés et la convertit en niveaux de gris.
2. ##### **Flip Horizontal et Frame**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:flip():frame(5,"black")/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>
    
    **Explication :** Retourne l'image horizontalement et ajoute une bordure noire de 5 pixels.
3. ##### **JPEG avec qualité modifiée**
    
    <p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:quality(80):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg </p>
    
    **Explication :** Redimensionne l'image à 350x200 pixels et ajuste la qualité du JPEG à 80%.

### Paramètres AVIF dans Thumbor

- **Qualité (quality)**: Permet de spécifier la qualité de l'image AVIF.
- **Vitesse (speed)**: Contrôle la vitesse de compression. Une valeur plus basse donne une meilleure compression (meilleure qualité mais plus lente), tandis qu'une valeur plus élevée donne une compression plus rapide (moins bonne qualité mais plus rapide).

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:quality(60):speed(4):format(avif)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication :**

- `350x200` : Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- `filters:quality(60)` : Ajuste la qualité de l'image AVIF à 60%.
- `filters:speed(4)` : Définit la vitesse de compression à 4 pour l'image AVIF.
- `filters:format(avif)` : Convertit l'image au format AVIF.

### Exemple d'URL pour Ajouter un Watermark

  
**Description :** Ajoute un watermark à une image, spécifie l'image de watermark, sa position, et son opacité.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:watermark(https://example.com/path/to/watermark.png,10,10,50)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

  
**Explication :**

- **350x200 :** Redimensionne l'image à 350 pixels de large et 200 pixels de haut.
- **filters:watermark(URL, X, Y, Alpha) :** Applique un watermark à l'image.
- **URL :** L'URL de l'image à utiliser comme watermark.
- **X :** Position horizontale du watermark (en pixels) par rapport au coin supérieur gauche de l'image.
- **Y :** Position verticale du watermark (en pixels) par rapport au coin supérieur gauche de l'image.
- **Alpha :** Opacité du watermark (0-100, où 0 est totalement transparent et 100 totalement opaque).

### Filtres Supplémentaires

##### **Fill (Remplissage)**

**Description :** Remplit l'image avec une couleur spécifique si elle n'atteint pas les dimensions spécifiées.

<p class="callout info">https://proxy.hyundai.media/thumb/?350x200/filters:fill(white)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication:** Remplit l'image avec une couleur blanche pour atteindre les dimensions 350x200 pixels.

##### **Round Corner (Coins Arrondis)**

**Description :** Applique des coins arrondis à l'image.

<p class="callout info">https://proxy.hyundai.media/thumb/?filters:round\_corner(20,20,5)/https://cdn.hyundai.media/l2r/campaign/2024\_03/retargeting/bayon/slide\_1.jpg</p>

**Explication:** Applique des coins arrondis avec un rayon de 20 pixels, un lissage de 20, et une opacité de 5.

### Gestion des images issues de NocoDB

Le proxy gère également les transformations d'images issues de nocodb

<p class="callout info">https://proxy.hyundai.media/thumb/?fit-in/350x300/filters:fill(002c5f):background\_color(002c5f):border(5,white):format(webp):quality(100)/dltemp/DtS-QtG9HKyOFvv7/1720804200000/noco/pt1ltv5xyoreh11/md6xxnbcufy5s3c/cn472ajk23jslj8/s2L4pI30SPEDfKnSr-.png</p>

L'url de l'image NocoDB doit obligatoirement commencer par "dltemp/"