Optimiser ses images pour le web

6 astuces regroupées dans un guide

Une question qui revient TRÈÈÈS souvent: quelle taille je dois choisir pour mes photos?
Je te présente ici un nouveau guide WordPress que je viens de mettre en ligne pour t’aider à optimiser tes images pour le web. Tu vas pouvoir travailler la taille de tes images mais également d’autres éléments qui t’aideront à avoir un site plus SEO friendly.

Ton site mouline dès que tu cliques quelque part et tes images sont hyyyyper lentes à apparaître?
Tu télécharges tes photos directement depuis ton appareil ou ton téléphone, elles pèsent 2 Mo chacune et du coup le poids de ton site explose (et ton SEO n’est pas bon)?
Tes fichiers ont des noms exotiques comme img_2932.jpg?

Télécharge le guide complet

J’ai rassemblé ici plein d’infos utiles telles que les meilleures tailles à utiliser, quel format choisir, comment alléger tes images, les nommer, les compresser…et cerise sur le gâteau, améliorer ton référencement naturel!
C’est pas canon çà?! 🤩

01 Pourquoi optimiser ses images pour le web ?

L’optimisation des images consiste à travailler les images en amont, pour qu’elles aient le bon format, la bonne taille, soient les plus légères possibles. Elles se chargeront plus rapidement sur ton site, tout en gardant un chouette aspect pour tes visiteurs, sans altérer la qualité des images. C’est aussi une question de référencement naturel, de référencement d’image.

Costaud non?!?

Si j’ai un conseil à te donner, c’est de toujours préparer tes images AVANT de les télécharger dans ta bibliothèque WordPress! Tu vas gagner du temps et çà t’évitera d’avoir une foule de médias inutilisés (et non supprimés... sisi, je t’assure) dans ta bibliothèque qui vont ralentir ton site pour rien.

02 Quel format choisir pour ses images ?

Les trois formats de fichiers fréquemment utilisés dans le web : JPEG, PNG et GIF

JPEG : la meilleure option pour les photos, grande variété de couleurs, peut être compressée pour réduire la taille du fichier (en diminuant la qualité), plus léger donc plus rapide à télécharger
PNG : idéal pour les dessins, les logos, les textes car permet d’avoir un fond transparent. Moins de couleurs disponibles, utilise une compression sans perte de qualité (donc plus gros, donc plus lourd)
GIF : à mi chemin entre une photo et une vidéo, permet de charger des images animées. Peut également être utilisé pour des images simples (de moins bonne qualité que les JPEG)

Pour être sûre que tes images soient lues correctement par Google, préfère un de ces 3 formats plutôt que d’autres du style SVG ou EPS (qui en plus ne sont pas acceptés nativement par WordPress)

03 Les meilleures tailles d'images pour ton WordPress

En fonction de l’emplacement et l’utilité de ton image sur ton site, voici la taille des images que je te recommande:

Logo: 200×100 pixels (à adapter pour qu’il reste lisible)
« Hero image » plein écran: 1920 x 1080 pixels
Bannière plein écran: 1920 pixels (hauteur à ajuster selon tes besoins)
Image mode portrait: 800 x 1200 pixels
Image mode paysage: 1200 x 800 pixels
Image miniature :150 x 150 pixels

Selon le thème WordPress que tu utilises, les dimensions des médias nécessaires seront indiquées, pas de panique!

Dernière chose, si tu utilises un « page builder » tel qu’Elementor par exemple, tu vas pouvoir ajuster ta photo au pixel près pour avoir le rendu visuel que tu souhaites.

04 Alléger tes images pour ton site web

La taille est importante, le poids également!

Les images lourdes vont ralentir ton site, ce qui va péjorer ton référencement naturel et l’expérience de tes visiteurs.

Lorsque tu prends une photo depuis ton appareil photo ou télécharges une image depuis une banque d’images gratuites, elles sont en général de très grandes tailles avec une haute résolution (300 dpi = dots per inch/pixels par pouce) pour avoir une top qualité à l’impression, donc lourdes.

Pour le web, une résolution de 72 dpi est suffisante, tu vas donc pouvoir travailler sur le bikini body de tes images.

Idéalement, tes (grandes) images ne devraient pas dépasser les 200Ko (exception faite si ton business est dans la photo, l’architecture, les voyages etc… donc très visuel avec de grandes photos, tu peux monter un peu)

En plus d’avoir retravaillé la taille de ton image – ce qui va déjà l’alléger – tu vas pouvoir utiliser des outils de compression (tu trouveras une liste dans la boîte à outils) sans perdre en qualité d’image… magique!

Voici un exemple d’outil ici

Picresize.com

05 Nommer tes fichiers pour qu'ils soient SEO friendly

Les moteurs de recherches explorent les noms de fichiers des images.

Un bon nom de fichier, court, pertinent, avec de bons mots clés, va t’aider à optimiser ton image, donc booster ton référencement naturel.

Deuxième bon point, lorsque tu vas rechercher une photo précise la multitude d’images de ta base de données ou ta bibliothèque WordPress, il sera beaucoup plus simple de mettre la main dessus grâce à son nom.

Nom de fichier en minuscules, sans accent ni ponctuation, sans espace
Utilise des tirets « – » pour séparer les mots
Nom de fichier cohérent avec l’image
Pas de fioriture inutile tel que «le», « des», «et» dans le nom de fichier, keep it simple!

IMG_20190615_1129.jpg = non
gateau-sans-gluten.jpg = oui

06 Remplir le texte alternatif

Le texte alternatif (balise Alt) est un bon levier pour booster ton référencement naturel, augmenter tes chances d’apparaitre dans la bibliothèque d’images de Google et donc d’augmenter le trafic vers ton site !

Ce texte alternatif est utilisé pour deux choses :

⟶ décrire l’image (ou la remplace si elle ne s’affiche pas correctement dans le navigateur). Il est lu par les moteurs de recherche, les aide à comprendre ce que représente cette image, ce qu’elle apporte aux internautes, c’est donc le bon moment d’y faire figurer les bons mots clés sur lesquels tu souhaites te positionner.

⟶ l’accessibilité à ton site : certains utilisateurs malvoyants ou aveugles utilisent des lecteurs d’écran qui lisent les images grâce aux textes alternatifs, c’est important de rendre ton site accessible à tous.

Retrouve encore plus d’infos et astuces pour optimiser tes images pour le web dans le guide.