Tu le sais, les images sont très importantes pour ton site internet. Mais si elles peuvent le mettre en valeur, elles peuvent aussi plomber totalement ton site.
Du choix de tes visuels à leur optimisation, en passant par le format, je t’ai préparé un guide complet qui te permettra de bien utiliser les images sur ton site.
Prépare-toi un café, on y va !
1. Pourquoi utiliser les images sur un site web ?
Les images (et visuels) font partie intégrante de ton identité de marque et peuvent remplir plusieurs fonctions :
- Illustrer tes propos
- Mettre tes offres en valeur
- Créer un rythme de lecture sur tes pages (celles-ci sont plutôt “décoratives”)
- Informer tes visiteurs pour une boutique en ligne
- Mais aussi participer à ton référencement….
Mais si elles ont de nombreux bénéfices, elles peuvent aussi desservir ton site et ses objectifs.
Mal utilisées, elles :
- Ralentissent le chargement de tes pages
- Créent une mauvaise expérience utilisateur (UX)
- Compliquent la navigation (mobile)
- Décrédibilisent ta marque (incohérence, amateurisme)
- Entrainent une mauvaise accessibilité
- Ont un impact négatif sur ton SEO…
Des images, oui, mais pas n’importe comment !
2. Quelles sont les caractéristiques d'une image ?
La qualité (et le poids) des images dépend de plusieurs facteurs (en plus du talent du photographe et de son matériel) :
- Le format (le type de fichier : PNG, JPEG, WEBP…)
- La résolution C’est la densité de pixels qui se mesure en pixels par pouce (ppi) ou points par pouces (dpi). Pour une impression : 300 ppi Pour le web : 72 ppi
- Les dimensions
3. Comment bien choisir les images pour ton site internet.
Des images cohérentes
Il faut que tes images “fonctionnent” les unes avec les autres, que tu créées un ensemble harmonieux.
Mais ce n’est pas qu’une question d’esthétisme, loin de là. Les visuels doivent être en phase avec ton identité de marque et ton message. Que ton univers soit haut de gamme, minimaliste, coloré ou “green”, cela doit se refléter dans le choix de tes photos et/ou illustrations.
Palette de couleurs
Utilise une palette de couleurs cohérente avec ta charte graphique. Si elle est principalement des tons bleus et verts, essaie de choisir des images qui s’accordent ou intègrent ces couleurs (même par petites touches).
Ambiance et atmosphère
Ta communication peut être à la fois pro et fun, tant qu’elle est cohérente.
Minimaliste sur une page, sapin de noël sur une autre ? C’est non.
Contexte
Les images doivent être pertinentes avec ton contenu, particulièrement avec celui qui est à proximité immédiate.
À moins d’une métaphore claire ou de storytelling sur ta page “À propos”, une photo de ta dernière réalisation culinaire n’est probablement pas adaptée…
Des images personnalisées.
Idéalement tes photos auront été faites spécialement pour ton site afin qu’il soit vraiment personnel. Et si tu n’as pas le budget pour faire appel à un photographe, rassure-toi, il est possible de faire des photos de bonne qualité avec un iPhone (récent c’est mieux).
Fais simple, évite la surcharge et les éléments perturbateurs et assure-toi d’avoir :
- Une bonne luminosité
- Pensé à la composition (la règle des tiers, les lignes, l’équilibre…)
- Un cadrage adapté
- De l’espace (laisse toujours tes sujets respirer, il est plus facile de recadrer que de regagner de l’espace !)
Mais si certain(e)s s’en sortent très bien, ce n’est pas le cas de tout le monde… Dans le doute, mieux vaut toujours passer par une banque d’image que d’avoir des photos pourries.
Coté illustrations :
Petit rappel :
Les photos trouvées sur internet, les réseaux sociaux ou Pinterest ne sont pas libres de droits.
Tu ne peux donc pas les utiliser sans l’accord de leur propriétaire.
Dans la mesure où certains visuels de banques d’images peuvent être pleins de clichés ou sur-utilisés, n’hésite pas à les personnaliser si tu le peux (logo, couleurs, des slogans ou même le fait de les utiliser dans des formes inhabituelles).
Tu n’as pas envie que ton site soit impersonnel ou ressemble à celui de tes concurrents !
Maintenant que tu as tes photos, passons à la suite…
4. Quelles dimensions d'images utiliser sur ton site ?
Non, tu n’as pas besoin d’images en 5000px de large sur ton site !
Tes pages seraient beaucoup trop lourdes (et longues) à charger, les performances de ton site seraient moins bonnes, tout comme ton référencement… #fail
Tu doutes encore ? Quelle est la résolution de ton écran ? Les portables sont généralement entre 1200 et 1500px.
D’ailleurs, tu as remarqué que les sites ne sont jamais en pleine largeur, y compris sur les écrans “larges” ? Parce que ce format n’est pas adapté au web, ni même à la lecture.
Une longueur optimale de ligne est généralement estimée à 75-80 caractères.
(Pour te donner un ordre d’idée, la phrase précédente en fait 75).
Imagine comme elle serait perdue sur écran “wide” !
Autre indice concernant la taille des visuels, depuis sa version 5.3, une fonction de redimensionnement automatique des images à été intégrée à WordPress.
Le seuil par défaut est de 2560 pixels. Si la hauteur et/ou la largeur d’une image importée dépasse ce seuil, l’image sera redimensionnée et la mention “scaled” ajoutée au nom de fichier.
Mais c’est encore beaucoup trop grand !
Les dimensions de tes images dépendent de leur utilisation.
Oui, il serait plus simple d’avoir une seule taille pour toutes les images et visuels de ton site… Mais il serait moins performant et efficace.
Il y a une multitude de dimensions possibles, mais je sais que tu n’as ni le temps, ni l’envie d’y passer des jours. Je vais donc te donner les principales dimensions d’images qui te permettront d’avoir un site professionnel et optimisé (sans avoir à y passer des jours).
Les dimensions pour tes images de fond (background/Hero).
Attention aux images en “pleine largeur” : elles ne seront probablement pas adaptées sur mobile. Si tu souhaites en savoir plus sur ce point, je tu peux aller lire mon article “5 conseils simples pour faire un site responsive” !
Les dimensions pour les images de ta boutique.
Les dimensions pour les images de tes pages et articles de blog.
Les dimensions pour les logos et icônes.
5. Quel format d'image choisir pour sur ton site web ?
Maintenant que tu maîtrises les dimensions de tes visuels, passons au format !
Il en existe des dizaines, à chacun, ses qualités et son utilisation !
Je t’ai synthétisé les caractéristiques des 5 principaux formats d’image utilisés sur le web : SVG, JPEG, PNG, GIF, WebP…
Le SVG pour les éléments vectoriels.
Le SVG a beaucoup d’avantages :
- Fichiers très légers
- Scallables (redimensionnables à l’infini sans perte de qualité)
- Ils peuvent être édités en CSS et animés en Javascript
Et plein d’utilisations possibles : logos, graphiques, masques, icônes…
Le WebP pour les photos et images.
Le format WebP n’a que des avantages pour ton site :
- Format Next-Gen haute qualité
- Léger (en moyenne 25% plus petit que le PNG et 30% que le JPEG)
- Adapté aux visuels et aux animations car il supporte la transparence
- Pris en charge par tous les navigateurs depuis 2020
Et c’est surtout l’un des deux formats recommandés par Google pour améliorer le temps de chargement de ton site.
Voici un extrait d’une analyse Google Page Speed sur un site qui n’utilise des images au format PNG (je n’évoque pas le format AVIF car à l’heure où j’écris ces lignes, son utilisation est encore limitée par des problèmes de compatibilité).
Améliorer le temps de chargement de ton site,
c’est améliorer ses performances globales.
Donc améliorer son référencement.
A titre de comparaison, voici la même image aux formats JPEG et WebP.
Si ta page contient 10 photos, c’est près de 4Mo de données qui seront économisés à chacun de ses chargements… C’est juste énorme !
Si tu m’as lu(e) jusqu’ici (bravo pour ta patience), tu sais maintenant quelles dimensions et formats d’images utiliser pour ton site internet.
Tu as même quelques pistes pour trouver de belles images (en attendant de pouvoir faire appel à un photographe).
Encore un peu de patience, je vais t’expliquer comment passer d’une photo au format JPEG ou un visuel PNG que tu auras créé sur Canva, à un fichier optimisé au format WebP.
6. Comment optimiser tes images pour améliorer la performance et le SEO de ton site ?
Il existe plusieurs options :
- La compression avec un plugin WordPress
- La compression avant upload
La compression avec un plugin WordPress
Un plugin de compression traite les images lorsque tu les uploades sur ton site, en créant/modifiant une page, par exemple.
J’ai utilisé cette méthode pendant un moment et je dois avouer que je ne te la recommande pas.
Sur le papier, c’est simple et gratuit pour un petit volume de données…
Mais, dans les faits, pas toujours ultra efficace.
Leurs options sont généralement limitées au choix du taux de compression. Selon la qualité de ton fichier d’origine, les résultats peuvent être très variables.
En plus, cela remplace les fichiers de ta médiathèque ou en créé des doublons…
Cela t’oblige à vérifier, puis retraiter/réorganiser certaines de tes images manuellement. Et là, clairement, c’est une (grosse) perte de temps.
Si tu veux tester cette méthode et te faire ta propre idée, voici 3 plugins WordPress :
La compression avant upload
J’ai testé plusieurs méthodes au cours des 3 dernières années et c’est de très loin ma favorite.
Ses avantages :
- Tes images sont au bon format
- Elles sont parfaitement compressées et optimisées
- Ton serveur ne stocke que les images dont tu as besoin
- Tes pages sont rapides à charger
Tu peux le faire avec un logiciel type Photoshop mais si tu ne l’as pas, il existe plusieurs solutions rapides, gratuites et terriblement efficaces, comme BulkResize ou Shortpixel.
7. Optimiser tes images avec BulkResize.
À l’heure où j’écris ces lignes, c’est mon outil préféré. Comme il propose plusieurs options, je te donne un petit mode d’emploi.
Ce sont mes réglages de base et ils fonctionnent dans la plupart des cas, mais n’hésite pas à faire des tests pour trouver ceux qui sont les plus adaptés à tes visuels et à leur qualité d’origine.
Recadrer tes images (photos et visuels) si besoin.
Tu as une image au format portrait et tu veux l’utiliser au format carré (pour ta boutique par exemple) ?
Ou une photo au format paysage dont tu ne veux garder qu’une partie au format portrait ?
Désolée mais tu ne pourras pas y échapper, tu dois recadrer tes images selon leur utilisation (voir la partie “dimensions”) avant optimisation. Bonne nouvelle, c’est tout simple :
- Sur Windows : Outils Image > Format > Rogner
- Sur Mac : Outils > Selection rectangulaire > Recadrer
Aller sur le site de BulkResize avec ton navigateur préféré.
Tu peux sélectionner tes images ou les glisser/déposer dans le cadre.
Les options d'optimisation proposées par Bulkresize.
Dans le menu de gauche, tu trouveras 6 options d’optimisation.
Cas 1 : Tes images sont déjà aux bonnes dimensions.
Par exemple 1920×1080 pour une image de fond ou 800×800 pour un produit de ta boutique.
Tu choisis “Pourcentage” puis les paramètres de compression.
Pourcentage : 100% pour conserver les dimensions d’origine.
Format : WebP (mais ça tu t’en doutais un peu)
Qualité : 80%
Ce paramètre dépend de la qualité de ton image d’origine mais 80% est mon réglage par défaut, que j’ajuste si besoin.
Arrière plan transparent, si nécessaire.
Tu peux lancer l’optimisation en cliquant sur “Début”.
Cas 2 : Tes images sont au bon ratio mais pas aux bonnes dimensions.
Tes photos sont carrées (ratio 1:1) ou paysage (ratio 16:9) mais dans leurs dimensions d’origine, trop grandes.
Tu choisis “Coté le plus long” puis les paramètres de compression. Par exemple 1920×1080 pour une image de fond ou 800×800 pour un produit de ta boutique.
Coté le plus long : la dimension souhaitée selon ton utilisation
Pourcentage : 100% pour conserver les dimensions d’origine.
Format : WebP (again)
Qualité : 80%
Ce paramètre dépend de la qualité de ton image d’origine mais 80% est mon réglage par défaut, que j’ajuste si besoin.
Arrière plan transparent, si nécessaire.
Tu peux lancer l’optimisation en cliquant sur “Début”.
Tadaaaaaaaa !
Tes images sont compressées, tu n’as plus qu’à admirer le gain de place.
8. Le SEO et tes images
Tes images sont désormais “SEO friendly” et elles vont maintenant devenir “SEO optimisées” !
Petit rappel, les balises alt (texte alternatif) décrivent le contenu de tes images pour les moteurs de recherche et les lecteurs d’écran. Elles sont indispensables pour l’accessibilité et le référencement de ton site.
Renomme tes fichiers avant upload.
Le nom de tes images doit être :
- Écrit en minuscule
- Sans accent, ni espace, ni mot de liaison
- Descriptif (pas de image274.webp)
- Contenir tes mots clés (sans excès)
Ajoute un Alt-Text (text alternatif).
Lorsque tes images sont uploadées sur ton site, tu peux aller dans la médiathèque WordPress.
Et si tu veux utiliser certaines images dans une galerie, par exemple, n’oublie pas d’ajouter une description et/ou un libellé afin de pouvoir l’afficher.
Conclusion
Voilà, tu es arrivée à la fin de cet article.
Tu as peut-être eu la migraine en lisant certains passages et j’en suis désolée. Mais…
Il fallait bien ça pour couvrir un sujet aussi important, non ?
- Tu as maintenant toutes les infos pour bien utiliser tes images sur ton site
- C’est bien moins compliqué qu’il n’y parait, promis !
- Le plus important est de prendre de bonnes habitudes, cela te fera gagner un temps précieux tout au long de la vie de ton site.
Tous ces conseils sont valables lors de la création de ton site mais aussi tout au long de sa vie, lorsque tu modifies/ajoutes des articles, des pages…
D’ailleurs, si tu en te sens pas le courage de créer ton site par toi-même, nous pouvons discuter ensemble de ton projet !
Et pour ce qui est des performances et du SEO… Je te laisse juger !
