Automatiser la compression d’images dans Photoshop

Icone Photoshop

Aujourd’hui, je vous propose d’apprendre à automatiser, si vous ne le saviez pas encore, une tâche récurrente en SEO : la compression de plusieurs images en simultané dans Photoshop. En effet, en agence ou chez l’annonceur, nous sommes souvent amenés à réaliser cette opération chronophage et un brin répétitive. Aussi, pour gagner du temps, je vais vous livrer une astuce que j’utilise régulièrement sur chacun des sites que je dois optimiser.

Tout d’abord, revenons rapidement sur l’intérêt de compresser les images de votre site.

Pourquoi optimiser les images de son site ?

En compressant les images de votre site, vous réduisez ainsi le poids et l’espace qu’elles occupent sur votre serveur. En agissant ainsi, vous accélérez également le temps de chargement global de votre site, ce qui est une bonne chose pour votre référencement naturel -du point de vue des moteurs de recherche – et l’expérience utilisateur. L’amélioration des performances globales de votre site contribue à :

  • réduire le taux de rebond,
  • faciliter l’indexation des pages,

Parmi les actions qui permettent d’influer positivement sur le temps de chargement global de votre site, on retrouve :

  • la mise en cache des ressources dites statiques dans le navigateur,
  • l’activation de la compression Gzip des images côté serveur,
  • l’utilisation de CSS Sprites pour diminuer le nombre d’appels au serveur au niveau des images (plusieurs images sont alors regroupées dans un seul et même fichier et leur affichage est géré via le CSS),
  • la spécification de la dimension des images directement dans le code source HTML des pages de votre site,
  • la corrélation entre les dimensions des images d’origine et celles affichées sur le site (une image 100*80 ne devra pas être redimensionnée via le code source HTML ou CSS mais par le biais d’un logiciel de retouche graphique comme Photoshop),
  • la minification des fichiers CSS et JavaScript, autrement dit, la réduction de leur taille obtenue via la suppression des caractères inutiles, des commentaires, des espaces, etc.

A cela s’ajoute une étape cruciale : la compression des images d’un site, sujet qui va donc nous occuper essentiellement dans ce billet.

Comment savoir quelles sont les images à optimiser ?

Pour avoir connaissance des fichiers jpg, png, gif, etc. dont le poids peut être réduit, je vous recommande d’utiliser un outil bien connu des référenceurs : GTmetrix. Cette application en ligne vous permet d’obtenir de nombreuses recommandations quant à la performance globale des pages de votre site. Après avoir renseigné l’URL de vote site, vous recevez deux notes dont l’une est basée sur l’outil de Google, Page Speed, et l’autre, celui de Yahoo, Yslow.

Exemple de test de rapidité d'un site avec l'outil GTmetrix

Au vu de l’illustration ci-dessous, l’outil GTmetrix nous recommande d’optimiser certaines images du site afin d’y gagner en termes d’espace de stockage sur le serveur. Parfois, le nombre d’images à optimiser peut-être conséquent, ce qui me conduit tout naturellement à vous dévoiler dès à présent mon astuce pour compresser plusieurs images à l’aide d’un script déployé sur Photoshop. Mais, dans un premier temps, jetons un rapide coup d’oeil, aux différentes méthodes d’optimisation d’une image.

Tutoriel de compression d’une image

Deux solutions s’offrent à vous : la méthode GTmetrix ou la méthode Photoshop.

La méthode GTmetrix

  • Dans GTmetrix, cliquez sur « See optimized » et enregistrez la version optimisée de l’image dont il est question,
  • Accédez au chemin de l’image sur votre serveur FTP et écrasez l’ancienne par la nouvelle

La méthode Photoshop

  • Ouvrez votre image dans Photoshop,
  • Dans Fichier, cliquez sur « Enregistrer pour le web »,
  • Dans la fenêtre qui s’ouvre, ajustez les paramètres* de manière à diminuer le poids global de votre image,
  • Enregistrez votre image

*Généralement, les paramètres que je modifie sont les suivants :

  • la sélection du format de fichier (jpg),
  • la qualité de la compression que je situe à 50%,
  • l’activation du mode progressif

Exemple de compression d'image dans Photoshop

Imaginez désormais que vous ayez à reproduire manuellement la méthode Photoshop pour une centaine d’images. Un processus long et fastidieux… Découvrez dès maintenant comment optimiser simultanément plusieurs images grâce aux scripts Photoshop.

Comment automatiser le processus de compression d’images sous Photoshop ?

Dans un premier temps, ouvrez l’ensemble de vos images dans Photoshop. Bien entendu, vous aurez pris soin au préalable de faire des copies de vos images pour ne pas perdre les fichiers originaux. Vous êtes dès à présent dans Photoshop et toutes vos images sont ouvertes dans des onglets différents. Positionnez-vous sur l’une d’entre elles et effectuez l’opération suivante :

  • Dans l’onglet de votre barre de navigation Photoshop, sélectionnez Fenêtre > Scripts,
  • Dans la fenêtre qui s’ouvre, cliquez sur l’icône de création d’un nouveau script, renseignez les différents champs et faites « enregistrer » (à partir de cet instant, toutes les actions que vous réaliserez seront gardées en mémoire en tant que script et pourront être exécutées grâce à un simple clic ultérieurement),
  • Il faut désormais réaliser l’ction que devra reproduire le script pour l’ensemble des autres fichiers images, c’est-à-dire les compresser étant donné que c’est ce que nous cherchons à obtenir. Pour ce faire, cliquez sur Fichier > Enregistrer pour le web et répétez l’opération vue dans le point précédent (méthode Photoshop).
  • Fermez votre image en cours

Nous allons procéder à l’automatisation du processus précédent à présent :

  • Rendez-vous dans un onglet où se trouve une autre image,
  • Sélectionnez Fichier > Automatisation > Traitement par lots
  • Dans la fenêtre qui s’ouvre :
    • Sélectionnez le script que vous venez de créer dans Exécuter > Script,
    • Dans la source, choisissez « Fichiers ouverts »,
    • Dans la destination, renseigner le dossier de votre choix au sein duquel toutes vos images optimisées seront enregistrées,
    • Dans la dénomination du fichier, choisissez Nom du document + extension,
    • Faites ok, votre script s’exécute normalement

Traitement par lots et automatisation dans Photoshop

Si cet article vous a plu, n’hésitez pas à me laisser un commentaire ou à le partager sur les réseaux sociaux. Ca fait toujours plaisir à son auteur 😉

5 commentaires

  1. YouLab dit :

    Merci pour ton tuto photoshop, je viens de réduire toutes les images de mon site en quelques minutes ! Et j’ai aussi appris une nouvelle chose possible avec Photoshop !

  2. nicolas dit :

    Merci beaucoup pour cet article qui précise comment faire un script. Cela fonctionne nickel.
    Mes fichiers ont réduit en gros de 50%.

  3. a-ceylan dit :

    Article intéressant…

  4. skynet dit :

    Merci pour le tuto !!

    Par contre, moi je possède photoshop CC 2015, je ne peux pas ouvrir plusieurs photo d’un seul coup, avec l’ancien photoshop je pouvais sélectionner plusieurs photos (ctrl+a) puis via clique droit sourie « ouvrir avec photoshop » je pouvais avoir toutes mes images dans photoshop, je pense qu’il doit avoir une option à activer non ? du coup je sais pas comment ouvrir plusieurs images d’un seul coup ?

    En espèrent avoir une réponse et trouver une solution car c’est très contraignant, merci.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut