Optimiser les images avec Thumbor

Vous pouvez utiliser Thumbor 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, qui facilite la compression, le redimensionnement et la transformation des images. Ce post vous permet d'essayer Thumbor directement sans avoir à installer quoi que ce soit. Nous avons configuré un serveur Thumbor sandbox que vous pouvez essayer 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.

Prérequis

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

Format d'URL Thumbor

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

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

Origine

Comme toutes les origines, l'origine d'une URL Thumbor se compose 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. En modifiant l'URL de l'image, un utilisateur pourrait utiliser votre serveur (et votre facture d'hébergement) pour redimensionner ses images ou, plus malveillant, pour surcharger votre serveur. Ce guide ne traite pas de la configuration de la fonctionnalité de clé de sécurité de Thumbor.

Taille

Cette partie de l'URL spécifie la taille souhaitée de l'image de sortie. Vous pouvez omettre cette valeur si vous ne souhaitez pas modifier la taille de l'image. Thumbor utilise différentes approches, comme le recadrage ou l'ajustement, 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 des 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 au format 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 à 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 le signe deux-points. Vous pouvez l'omettre 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: 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 floutée

  2. Appliquer plusieurs filtres. Convertissez l'image en niveaux de gris et rotate 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 qui a fait l'objet d'une rotation de 90 degrés
Image pivotée en nuances de gris

Transformer des images

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

Compression

Le filtre de qualité compresse les images JPEG au niveau de qualité d'image souhaité (1 à 100). Si aucun niveau de qualité n'est indiqué, Thumbor compresse l'image à un niveau de qualité de 80. Il s'agit d'un bon exemple par défaut: les niveaux de qualité 80-85 ont généralement peu d'effet perceptible sur la qualité de l'image, mais 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 sans problèmes de qualité notables
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 de l'URL.

Essayez maintenant :

  1. Redimensionnez l'image pour obtenir 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 à 200 pixels

  2. Redimensionnez l'image à une hauteur de 500 pixels tout en conservant les 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 à 500 pixels de hauteur

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

Essayez maintenant :

  1. Redimensionnez l'image pour qu'elle corresponde à 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 de l'original
    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 à 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. N'oubliez pas que si vous optimisez les performances, vous devez utiliser le format JPEG ou WebP, car les fichiers PNG et GIF ont tendance à être beaucoup plus volumineux et à ne pas être 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 votre propre installation de 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, entre autres, peuvent être définies comme valeurs par défaut en configurant 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 le nouveau fichier thumbor.conf. La commande thumbor-config a généré un fichier qui répertorie et décrit 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