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.

   https://proxy.hyundai.media/thumb/?500x300/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   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.

   https://proxy.hyundai.media/thumb/?300x200:600x400/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Recadre l'image de 300x200 pixels en son centre.

3. Rotation

   Description : Tourne l'image de 90 degrés.

   https://proxy.hyundai.media/thumb/?350x200/filters:rotate(90)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   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.

   https://proxy.hyundai.media/thumb/?350x200/filters:blur(10)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Applique un flou de 10 pixels sur l'image.

5. Conversion en Noir et Blanc

   Description : Convertit l'image en noir et blanc.

   https://proxy.hyundai.media/thumb/?350x200/filters:grayscale()/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Convertit l'image en niveaux de gris, supprimant toutes les couleurs.

6. Ajustement de la Luminosité

   Description : Augmente la luminosité de l'image.

   https://proxy.hyundai.media/thumb/?350x200/filters:brightness(20)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Augmente la luminosité de l'image de 20%.

7. Ajout de Bordures

   Description : Ajoute une bordure noire autour de l'image.

   https://proxy.hyundai.media/thumb/?350x200/filters:frame(5, "black")/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Ajoute une bordure de 5 pixels de large de couleur noire autour de l'image.

8. Miroir Horizontal

   Description : Retourne l'image horizontalement.

   https://proxy.hyundai.media/thumb/?350x200/filters:flip()/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Retourne l'image de gauche à droite.

9. Miroir Vertical

   Description : Retourne l'image verticalement.

   https://proxy.hyundai.media/thumb/?350x200/filters:flop()/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Retourne l'image de haut en bas.

10. Format de Sortie JPEG

    Description : Convertit l'image au format JPEG.

    https://proxy.hyundai.media/thumb/?350x200/filters:format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

    Explication : Convertit l'image au format JPEG.

Formats pris en charge

1. JPEG

   https://proxy.hyundai.media/thumb/?350x200/filters:format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Convertit l'image au format JPEG.

2. PNG

   https://proxy.hyundai.media/thumb/?350x200/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Convertit l'image au format PNG.

3. WebP

   https://proxy.hyundai.media/thumb/?350x200/filters:format(webp)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Convertit l'image au format WebP.

4. GIF

   https://proxy.hyundai.media/thumb/?350x200/filters:format(gif)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication : Convertit l'image au format GIF.

5. AVIF

   https://proxy.hyundai.media/thumb/?350x200/filters:format(avif)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   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.

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

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

https://proxy.hyundai.media/thumb/?300x200:600x400/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

Explication: Recadre l'image de 300x200 pixels en son centre et la convertit au format PNG.

1. Rotation et Noir et Blanc

   https://proxy.hyundai.media/thumb/?350x200/filters:rotate(90):grayscale()/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication: Tourne l'image de 90 degrés et la convertit en niveaux de gris.

2. Flip Horizontal et Frame
   https://proxy.hyundai.media/thumb/?350x200/filters:flip():frame(5,"black")/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg

   Explication: Retourne l'image horizontalement et ajoute une bordure noire de 5 pixels.

3. JPEG avec qualité modifiée

Description: Redimensionne l'image à 350x200 pixels et ajuste la qualité à 80%.

URL:

Explication: Redimensionne l'image à 350x200 pixels et ajuste la qualité du JPEG à 80%.

2. WebP avec qualité modifiée

Description: Redimensionne l'image à 350x200 pixels et ajuste la qualité à 70%.

URL:

Explication: Redimensionne l'image à 350x200 pixels et ajuste la qualité du WebP à 70%.

3. AVIF avec qualité modifiée

Description: Redimensionne l'image à 350x200 pixels et ajuste la qualité à 60%.

URL:

Explication: Redimensionne l'image à 350x200 pixels et ajuste la qualité de l'AVIF à 60%.

Oui, pour le format AVIF, Thumbor permet de modifier non seulement la qualité, mais aussi la vitesse de compression (speed). Voici comment vous pouvez ajuster ces paramètres via l'URL.

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).

Exemple d'URL pour Modifier la Qualité et la Vitesse pour AVIF

Description: Redimensionne l'image à 350x200 pixels, ajuste la qualité à 60% et la vitesse de compression à 4.

URL:

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.

Autres Exemples

1. AVIF avec Qualité 80% et Vitesse 2

Explication: Redimensionne l'image à 350x200 pixels, ajuste la qualité à 80% et la vitesse de compression à 2.

2. AVIF avec Qualité 50% et Vitesse 6

Explication: Redimensionne l'image à 350x200 pixels, ajuste la qualité à 50% et la vitesse de compression à 6.

Conclusion

En utilisant Thumbor, vous pouvez non seulement contrôler la qualité des images AVIF, mais aussi ajuster la vitesse de compression pour équilibrer entre la qualité et les performances de traitement. Ajoutez ces exemples à votre wiki pour documenter comment configurer ces paramètres via l'URL de Thumbor.