Un site Web lent peut nuire à ton classement sur les moteurs de recherche… Et donc limiter les visites sur ton site. Il est donc primordial d’optimiser ses images.
Plus les images sont volumineuses et plus ton site va avoir du mal à s’afficher instantanément. Quand on regarde un site, notamment via son mobile, on aime que ce soit rapide. Heureusement il existe plusieurs façons d’alléger tous les médias pour une meilleure performance de ton site Web.
Dans cet article nous allons aborder l’impact des images sur la qualité et le référencement de ton site Web. Ensuite je te partage quelques méthodes pour alléger efficacement tous tes médias.
Dans quelle mesure le poids et la taille de tes images affectent-ils les performances de ton site Web ?
Les photos peuvent affecter de manière significative la vitesse de chargement de ton site. Elles peuvent mettre à mal ses performances.
Pour offrir une meilleure expérience utilisateur possible, tu dois t’assurer que ton contenu est optimisé pour les indicateurs Web de base de Google.
[Je te rappelle que Google est le moteur de recherche le plus utilisé au monde il est essentiel de lui faire plaisir, notamment en travaillant sur ce qu’il regarde en premier sur les sites Web pour les référencer]
Nous allons dans un premier temps parler des Core Web Vitals qui sont les mesures que Google utilise pour évaluer les performances d’un site Web. Depuis 2021 il a ajouté quatre points très importants.
Lorsque tu effectues un test de vitesse de page Google va te générer un rapport basé sur ces facteurs là :
First Contentful Paint (FCP) : lorsque le navigateur montre le premier élément du Document Object Model (DOM) sur ta page.
Largest Contentful Paint (LCP) : le temps qu’il faut à ton site Web pour afficher l’élément le plus grand de ta page (généralement une image ou une vidéo).
First Input Delay (FID) : le temps qui s’écoule entre le moment où un internaute interagit pour la première fois avec ta page (par exemple en cliquant sur un bouton) et le moment où le navigateur répond à cette action.
Cumulative Layout Shift (CLS) : la quantité de contenu de ton site Web qui se déplace sur la page pendant le chargement. Par exemple, des éléments tels que des images, des popup ou des boutons peuvent se déplacer sur l’écran, empêchant les utilisateurs d’interagir avec ton site.
Voici deux moyens pour vérifier quel est le comportement de ton site Web. Il te suffit de rentrer l’URL de ton site Web pour voir le rapport et améliorer tes scores.
PageSpeed Insights
GTmetrix | Website Performance Testing and Monitoring
Voici ci-dessous le GIE Metrix du site Web AnneBurtinCreation.fr
Ce rapport donne également des suggestions sur la manière d’améliorer ses performances. Ces conseils peuvent porter sur les images qui doivent être optimisées pour un chargement plus rapide.
Par exemple le rapport peut identifier l’élément le plus volumineux de ta page. Souvent c’est un média (photo, schéma ou vidéo) qui ralenti l’affichage donc il vaut mieux le redimensionner ou le compresser. Nous allons voir plus loin comment améliorer ton score LCP (le temps qu’il faut à ton site Web pour afficher l’élément le plus grand/gros de ta page).
Voici deux façons d’optimiser les images de ton site Web
Comme je te l’ai décrit, les images peuvent affecter tes scores Core Web Vitals. Ce qui peut affecter les résultats de ton site Web notamment en matière de visite. Moins bien tu seras référencé, moins tu seras dans les premiers résultats Google… et donc moins tu auras de clients directement sur ton site.
Examinons de façon efficace d’optimiser tes photos pour une meilleure performance de ton site Web.
Comment travailler sur le poids ou sur la taille de tes images ?
Comment compresser des images pour une meilleure performance de ton site Web
Compresser les images veut dire alléger le poids de ton image. Elle gardera la même taille.
Le poids se compte en Kilo Octects (ko), Méga Octets (Mo)… mais JAMAIS tu ne dois ajouter des Médias qui feraient 1 Mo !
Il existe deux types de méthode de compression. :
Compression avec perte : cette méthode supprime une grande quantité de données de ton image ce qui va réduire considérablement la taille du fichier.
La compression sans perte : cette technique permet de réduire ton image sans supprimer de données… mais est moins efficace comme cure d’amaigrissement.
Les fichiers d’images volumineuses peuvent peser très lourdement sur les temps de chargement. Ce qui se traduit par un site Web très très très long à s’ouvrir. Ça peut prendre aussi énormément d’espace sur ton serveur dans ton hébergement. C’est pour ça qu’il est impératif de travailler tes médias avant de les incorporer à ton site Web. Il est primordial d’optimiser tes photos.
Avant de les déposer dans ton WordPress, pense à compresser ou à recadrer tes images.
La compression avec perte est généralement plus efficace que la compression sans perte pour alléger le dossier « médias ». En effet elle est une plus grande souplesse en matière de réduction de poids. Le gros inconvénient est que la compression avec perte peut avoir un impact sur la qualité de tes images. Et donc de ce que tu vas renvoyer comme vision aux personnes qui viennent sur ton site.
Redimensionner tes images en utilisant les bonnes tailles.
Le poids c’est les kilos Octets de tes images. En redimensionnant on va travailler sur la taille finale de l’image. On ne parle pas de cm, mais de pixels en informatique.
C’est un moyen très efficace d’optimiser les médias que tu utilises pour avoir de bonnes performances sur le Web. En général plus les dimensions sont grandes plus la taille du fichier est importante. As-tu besoin que tes photos soient si grandes sur ton site Web ?
Je conseille toujours de recadrer tes images avant de les télécharger sur ton site internet. Ça peut se faire à l’aide de quelques logiciels qu’on va voir plus loin.
De plus quand tu ajoutes une image sur ton site, ton CMS WordPress va générer automatiquement différentes tailles pour celle-ci. Il s’agit en général d’une version grande, une version moyenne et d’une version petite ainsi qu’une taille de vignette.
Cette façon de faire de WordPress va permettre d’afficher les images en fonction de l’appareil que tu vas utiliser pour visualiser un site internet. Que tu utilises un mobile ou un écran d’ordinateur, tu n’auras pas la même taille d’image face à toi. C’est ce qui va rendre ton site Web beaucoup plus réactif & rapide. Bien sûr c’est invisible pour l’internaute qui surfe dessus.
Chaque fois que tu intègres un média image dans ton WordPress, ce fichier va exister en plusieurs tailles.
Par contre, toi, quand tu vas ajouter un média image dans ton site WordPress tu vas lui donner la taille maximum que tu veux voir apparaître sur ton site, c’est-à-dire la taille pour la lisibilité sur un ordinateur de bureau. Cela demande d’ajouter une image à la juste taille et surtout pas trop grande (ou trop lourde) : toujours penser optimisation des photos !
Lorsque tu ajoutes une image dans un contenu de page il est préférable avant de l’insérer, de lui définir une taille.
Choisis toujours la même taille pour toutes les photos de ton site internet, c’est un conseil.
Si tu emploies une dimension plus importante que nécessaire, tu vas réduire la vitesse de ta page. De plus, tu vas prendre énormément d’espace sur ton serveur, ce qu’il va ralentir la totalité de ton site.
Je te montre dans une vidéo qui suit comment alléger tes images de manière simple et gratuite.
Comment optimiser au mieux les images de son site Web ?
Heureusement il existe de nombreux outils que tu peux utiliser pour réduire la taille de tes images. Ton site Web va t’en remercier. Dans cette section je te présente plusieurs bonnes pratiques à mettre en place avant de déposer les médias sur ton site WordPress.
Utiliser un outil en ligne ou un plug-in de compression d’image
Comme on n’en a parlé dans un précédent chapitre la compression permet de réduire le poids et donc les ko de ton fichier. Un peu pareil qu’un .zip que tu fais avec un clic droit et qui permet de compresser un dossier.
De nombreux outils en ligne existent pour diminuer la lourdeur de tes photos.
Il y a Adobe Photoshop éléments, la version gratuite qui te permet de faire ça en ligne ou Microsoft photo.
Là je te propose d’utiliser un outil comme TinyPNG : TinyPNG – Compress WebP, PNG and JPEG images intelligently
Ces outils utilisent la compression avec perte pour réduire la taille de tes Fichiers. Il te suffit de glisser-déposer ton image sur le site et il va te faire un allègement directement.
La version gratuite est largement satisfaisante. Avec la version pro tu peux choisir le poids de ton document final.
Et cela te permet d’optimiser les images AVANT de les déposer dans le dossier Média de ton site web.
Il y a également un plug-in d’optimisation d’image que tu peux intégrer à ton WordPress.
C’est-à-dire que dès que tu vas ajouter un fichier tu vas pouvoir le compresser de manière à ce qu’ils apparaissent plus légers sur ton site Web.
Ici je te parle par exemple de Imagify Imagify – Optimize Images & Convert WebP – WordPress plug-in | WordPress.org
On peut également redimensionner des images dans WordPress. Il suffit de sélectionner ton média dans ton article ou dans ta page et d’ajuster la largeur et la hauteur à partir du panneau de paramètres sur ta droite.
Tu peux également aller directement dans ta médiathèque d’images et sélectionner ta photo pour la modifier. Cette action t’amènera sur une fenêtre dans laquelle tu peux recadrer et redimensionner ton image. Lui donner une nouvelle taille va lui permettre de s’alléger.
Comment te forcer à avoir une taille minimum de médias en modifiant la limite maximale de téléchargement ?
Quand tu fais installer un WordPress par ton hébergeur celui-ci va te bloquer le poids maximal de ce que tu peux déposer dans ton site Web. Tu peux aller plus loin et, toi aussi, t’obliger a bloquer ce poids.
Tu peux aller le vérifier dans le tableau de bord de WordPress > Média > ajouter.
Sur cette page tu verras la limite autorisée de téléchargement.
En général on n’a pas besoin de changer cette valeur, sauf si tu n’as pas l’habitude de recadrer tes images avant de les déposer dans ton WordPress. Tu peux donc te forcer à te limiter dans le poids de tes Fichiers.
Si vous êtes plusieurs utilisateurs sur le même site, et que certains ont de mauvaises pratiques, tu peux ainsi les contraindre à avoir des images plus légères.
Tu peux aussi demander à ton hébergeur de modifier la taille maximale des fichiers à télécharger. Ça te permet de minimiser ton impact sur le serveur et sur tes pages.
La façon la plus simple pour alléger et recadrer mes images.
Dans cet article je te donner de nombreux sites où tu pouvais avoir des images gratuites et libres de droits. Malheureusement ces fichiers sont souvent très volumineux. Heureusement j’ai une technique sans frais et ultra simple pour recadrer et alléger des images.
Regarde la vidéo ci-dessous tout est expliqué
[yotuwp type=”videos” id=”rAz2Jh4VyE4″ ]
Accès à Canva en ligne. La version gratuite est suffisante.
Une fois qu’elles sont passées par canva les images sont très légères. Tu peux les intégrer à ta bibliothèque de médias immédiatement ou les passer dans TinyPNG.
D’ailleurs grâce à Canva tu vas pouvoir aussi garder toujours la même taille de fichier.
Par exemple pour mon blog que tu lis actuellement je prends la taille « couverture Facebook » ça me permet d’avoir une image très large et peu haute. Très intéressante pour des captures d’écran. Et ainsi avoir le même style sur mes différents articles. (cohérence graphique)
L’optimisation de tes images accélère et perfectionne ton site Web.
Outre le fait que Google t’examine et donne une note à ton site, en allégeant tes éléments tu vas améliorer l’expérience de tes utilisateurs.
Des médias light, c’est une performance améliorée.
Dans cet article je t’ai apporté plusieurs méthodes pour optimiser tes images et tes performances. Ses techniques vont de la compression du poids à l’ajout de plug-in ou au redimensionnement de tes photos.
J’espère qu’elles te seront utiles et que tu vas te distinguer par ta fulgurance.
Si tu veux en savoir plus sur les sites web, inscris-toi juste en dessous et reçois gratuitement mon guide pour avoir de bonnes bases.
Si tu veux construire ton site web et que tu as peur de la technique, cette offre est faites pour toi
