Squoosh et python: installation de Squoosh-cli

Mis à jour le April 26, 2023, 3:34 p.m.

Niveau: Débutant à Intermédiaire

Dans le monde du développement web et de l'optimisation de contenu, la réduction de la taille des images sans compromettre leur qualité est une nécessité. C'est là que Squoosh intervient, un outil développé par l'équipe Google Chrome Labs, conçu pour vous aider à compresser et optimiser vos images avec une facilité déconcertante. Dans ce tutoriel, nous allons vous guider à travers le processus d'installation de Squoosh-cli, la version en ligne de commande de Squoosh, en utilisant Python. Que vous soyez un développeur web cherchant à améliorer les performances de votre site ou un passionné de technologie souhaitant optimiser des images pour un projet personnel, ce guide est fait pour vous.

Squoosh c'est quoi?
Squoosh-CLI, kezako?
Installation de Node.js
Installation de Squoosh-cli
Vérification de l'installation de Squoosh-cli
Squoosh-cli avec Python pour une image
Squoosh-cli avec Python pour plusieurs images
Conclusion
FAQ

Squoosh c'est quoi?

Squoosh est une application web libre et open-source développée par Google Chrome Labs qui vous permet de compresser et d'optimiser vos images.                                                                                                  
                                                                                                                   
L'idée principale derrière Squoosh est de vous donner un contrôle total sur les différentes optimisations d'image disponibles aujourd'hui directement depuis votre navigateur, sans qu'il soit nécessaire d'installer ou de configurer quoi que ce soit.                                                                                                        
                                                                                                                   
Voici quelques fonctionnalités principales de Squoosh :                                                                  
                                                                                                                   
1 Conversion vers de nombreux formats d'image : Squoosh peut convertir vos images dans de nombreux formats différents, y compris JPEG, PNG, WebP, AVIF, et plus encore.                                                                      
2 Compression d'image : Squoosh peut compresser votre image afin de réduire sa taille sur le disque sans compromettre visiblement la qualité de l'image.                                                                                    
3 Visibilité en temps réel : Avec Squoosh, vous pouvez voir en temps réel ce que votre image ressemblera après la compression ou la conversion.                                                                                         
4 Facilité d'utilisation : Vous n'avez pas besoin d'être un expert en imagerie numérique pour utiliser Squoosh.         
L'interface du site est simple et intuitive, ce qui vous permet de compresser et de convertir vos images en quelques clics seulement.                                                                                                      
5 Interopérabilité : Étant donné que Squoosh est une application web, vous pouvez l'utiliser sur n'importe quel appareil équipé d'un navigateur web moderne, qu'il s'agisse d'un ordinateur de bureau, d'un ordinateur portable, d'une tablette ou d'un smartphone.                                                                                    
6 Open Source: Squoosh est un projet open source, ce qui signifie que vous pouvez consulter son code source, le modifier, et même contribuer au projet si vous le souhaitez.  

Pourquoi Squoosh-CLI?

Squoosh-CLI est l'interface en ligne de commande pour Squoosh et elle est utilisée pour les mêmes objectifs : compresser et optimiser les images, mais avec quelques différences notables :                                            
                                                                                                           
