Optimiser les images avec Thumbor

Thumbor peut être utilisé sans frais pour redimensionner, compresser et transformer des images à la demande.

Katie Hempenius
Katie Hempenius
X

Thumbor est un CDN sans frais et Open Source pour les images, qui facilite la compression, le redimensionnement et la transformation des images. Ce post vous permet de tester Thumbor par vous-même sans rien installer. Nous avons mis en place un serveur Thumbor sandbox que vous pouvez tester sur http://34.67.235.246:8888. L'image que vous allez tester est disponible à l'adresse http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Conditions préalables

Dans cet article, nous partons du principe que vous comprenez comment les CDN pour images peuvent améliorer les performances de chargement. Si ce n'est pas le cas, consultez Utiliser des CDN d'images pour optimiser les images. Il suppose également que vous avez déjà créé des sites Web de base.

Format de l'URL des pouces

Comme indiqué dans Utiliser des CDN pour l'optimisation des images, chaque CDN utilise un format d'URL légèrement différent pour les images. La figure 1 représente le format Thumbor.

Une URL Thumbor se compose des éléments suivants: origine, clé de sécurité, taille, filtres et image.
Format de l'URL des pouces

Origine

Comme toutes les origines, l'origine d'une URL Thumbor est composée de trois parties: un schéma (qui est presque toujours http ou https), un hôte et un port. Dans cet exemple, l'hôte est identifié à l'aide d'une adresse IP, mais si vous utilisez un serveur DNS, il peut ressembler à thumbor-server.my-site.com. Par défaut, Thumbor utilise le port 8888 pour diffuser les images.

Recommandations

La partie unsafe de l'URL indique que vous utilisez Thumbor sans clé de sécurité. Une clé de sécurité empêche les utilisateurs d'apporter des modifications non autorisées aux URL de vos images. Si vous modifiez l'URL d'une image, l'utilisateur pourrait utiliser votre serveur (et votre facture d'hébergement) pour redimensionner ses images ou, de manière plus malveillante, pour surcharger votre serveur. Ce guide ne couvre pas la configuration de la fonctionnalité de clé de sécurité de Thumbor.

du vocab.

Cette partie de l'URL spécifie la taille souhaitée de l'image de sortie. Vous pouvez omettre cette option si vous ne souhaitez pas modifier la taille de l'image. Thumbor utilise différentes approches, telles que le recadrage ou la mise à l'échelle, pour obtenir la taille souhaitée en fonction des autres paramètres d'URL. La section suivante de cet article explique plus en détail comment redimensionner les images.

Essayez maintenant :

  1. Cliquez sur l'URL suivante pour afficher l'image dans sa taille d'origine dans un nouvel onglet: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

    Image dans sa taille d'origine
    Image d'origine

  2. Redimensionnez l'image pour qu'elle fasse 100 x 100 pixels: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg.

Image de 100 x 100 pixels
Image redimensionnée au format 100 x 100 pixels

Filtres

Les filtres transforment une image. La partie filtres du segment d'URL commence par filters: suivi d'une liste de filtres séparés par des deux-points. Vous pouvez omettre cette partie si vous n'utilisez aucun filtre. La syntaxe des filtres individuels ressemble à un appel de fonction (par exemple, grayscale()) contenant zéro ou plusieurs arguments.

Essayez maintenant :

  1. Appliquer un seul filtre: un effet de flou gaussien avec un rayon de 25 pixels: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Image floutée
    Image floue

  2. Appliquer plusieurs filtres. Convertir l'image en niveaux de gris et faire pivoter l'image de 90 degrés: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Image en nuances de gris ayant fait l'objet d'une rotation de 90 degrés
Image avec échelle de gris pivotée

Transformer des images

Cette section se concentre sur les fonctionnalités Thumbor les plus pertinentes pour les performances: compression, redimensionnement et conversion entre les formats de fichiers.

Compression

