Thumbor peut être utilisé sans frais pour redimensionner, compresser et transformer des images à la demande.
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.](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=6&hl=fr)
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 :
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 d'origine 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](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=6&hl=fr)
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 :
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 floue 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](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=6&hl=fr)
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 :
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é 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](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=6&hl=fr)
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 :
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 redimensionnée à une largeur de 200 pixels 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](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=6&hl=fr)
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 :
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 redimensionnée à 50% de la taille de l'original 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](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=6&hl=fr)
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 :
- 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](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=6&hl=fr)
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.
Exécutez la commande
thumbor-config
pour créer un fichierthumbor.conf
.thumbor-config > ./thumbor.conf
Ouvrez votre nouveau fichier
thumbor.conf
. La commandethumbor-config
a généré un fichier qui répertorie et explique toutes les options de configuration de Thumbor.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
etMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Exécutez Thumbor avec l'indicateur
--conf
pour utiliser vos paramètresthumbor.conf
.thumbor --conf /path/to/thumbor.conf