Pourquoi compresser les images png, jpg… ? Pour accélérer ton contenu en ligne, pour rendre la navigation de tes visiteurs plus agréable, et ainsi améliorer ton référencement naturel ? Ou alors, pour optimiser de la place sur ton disque dur ? Quelle que soit la raison, dans ce tutoriel nous allons voir comment faire, le tout gratuitement et tout en gardant une très bonne qualité de ces images. Dans ce tuto, nous allons voir comment découvrir le poids d’une image sur un site Web en ligne ou sur son ordinateur.
Cet article va certainement également t’intéresser : comment réduire la taille de tes images pour accélérer encore d’avantage tes pages Web.
Compresser images PNG, JPEG,... en ligne
Généralement, j’ai l’habitude d’utiliser deux logiciels en ligne qui sont gratuits et que je vais te présenter.
Nous verrons qu’il est possible d’ôter plus ou moins 60% du poids de l’image original, sans forcément y voir une différence à l’œil nu. Imagine l’espace de stockage que tu peux gagner en utilisant ces logiciels, c’est vrai que sur une image cela ne représente pas grand-chose, mais sur nombre important oui. Enfin, si tu as un site en ligne, tu amélioras la navigation de tes visiteurs, puisque la page se chargera plus rapidement ce qui va également améliorer ton référencement naturel (SEO).
Compresser images PNG, JPEG, WebP avec Tiny
Pour commencer, nous allons découvrir un site Web qui permet de compresser et qui est très populaire. Il s’agit de Tiny, une fois sur la page, tu auras juste à glisser-déposer tes images dans le grand rectangle avec les pointillés au format png, jpg (jpeg) ou webp :
Plus bas sur la page d’accueil de Tiny, tu peux voir les prouesses de ce super site avec un exemple : Une image de 57 ko qui passe à 15 ko.
Pour gagner du temps, tu peux aussi glisser et déposer plusieurs images en même temps dans le rectangle de la page d’accueil de Tiny. Pour sélectionner plusieurs images, sur Windows tu auras juste à maintenir la touche CTRL de ton clavier d’ordinateur et faire un clic gauche sur les images désirées.
Une fois que le Tiny aura téléchargé l’image ou images, celui-ci te procure un certain nombre d’informations et de possibilités :
- Le nom du fichier que tu souhaites compresser.
- Le poids de l’image avant la compression.
- Fais attention que Finished soit bien affiché avant de faire quoique ce soit.
- Le poids l’image après la compression.
- La place que tu économises en pourcentage.
- Si tu cliques sur Download, tu pourras télécharger l’image compressée.
- Si tu souhaites télécharger l’image ou les images sur ton compte Dropbox en extension « zip ».
- En cliquant sur Download all, tu pourras téléverser les ou l’image(s) sur ton ordinateur.
- Enfin, tu verras la totalité de l’espace que tu utilises avec Tiny.
Comme tu peux le voir sur l’image ci-dessus, j’ai compressé deux images. 😉
Compresser images PNG, JPEG, WebP avec Compress
Le second site que j’utilise s’appelle Compress, tu pourras compresser des fichiers jpeg, jpg, png, gif et pdf :
Tout d’abord, plus bas sur la page d’accueil de Compress, tu y trouves un rectangle avec des pointillés. Glisse et dépose les fichiers que tu souhaites compresser :
- Sélectionne l’onglet du type de fichier que tu souhaites compresser. Par exemple, tu ne peux pas compresser en même temps, une extension jpg et png.
- Sélectionner : si tu ne souhaites pas faire de drag and drop, mais téléverser on va dire à l’ancienne !
- Pour effacer les fichiers que tu as mis sur Compress.
- Pour supprimer un fichier que tu as téléversé.
- Compress, t’affiche les fichiers que tu as téléversés.
- Ensuite, nous voyons l’espace économisé en pourcentage.
- Enfin, le fameux bouton pour télécharger les images compressées.
Maintenant, tu te demandes sans doute lequel choisir ? Teste les deux, par exemple compresse la même photo avec les deux logiciels et sélectionne celui qui compresse le plus tout en conservant la meilleure qualité. Après, c’est un choix et du feeling.
Compresser Images PNG : Accélérer son site Web
Tu connais WordPress ? Non, c’est super pratique si tu souhaites créer un site Web gratuitement et sans aucune connaissance en code, développement, algorithme…
Si tu connais WordPress, tu connais certainement les plugins, nous allons voir comment accélérer son site grâce à certaines extensions. Du coup, les pages de ton site vont se charger plus rapidement, tes visiteurs n’auront pas besoin d’attendre trop longtemps et ton SEO va s’améliorer : tout le monde est content 😊
Charger les images petit à petit (lazy load)
Tout d’abord, nous allons voir comment utiliser le plugin Smush – Lazy Load Images, Optimize & Compress Images de WPMU DEV. Cette extension aura deux fonctions, la première alléger de poids des images de ton site Web. La seconde, les images vont se charger lorsque ton visiteur va scroller ta page ou ton article. Pourquoi faire cela ? Ta page ou ton article n’auront pas besoin de TOUT charger d’un coup, mais au fur et à mesure, ce qui va accélérer ton site Web. Cette fonction est utilisée par les réseaux sociaux, comme Facebook.
Télécharger et activer le plugin pour améliorer la vitesse d'un site
Nous allons télécharger et installer le plugin :
- Pour commencer, survol Extensions.
- Ensuite, clique sur Ajouter.
- Ecris « smush lazy load ».
- Ensuite, clique sur Installer maintenant.
- Enfin, clique sur Activer.
Oui, comme tu peux le voir, le plugin est très populaire. Avec un million d’installations actif, et cinq mille sept cent quarante votants, qui ont donné la note de cinq sur cinq étoiles sur cinq. Cette extension a fait ses preuves. Dans mon cas, le plugin a été mis à jour il y a trois semaines, et la version est compatible avec mon WordPress.
Comment bien configurer la compression d'images
Pour commencer, nous allons cliquer sur le module Smush, dans le menu de l’administration de WordPress.
Whoaa, trop fort Smush connaît mon prénom : il est génial ce plugin !! Oui, normalement un pop-up est apparu en disant que le plugin a bien été installé. Clique sur le bouton Begin setup.
Compresser Images PNG : Automatiser la compression des images
Ensuite, assure-toi que Automatically optmize new uploads, est bien activé. Cela aura pour conséquence, dès que tu ajouteras une nouvelle image celle-ci sera optimisée : tu n’auras rien a faire, tout est automatisé, super pas vrai ?
Laisse activé Strip my image metadata, un algorithme va compresser tes images sans que celles-ci perdent en qualité visuelle. Sur un site Web, les images sont certainement l’élément le plus lourd. Google aime les sites légers, tu comprends l’importance de cette option ? Cela peut améliorer le positionnement de ton site dans les résultats de recherche de Google.
Charger les images progressivement
A Lazy load, tu peux également laisser activer Enable Lazy Loading. Quand ton visiteur sera sur une page ou un article de ton site, les images vont s’afficher progressivement, toute tes images de ta page ou l’article ne seront pas chargées d’un coup, si tu as un article de deux mille mots, avec dix images répartis tout au long de l’article. Lorsque ton visiteur va tomber sur cet article, le navigateur va charger la première image, puis, en scrollant les autres images vont se charger progressivement. La conséquence, avec cette option, ton article sera chargé plus rapidement.
Ensuite à Usage data, tu peux laisser Allow usage data tracking désélectionné, sauf si tu souhaites aider l’extension.
Enfin, il ne te reste plus qu’à tester le plugin, pour voir si tous les réglages que nous avons faits fonctionnent bien, et t’assurer qu’il n’y a pas de bug.
Tu vois qu’avec Smush il n’y a pas grand-chose à faire, une fois les réglages faits, tout est automatisé, en plus, c’est un super plugin… Pour autant, il en existe d’autres, c’est ce que nous allons voir maintenant.
Un plugin pour choisir son type de compression
Je vais te montrer une autre façon de compresser tes images sur ton site WordPress. Mais avant d’installer un plugin, nous allons créer un compte sur ShortPixel.
Il faut savoir que cette méthode peut être payante. La version gratuite te permet de compresser cent images par mois. Pour plus de détails, clique sur l’onglet Pricing dans le menu de ShortPixel.
Récupèrer une clé
Je suppose que tu es sur le site ShortPixel, clique sur Sign up dans le menu principal tout en-haut. Ensuite, entre ton adresse courriel, attention, celle-ci doit être la même que pour ton site WordPress, tu peux vérifier cela dans l’admin Réglages -> Général, de ton site WordPress. N’oublie pas de cocher la petite case à cocher, et enfin clique sur le bouton SIGN UP :
Maintenant, une clé API t’est délivrée. Copie-là, nous allons en avoir besoin pour notre plugin :
Le choix du plugin
Maintenant que tu as mis la clé à ton trousseau, nous allons pouvoir télécharger et installer le plugin ShortPixel Image Optimizer :
- Tout d’abord, dans l’administration de ton site WordPress, survol Extensions
- Ensuite, clique sur Ajouter.
- Ecris, « shortpixel ».
- Ensuite, clique sur Installer maintenant, attention il en existe deux. Fais attention qu’il s’agisse bien de « Optimizer ».
- Enfin, clique sur Activer.
Qu’observons-nous ? L’extension est très populaire : c’est le cas de le dire avec trois mille installations actives. De plus, le plugin a quatre virgules cinq sur cinq étoiles pour six cents trente-quatre votants : c’est plutôt rassurant tout ça, non ? Dans mon cas, le plugin a été mis à jour il y a un mois et la compatibilité a été testée avec ma version de WordPress.
Rentre la clé API ShortPixel
Ensuite, le plugin nous dirige vers une page pour entrer notre clé API. Au champ Clé API, colle la clé que tu as copiée juste avant. N’oublie pas de cliquer sur le Bouton Valider. Il ne nous reste plus qu’à accepter la politique de confidentialité en cochant la case à cocher :
Tu pourras demander une nouvelle clé, en cliquant sur le bouton Demander une clé.
Règlages généraux de ShortPixel
Tout d’abord, comme tu peux le voir, notre clé API est à nouveau indiquée.
Le champ juste en-dessous, nous permet de sélectionner un type de compression. Pour ma part, je vais sélectionner Avec perte, normalement cette perte n’est pas visible à l’œil nu. D’ailleurs, l’extension recommande de choisir Avec perte.
Inclure également les miniatures : il n’y a pas que les grandes images qui prennent de la place sur un site Web, mais également les petites images (miniatures). En effet, le plus souvent, les miniatures sont plus nombreuses.
Sauvegarde d’image : Je coche également cette case, cela permet d’avoir une copie de l’image en cas de problèmes.
Supprimer EXIF : Pour afficher une image sur un site Web, souvent nous utilisons une balise (en utilisant WordPress tu ne vois pas cela
). Parfois, quand WordPress crée cette balise, lorsque tu y ajoutes une image, celui-ci rajoute des informations inutiles qui vont alourdir l’image pour rien. En cochant cette cas à cocher, tu vas pouvoir ôter ces informations souvent inutiles. Bon, ce n’est pas vrai, ces infos peuvent être utiles, mais pas dans 90% des cas !
Redimensionner de grandes images : pour redimensionner l’image, personnellement, je ne coche pas cette case.
N’oublie pas de cliquer sur Enregistrer les modifications.
Règlages avancés de ShortPixel
Ensuite, à l’onglet Avancé, tu pourras faire plus de modifications.
Dossiers média supplémentaires : Tu pourras sélectionner le/les dossier(s) à compresser : images ou PDF.
Convertir des images PNG en JPEG : en cochant cette case, nous pourrons passer nos images avec l’extension PNG en JPEG. Mais attention, si tes images PNG ont un transparent, cela va être supprimé : je ne coche pas cette case !
N’oublie pas de cliquer sur Enregistrer les modifications.
Les statistiques de ShortPixel
Ensuite, à l’onglet Statistiques, nous pourrons vraiment nous faire une idée de la place que nous allons économiser grâce à ce plugin.
Dans mon cas, j’ai juste optimisé une image, elle a été compressée presque à 71 pourcents : pas mal non ? La bande passante sera moins gourmande, ce qui va accélérer le site et rendre la navigation plus agréable à nos visiteurs. 😊
Envoyons maintenant comment compresser les images.
Compresser les images avec ShortPixel
Tout d’abord, pour compresser les images, il va falloir changer d’onglet dans le menu administratif de WordPress :
- Pour commencer, survole Médias.
- Ensuite, clique sur Médiathèque.
- N’oublie pas de sélectionner l’affichage des images en ligne, sinon tu ne verras pas le bouton pour optimiser les images !
- Enfin, clique sur les boutons Optimiser maintenant, des images que tu souhaites optimiser.
Une fois l’image optimisée, à la place du bouton Optimiser maintenant, tu verras un bouton avec un hamburger, en le survolant, il y a écrit « ShortPixel Actions ».
En cliquant sur le hamburger, puis sur Compare, tu pourras voir l’avant et l’après-compression. En survolant la souris vers la gauche droite ou inversement, tu verras la différence ou pas !
Si tu cliques à nouveau sur le hamburger, nous voyons que l’extension nous propose les deux autres types de compression que nous avons vus haut dans les paramètres. Le plugin te propose également de revenir à la version originale.
Compresser Images PNG : Découvrir la taille d'une image
Tout d’abord, nous allons voir comment découvrir le poids d’une image en ligne.
Ensuite, voyons quelles étapes suivre, pour connaître le poids d’une image sur ton ordinateur.
Compresser Images PNG : Découvrir le poids d'une image sur un site Web
Pour commencer, choisis une image sur un site Web, peu importe lequel (tu peux le faire sur ton site Web 😉). Ah oui, j’allais presque oublier, dans cet exemple j’utilise Chrome, tu peux utiliser un autre navigateur si tu veux, les étapes serons les mêmes. Mais si tu utilises Chrome, tu n’auras pas de surprises, cela sera identique à chez moi. Ensuite, survole avec la souris une image sur le Web. Si tu es sur Windows, fais un clic droit au-dessus de l’image et sélectionne Inspecter :
Découvrir le débogueur HTML
Là… Ne prends pas peur ! Effectivement, tu vois le code source du site Web s’afficher (si tu es curieux(se), ce code s’appelle HTML 😊).
Si le débogueur s’affiche comme sur l’image suivante (sur le côté), et que tu souhaites l’afficher comme chez moi (en bas). Il te suffit de cliquer sur customize and control DevTools (les trois petits points), puis de sélectionner Dock to bottom :
Dans mon cas, l’inspecteur de code source HTML, me dirige automatiquement sur la balise span. Il est possible que dans ton cas cela soit différent : peu importe. Tu remarques, que l’image est en bleu lorsque je survole la balise span, cela signifie que la balise correspond à l’image : super, mais cette balise ne nous intéresse pas !
Découvrir la balise IMG avec l'inspecteur de code source HTML
En fait, normalement juste au-dessus tu verras la balise img : c’est celle-ci qui nous intéresse :
Pour être sûr qu’il s’agisse bien de la bonne balise img (de la bonne image). Tu vas rechercher dans la balise l’attribut « src », tu verras là que la valeur correspond à l’endroit où se trouve l’image. Mais ce qui va nous intéresser, c’est qu’une petite fenêtre va s’afficher, si celle-ci affiche la même image que tu as inspectée en miniature, c’est qu’il s’agit de la bonne image : cool. Dans cette fenêtre, tu vois afficher File size, avec une valeur, dans mon cas j’ai 15,3 kB : il s’agit du poids de l’image :
Voilà, tu sais maintenant comment faire pour observer le poids de toutes les images de tous les sites Web 😊
Avant que je n’oublie, pour ôter l’inspecteur de code source, tu as juste à cliquer sur la croix à côté des trois petits points, ou cliquer sur « f12 » de ton clavier :
Connaître le poids des images sur son ordinateur
Nous allons voir comment découvrir le poids d’une image sur son ordinateur. Sur Windows, va dans un dossier où tu as une image, fais un clic droit et sélection Propriétés :
Enfin, à la ligne Taille, tu verras quel est le poids à ton fichier image. Mais cette méthode fonction avec tous les types fichiers : PDF, xls, zip… :
Ce qu'il faut retenir
Avec des sites en ligne, nous avons vu qu’il est possible de compresser des images très rapidement et facilement. Si tu as un site Web sous WordPress, tu pourras également utiliser des plugins pour compresser les images png, jpeg… Enfin, nous avons vu comment découvrir la taille d’une image sur n’importe quel site Web, ainsi que sur un ordinateur.
Quel est le plugin que tu préfères pour compresser tes images ?
Top merci pour ces astuces ! Je ne connaissais pas du tout les sites Compress et Tiny, je vais tester ça. Je mets vraiment beaucoup de photos sur mes articles donc je pense que ça peut me faire gagner pas mal de temps. 🙂
Merci Judith pour ton commentaire… Oui, tu vas voir une réelle différence. De plus, ces logiciels allègent bien les images 😊
Hello Kim, merci pour ton commentaire, je suis ravi que mon article te plaise. A priori sur Mac tu n’as pas besoin de logiciel en particulier, tu as juste à ouvrir l’image puis cliquer sur Outils et Ajuster la taille. J’ai également écrit un article dédié à la compression, dans cet article j’évoque Smush qui est un plugin que j’aime beaucoup et que j’utilise. Je ne connais pas le plugin ImageOption : il me paraît très bien…
Bonne soirée à toi 😊