1- Automatisation : à la base, la principale raison d'utiliser une interface en ligne de commande (CLI) plutôt que l'interface utilisateur graphique (GUI) est l'automatisation. Avec Squoosh-CLI, vous pouvez automatiser la compression et l'optimisation des images dans le cadre de votre processus de build ou de déploiement. Vous pouvez aussi utiliser Squoosh-CLI dans vos scripts pour simplifier le processus de gestion des images.                   
2 - Optimisation en masse :contrairement à l'application Web Squoosh, le CLI vous permet de traiter plusieurs images à la fois. Cela peut être particulièrement utile si vous avez besoin de compresser ou d'optimiser un grand nombre d'images.                                                                                                             
3 - Intégration dans les workflows : Le CLI peut être facilement intégré dans votre pipeline de développement ou de déploiement existant. Par exemple, vous pourriez l'utiliser dans un script de build pour vous assurer que toutes vos  images sont optimisées avant le déploiement.                                                                          
4 - Utilisation hors ligne : Une fois installé, Squoosh-CLI fonctionne totalement hors ligne, vous n'avez pas besoin d'une connexion Internet pour compresser et optimiser vos images (contrairement à l'application en ligne Squoosh).    
5 - Flexibilité : Bien que l'application en ligne Squoosh soit assez simple à utiliser, le CLI offre beaucoup plus de flexibilité en termes de configuration des paramètres de compression et d'optimisation.   

Avant de nous lancer dans l'installation de Squoosh-cli, assurez-vous que vous avez les éléments suivants prêts :

Node.js installé sur votre système (Squoosh-cli est un outil basé sur Node.js).
Python installé sur votre système.
Une familiarité de base avec la ligne de commande et Python.

Étape 1: Installation de Node.js

Si vous n'avez pas déjà Node.js installé, rendez-vous sur le site officiel de Node.js et téléchargez la version adaptée à votre système d'exploitation. Suivez les instructions d'installation pour l'installer sur votre machine.

Étape 2: Installation de Squoosh-cli

Une fois Node.js en place, ouvrez votre terminal ou invite de commande et installez Squoosh-cli en utilisant npm (le gestionnaire de paquets pour Node.js) avec la commande suivante :

sudo npm install -g @squoosh/cli

Cette commande installe Squoosh-cli globalement sur votre système, vous permettant de l'utiliser dans n'importe quel répertoire.

Étape 3: Vérification de l'installation

Pour vérifier que Squoosh-cli est correctement installé, tapez la commande suivante dans votre terminal :

squoosh-cli --help

Si l'installation a réussi, vous devriez voir s'afficher une liste des options et commandes disponibles pour Squoosh-cli. Comme ceci;

Étape 4: Utilisation de Squoosh-cli avec Python sur une seule image

Maintenant que Squoosh-cli est installé, vous pouvez l'utiliser en combinaison avec Python pour automatiser l'optimisation d'images dans vos projets. Voici un exemple simple de script Python qui utilise Squoosh-cli pour optimiser une image :

Nous allons créer un script simple puis progressivement le complexifier. Ouvrez un fichier et nommez le auto_change_img.py

import os
import subprocess

img = input('mettez le chemin de votre image: ')

# Exécution de la commande via Python
subprocess.run(["npx", "@squoosh/cli", "--webp", "{quality:50}", "-d", "out", f"{img}"])

Lancez votre script, vous devriez obtenir quelque chose comme ça:

Étape 5: Utilisation de Squoosh-cli avec python sur un dossier contenant plusieurs images

Ok, on a réussi à faire ça pour une image. Faisons le pour toutes les images d'un dossier. Le but de notre script est bien d'automatiser la conversion de plusieurs images.

Voici une fonction qui va liste toutes les images d'un dossier, et lancer la commande pour chacune d'entre elle.

import subprocess
import os

# on definit notre chemin
path = '/home/pythonia/Images/img_site_web/'

# on definit notre fonction
def dossier(path_dir):
    # on prend le chemin en argument et on boucle sur toutes les images le contenant 
    for img in os.listdir(path_dir):
            img_path = os.path.join(path_dir,img)
            print(img_path)
            subprocess.run(["npx", "@squoosh/cli", "--webp", "{quality:50}", "->
            print('FINI. Ton image est ici: ', os.path.join(os.getcwd(), img))


dossier(path)

Ici, on utilise une boucle for pour parcourir tous les fichiers dans le répertoire spécifié par path_dir. os.listdir(path_dir) retourne une liste de tous les fichiers et dossiers dans path_dir.

img_path = os.path.join(path_dir,img)

Avec la ligne ci-dessus, pour chaque image img trouvée, on crée le chemin complet de l'image en joignant path_dir (le répertoire contenant les images) et le nom de l'image img en utilisant os.path.join(). Ce chemin complet est stocké dans img_path.

Le reste du code devrait vous être familier, on lance la commande et on affiche à l'écran l'endroit où elle a été sauvegardée. Vous devirez obtenir quelque chose comme ça:

Rajoutons maintenant l'input utilisateur (c'est quand même plus pratique pour l'utilisation).

import subprocess
import os

# on definit notre chemin
path = input("Mettez le chemin du dossier: ").strip()

# on definit notre fonction
def dossier(path_dir):
    # on prend le chemin en argument et on boucle sur toutes les images le contenant 
    for img in os.listdir(path_dir):
            img_path = os.path.join(path_dir,img)
            print(img_path)
            subprocess.run(["npx", "@squoosh/cli", "--webp", "{quality:50}", "->
            print('FINI. Ton image est ici: ', os.path.join(os.getcwd(), img))


dossier(path)

Je voudrais mettre l'accent sur cette ligne:

img_path = os.path.join(path_dir,img)

Cette ligne de code utilise la fonction input() pour demander à l'utilisateur de saisir le chemin d'un dossier. La chaîne de caractères "Mettez le chemin du dossier: " est affichée à l'utilisateur pour l'inviter à entrer le chemin. La méthode strip() est ensuite utilisée pour supprimer les espaces blancs en début et en fin de la chaîne de caractères saisie par l'utilisateur. Cette méthode renvoie une nouvelle chaîne de caractères sans les espaces blancs en début et en fin. Par exemple, si l'utilisateur saisit "/home/user/documents", la variable path contiendra la chaîne de caractères "/home/user/documents". Si l'utilisateur saisit " /home/user/documents " avec des espaces en début et en fin, la variable path contiendra la chaîne de caractères "/home/user/documents" sans les espaces en début et en fin.

Conclusion

L'installation de Squoosh-cli et son utilisation avec Python ouvrent des possibilités illimitées pour l'optimisation d'images dans vos projets. Que ce soit pour améliorer la vitesse de chargement de votre site web ou simplement pour réduire l'espace de stockage nécessaire pour vos images, Squoosh-cli est un outil puissant qui simplifie considérablement le processus. En suivant les étapes de ce tutoriel, vous êtes maintenant prêt à intégrer l'optimisation d'images dans vos flux de travail Python.

FAQ Squoosh-cli

Q1 : Qu'est-ce que Squoosh CLI ?
CLI est une interface en ligne de commande pour l'application web Squoosh. Cette application permet de compresser et de redimensionner les images sans compromettre la qualité.                                                 
                                                                                                                   
Q2 : Comment s'installe Squoosh CLI?                                                                                                                  
Squoosh CLI peut être installé via npm en utilisant la commande : npm install @squoosh/cli                               
                                                                                                                   
Q3 : Comment convertir le format d'une image avec Squoosh CLI ?
Après avoir installé Squoosh CLI, utilisez simplement cette commande pour convertir une image : squoosh-cli --output . 
--mozjpeg auto image.jpg                                                                                                 
                                                                                                                   
Q4 : Comment personnaliser la compression de l'image avec Squoosh ?
Vous pouvez utiliser différents formats de compression comme mozjpeg, webp, avif, etc. Par exemple : squoosh-cli --output . --avif auto image.jpg pour compresser en AVIF.                                                                
                                                                                                           
Q5 : Squoosh CLI est-il gratuit ?
Squoosh CLI est un logiciel libre et open-source.                                                                   
                                                                                                                   
Q6 : Squoosh CLI préserve-t-il la qualité des images ? 
Squoosh CLI préserve autant que possible la qualité de l'image d'origine tout en réduisant sa taille. Néanmoins,    
toute compression d'image peut entraîner une légère dégradation de la qualité, surtout à des taux de compression plus    
élevés.                                                                                                                  
                                                                                                                   
Q7: Comment redimensionner une image avec Squoosh ?                           
Squoosh CLI ne prend pas en charge directement le redimensionnement des images. Vous devrez d'abord redimensionner       
l'image avec un autre outil, puis la compresser avec Squoosh CLI.                                                        
                                                                                                                   
Q8: Squoosh CLI nécessite-t-il une connexion internet?                      
Non, une fois que vous avez installé Squoosh CLI sur votre machine, vous n'avez pas besoin de connexion Internet pour l'utiliser. Toutefois, vous aurez besoin d'Internet pour installer Squoosh CLI et recevoir des mises à jour.

Nous espérons que ce guide vous a été utile. Pour plus de tutoriels et de conseils sur Python et le développement web, restez connecté à pythoniaformation.com en vous abonnant à la newsletter. Let's have fun!

Références

https://dev.to/0xkoji/optimize-images-with-cli-tool-from-google-squoosh-nfg
https://github.com/GoogleChromeLabs/squoosh/