Le filtre quality compresse les images JPEG au niveau de qualité souhaité (entre 1 et 100). Si aucun niveau de qualité n'est spécifié, Thumbor compresse l'image à 80 %. Il s'agit d'une valeur par défaut intéressante: les niveaux de qualité 80 à 85 ont généralement peu d'effet sur la qualité de l'image, mais ils diminuent généralement la taille de l'image de 30 à 40%.

Essayez maintenant :

  1. Compressez l'image à une qualité de 1 (très mauvaise): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg.

    Image de mauvaise qualité
    Image de mauvaise qualité

  2. Compressez l'image à l'aide des paramètres de compression par défaut de Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Image compressée ne présentant aucun problème de qualité notable
Image compressée

Redimensionner

Pour redimensionner une image tout en conservant ses proportions d'origine, utilisez le format $WIDTHx0 ou 0x$HEIGHT dans la partie size de la chaîne d'URL.

Essayez maintenant :

  1. Redimensionnez l'image à une largeur de 200 pixels tout en conservant ses proportions d'origine: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg.

    Image de 200 pixels de large
    Image redimensionnée à une largeur de 200 pixels

  2. Redimensionnez l'image à une hauteur de 500 pixels tout en conservant ses proportions d'origine: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Image de 500 pixels de haut
Image redimensionnée à une hauteur de 500 pixels

Vous pouvez également redimensionner les images selon un certain pourcentage de l'original à l'aide du filtre de proportion. Si la taille est spécifiée avec le filtre de proportions, l'image est redimensionnée, puis le filtre de proportions est appliqué.

Essayez maintenant :

  1. Redimensionnez l'image à 50% de l'original: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    Image dont la taille correspond à 50% de celle d'origine
    Image redimensionnée à 50% de la taille de l'original

  2. Redimensionnez l'image à une largeur de 1 000 pixels, puis redimensionnez-la à 10% de sa taille actuelle: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

Image de 100 pixels de large
Image redimensionnée à une largeur de 100 pixels

Ces méthodes ne sont que quelques-unes des nombreuses options de recadrage et de redimensionnement proposées par Thumbor. Pour en savoir plus sur les autres options, consultez Utilisation.

Formats de fichiers

Le filtre Format convertit les images au format jpeg, webp, gif ou png. Gardez à l'esprit que si vous optimisez les performances, vous devez utiliser les formats JPEG ou WebP, car les fichiers PNG et GIF sont généralement beaucoup plus volumineux et ne sont pas compressés.

Essayez maintenant :

  1. Convertissez l'image au format WebP. Si vous ouvrez le panneau Network (Réseau) des outils de développement, l'en-tête de réponse Content-Type du document indique que le serveur a renvoyé une image WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg.
Capture d'écran des outils de développement montrant le type de contenu (WebP) d'une image
En-tête de réponse content-type affiché dans les outils de développement

Étapes suivantes

Essayez d'autres filtres et transformations sur l'image hero.jpg.

Si vous suivez en utilisant votre propre installation Thumbor, consultez l'annexe ci-dessous qui explique comment et pourquoi utiliser le fichier thumbor.conf.

Annexe: thumbor.conf

La plupart des options de configuration abordées dans cet article, ainsi que de nombreuses autres, peuvent être définies par défaut en définissant et en utilisant un fichier de configuration thumbor.conf. Les paramètres du fichier thumbor.conf seront appliqués à toutes les images, sauf s'ils sont remplacés par les paramètres de chaîne d'URL.

  1. Exécutez la commande thumbor-config pour créer un fichier thumbor.conf.

    thumbor-config > ./thumbor.conf

  2. Ouvrez votre nouveau fichier thumbor.conf. La commande thumbor-config a généré un fichier qui répertorie et explique toutes les options de configuration de Thumbor.

  3. Configurez les paramètres en annulant la mise en commentaire des lignes et en modifiant les valeurs par défaut. Il peut être utile de définir les paramètres suivants :

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH et MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Exécutez Thumbor avec l'indicateur --conf pour utiliser vos paramètres thumbor.conf.

    thumbor --conf /path/to/thumbor.conf