Optimiser vos images pour le web est un élément essentiel de votre stratégie de contenu web. En effet, mal choisies, trop lourdes ou mal optimisées, elles peuvent vous faire perdre des visiteurs. Soit parce que votre page est trop longue à s’afficher, soit parce que l’effet produit laisse à désirer ! Analyse d’un problème souvent sous-estimé.    

Chaque site web a besoin d’images.

Les images donnent vie à votre site et le mettent en valeur. Mais si elles sont si importantes, c’est aussi et surtout parce qu’elles se retiennent mieux et sont plus susceptibles de convaincre et « convertir » vos visiteurs.

Quand un visiteur atterrit pour la première fois sur un site, tout ce qu’il voit est instantanément traité par sa mémoire de travail (c’est à dire la mémoire à hyper-court terme qui va tirer en quelques millisecondes des informations de la mémoire à long terme pour juger de l’intérêt de ce qu’elle voit). [Source : conversionxl]

Le saviez-vous ?

  • notre cerveau traite les images 60,000X plus vite que le texte
  • un nouveau visiteur évalue un site en moins de 0,10 sec.
  • 40% des personnes répondent mieux à un stimulus visuel
  • nous retenons 80% de ce que nous voyons (contre 20% de ce que nous lisons)
  • l’internaute ne lit en moyenne que 20% du texte d’une page web
L

Optimiser vos images pour le web est indispensable. Voici pourquoi.

Le poids des images influe directement sur le temps de chargement d’une page web.

Chaque image doit valoir son pesant d’or pour justifier sa place dans votre site. Oubliez les fantaisies graphiques de votre web designer et réfléchissez plutôt à ceci : la rapidité d’un site est un des critères essentiels pour obtenir une bonne note de Google et éviter de perdre des visiteurs.

Jetez un oeil critique à vos contenus visuels et posez-vous les bonnes questions :

  • Est-ce que le poids supplémentaire aide à la compréhension ou à l’attrait de la page ?
  • Est-ce que l’image est suffisamment percutante et pertinente ?
  • Est-ce que l’image titille la curiosité du lecteur au point de le pousser à lire la suite ou à agir ?
  • Est-elle correctement positionnée, clairement nommée et décrite ?

Si vous n’êtes pas sûr des réponses, il est temps de commencer à tester, mesurer et optimiser.

Les images représentent souvent la majorité des octets téléchargés sur une page Web, et occupent également une grande partie de l’espace visuel. En conséquence, l’optimisation des images permet souvent de réaliser les économies en octets et les améliorations des performances les plus importantes pour votre site Web : moins le navigateur doit télécharger d’octets, moins il y a de compétition pour la bande passante du client, et plus vite le navigateur peut télécharger et afficher le contenu utile à l’écran.  [source: Google]

Passons à présent en revue 8 pistes d’optimisation

1. Choisir les bonnes images

Parce qu’elles captent l’attention plus sûrement que les mots, parce qu’elles frappent les esprits plus longtemps et parce qu’elles sont chargées d’émotions, les images contribuent à améliorer le taux de conversion de votre site. Il est donc naturel d’en inclure dans vos pages web, à condition de bien les choisir.

Vos prospects sont avant tout intéressés par leurs propres projets. Ils se soucient moins de vos produits ou de votre entreprise que de trouver une solution à leur problème ou une réponse à leur envie. Inspirez-les, mettez-vous à leur place et montrez-leur qu’ils sont à la bonne adresse.

Pour faire un choix éclairé, trois critères s’imposent :

  1. La pertinence
    Les images doivent illustrer et enrichir votre propos sans détourner l’attention et sans induire en erreur. Si vos images ne sont pas clairement liées au thème central de la page, elles créeront de la confusion chez vos lecteurs.
  2. La simplicité
    Des visuels clairs et faciles à comprendre serviront votre propos, sans distraire inutilement. Ils doivent donner envie de lire le texte qu’ils illustrent.
  3. La cohérence
    En même temps que vous définissez le design de votre site, réfléchissez au style de vos visuels. Trouvez votre style. Gardez un look homogène à travers toutes les pages de votre site renforcera votre identité.

Fuyez comme la peste les photos passe-partout des banques d’images. Les internautes reconnaissent au premier regard ces photos aseptisées, ces sourires superficiels et ces poignées de main béates. Avez-vous donc si peu de personnalité et de créativité ?

Impact de photos positives et humaines

Des images fortes et positives pour convaincre et humaniser l’entreprise. (crédit: Croix Chatelain)

Et si vraiment vous n’avez ni le temps, ni le budget, ni l’envie de créer vos propres photos, essayez au moins de trouver des photos qui n’auront pas été utilisées par des centaines d’autres sites. Les sites et les banques d’images plus ou moins libres de droit se multiplient. À vous de trouver celles qui n’auront pas encore été trop souvent publiées.

Par contre, si vous prenez vous-mêmes vos photos ou créez vos propres visuels, soignez la qualité et évitez les photos prises à la va vite et sans stratégie. Elles laisseront une impression d’amateurisme que vous peinerez à gommer, même si vos produits sont excellents.

Voyons à présent comment optimiser les images retenues pour obtenir la meilleure qualité sans ralentir votre site et sans frustrer vos visiteurs.

2. Utiliser le bon format d’image

Après avoir choisi la bonne image, il convient de choisir le bon format de fichier en fonction du type d’image et de son utilisation. Les formats les plus courants sur le web sont au nombre de trois.

  • JPEG : le format idéal pour les photos. Il est léger, supporte différents niveaux de compression et gère 16,7 millions de couleurs. Il offre le ratio qualité/poids optimal pour le web.
  • PNG : utilisé pour les illustrations qui utilisent de aplats de couleurs ou intègrent du texte. Contrairement au jpg il gère la transparence. Idéal pour les logos, infographies, schémas.
  • GIF : le formatà privilégier pour les animations simples. Il prend en charge un maximum de 256 couleurs et supporte la transparence.

Vous devrez donc dans un premier temps déterminer la nature de votre image (logo, photographie, icône, image animée…) pour choisir le bon format.

choisir le format d'images pour le web

Source : Infographie « Know your image formats »

3. Soigner la qualité et l’esthétique

Cela semble une évidence, non ? Pas si sûr à voir certains sites. Certes, il n’est pas nécessaire d’être un photographe professionnel pour insérer de superbes photos sur son site. Néanmoins, il vous faudra un minimum de sens artistique et maîtriser les fondamentaux du design web !

Quelques conseils pour mettre en valeur vos images comme un pro :

  • Recadrez vos photos pour en maximiser l’impact.
  • Homogénéisez la taille des images présentées sur une page.
  • Organisez vos photos de manière harmonieuse
  • Équilibrez la composition de la page et laissez-la respirer

Innocent-images

4. Adapter la taille des images AVANT de les intégrer dans votre site

Abordons à présent quelques aspects plus techniques du traitement des images de votre site. Nous avons vu que les images ont un impact direct sur la vitesse d’affichage d’une page web. Ce qui veut dire que plus vous aurez d’images peu optimisées, plus le temps de chargement de votre page sera long. 

Pour éviter de faire fuir les visiteurs (de plus en plus impatients), vous devez donc impérativement optimiser chaque image AVANT de les intégrer dans votre site. L’idée est de réduire au maximum leur taille (dimension) et leur poids tout en conservant la meilleure qualité possible.

Pourquoi parler de dimension plutôt que de résolution ?

Chaque image occupe un espace spécifique sur une page web. Quand on parle de taille ou dimension d’une image, on parle de largeur et hauteur de l’image exprimées en pixels. Les photos extraites d’un appareil numérique avoisinent les 3000 à 5000 pixels. Or la taille moyenne des écrans est bien inférieure (largeur entre 1024 et 1680 px). Vous devez donc redimensionner vos images pour qu’elles aient les bonnes dimensions.

L’une des techniques d’optimisation d’image les plus simples et les plus efficaces consiste à vous assurer que vous ne transportez pas plus de pixels que nécessaire pour afficher l’élément à la taille souhaitée dans le navigateur. Ça paraît plutôt simple, n’est-ce pas ? Malheureusement, la plupart des pages échouent à ce test pour la plupart de leurs images : elles envoient généralement des éléments plus volumineux et comptent sur le navigateur pour les redimensionner (ce qui consomme également des ressources supplémentaires du processeur) et les afficher à une plus faible résolution. [Source : Google]

Il est contreproductif d’intégrer des images plus grandes et de laisser le soin du redimensionnement au navigateur. Mieux vaut le faire en amont ! Il y a des tas de logiciels qui le font bien mieux que votre CMS. Les pros ne jurent que par Photoshop mais il existe aussi de nombreuses autres solutions en ligne, gratuites ou peu onéreuses (comme Pixlr).

Redimensionner vos photos est un bon début mais vous pouvez aller encore plus loin.

5. Compresser vos photos

La question qu’on peut légitimement se poser, c’est : quel est le poids idéal d’une image web ?  La réponse dépend bien sûr de toute une série de facteurs :

  • Quel est l’objectif de votre site (si vous êtes photographe ou architecte, vous n’aurez pas les mêmes exigences qu’un consultant ou un avocat),
  • Combien d’images voulez-vous insérer sur votre page et pour quelle utilisation (photo plein écran, plusieurs photos pour un site parallax, etc.).

Quoi qu’il en soit, même si tout est relatif, je me risque à vous donner quelques indications :

  • un logo ne devrait pas peser plus de quelques ko.
  • une image à l’intérieur d’un article de blog ne devrait pas dépasser 50-100 ko
    et plus vous ajoutez d’images à votre page, plus vous devrez veiller à ne pas l’alourdir inutilement
  • Une image en pleine page (2000 px) atteint vite 200 ko et plus, tout dépend de vos objectifs.

L’essentiel est que la page reste agréable à regarder et se charge en moins de 5 secondes.

6. Renommer chaque fichier image

Avant de télécharger une image sur votre site web, pensez à lui donner un nom descriptif et compréhensible. Trop de noms de fichiers images ne sont qu’une série de chiffres générée automatiquement par l’appareil photo d’où elles proviennent.

Et même si cette étape peut sembler fastidieuse, prenez le temps de renommer chaque fichier AVANT de le télécharger sur votre site. Après, ce ne sera plus possible.

Voici quelques consignes à suivre pour nommer correctement vos images :

  • Utilisez des mots clés qui apparaissent dans votre page web
  • Soyez concis, ne dépassez pas 3-5 mots maximum
  • N’utilisez ni accent (à,è,é,ç) ni caractères spéciaux (*&?%%) ni majuscules
  • Séparez les mots-clés avec des traits d’union (-) et non des soulignés “underscores” (_)
  • Pensez à vous faciliter l’archivage et la recherche ultérieure

Renommer chaque fichier vous donnera un petit avantage sur vos concurrents. Voici pourquoi :

  • Si Google comprend vos images, il pourra les interpréter et les référencer. Vous serez donc visible sur Google Image également.
  • Si le nom et la description de votre image sont explicites, les internautes pourront arriver sur votre site à partir d’une recherche d’image
  • Si vous faites attention à l’usage correct des espaces, accents, etc. dans votre nom de fichier, vous évitez les erreurs 404 ou les url illisibles

Astuce gain de temps : utiliser la touche F2 pour renommer vos fichiers : cela vous permet d’éditer directement le nom du fichier sans avoir à faire un clic droit ⇒ Renommer !

7. Compléter les balises et la description de vos images

Si vous ajoutez des images à vos textes, ce n’est pas uniquement pour « faire joli », c’est aussi pour enrichir votre message et le rendre plus accessible, plus visible. C’est là qu’intervient le référencement naturel … et le travail sur les balises. Voici quelques techniques SEO qui ont fait leur preuve.

Pour référencer correctement vos images, il convient de compléter 3 ou 4 éléments liés à chaque image.

image-alt-title-wordpress

  1. La balise Title ou titre de la photo. C’est le seul élément obligatoire pour les CMS. Par défaut, elle reprend le nom de votre fichier image. Pas top si vous n’avez pas changé l’url de ce fichier (Imaginez comme titre : dsc15968.jpg) ! Vous avez donc tout intérêt à créer un titre descriptif, court et pertinent et qui reprendra les mots clés de votre page (comme l’url).
  2. La balise Alt fournit un texte alternatif à l’image. Avant tout utile si l’utilisateur ne peut pas voir votre image (pour cause de connexion trop lente, d’erreur technique, ou d’utilisation d’un lecteur d’écran). Cette balise est essentielle pour l’accessibilité de votre site. Elle rend l’ensemble de votre page accessible à tous (y compris aux malvoyants) en toutes circonstances.
    L’alternative textuelle est un texte que l’on associe à un contenu graphique comme une image, une zone cliquable dans une image ou un élément de formulaire de type image, dans un site web ou dans un document produit par un logiciel d’une suite bureautique, pour que l’utilisateur qui ne peut visualiser l’image puisse être informé de ce qu’elle représente et signifie. L’alternative textuelle est restituée à la place de l’image quand celle-ci n’est pas consultable. Wikipedia
  3. La balise description vous permet de fournir des informations plus détaillées sur le contenu ou le contexte de l’image. Il vous permet même d’inclure un appel à l’action, comme « Acheter maintenant notre produit X pour xx € ».
  4. La légende est le texte qui s’affiche sous l’image. Choisir de remplir cet élément dépend avant tout de votre parti pris graphique. La légende permet de répéter un élément clé du message, de préciser un contexte ou d’attribuer la photo.

Quatre éléments clés pour améliorer l’accessibilité de votre site ainsi que votre référencement sur Google Images.

8. Protéger vos photos et rester dans la légalité

Nous voici arrivés au terme de ce parcours d’optimisation. Il reste à vérifier une dernière chose : vos images sont-elles protégées (si ce sont les vôtres) ou respectez-vous le droit d’auteur et le droit à l’image (si vous « empruntez » des images créées par d’autres ou trouvées sur internet).   

Les droits et obligations liés aux images publiées sur internet sont un sujet très vaste et très complexe qu’il serait trop long d’aborder dans cet article. Mais sachez que si vous produisez vous-mêmes vos photos ou si vous les faites réaliser par un photographe professionnel, mieux vaut vous renseigner au préalable.

En résumé, voici quelques points auxquels vous devrez prêter attention :

  • Le droit d’auteur (ou copyright) protège toutes les œuvres littéraires et artistiques, même sur internet.
  • Vous devez obtenir l’autorisation expresse des personnes que vous photographiez avant d’utiliser leur image.
  • Vous devrez définir précisément le cadre de diffusion (durée, support, zone géographique)
  • Le créateur d’une image reste toujours l’unique propriétaire et bénéficie de certains droits (à prendre en compte si vous faites faire des photos par un professionnel)

Se protéger contre les « emprunts » illicites

Par définition, tout site public recherche avant tout la visibilité et la notoriété. Le corollaire inéluctable de ce postulat est que plus vous aurez de visiteurs, plus il y aura de personnes indélicates qui « emprunteront » vos images pour les utiliser sur leur propre site, sans toujours vous créditer de la paternité de l’image.

Pour limiter ce phénomène, voici quelques mesures à appliquer :

  1. Limiter la taille et la qualité des images publiées. (voir les points 4 et 5)
  2. Ajouter un filigrane à chaque image. C’est le moyen le plus simple et le plus efficace pour dissuader un grand nombre de pilleurs. Signer chacune de vos créations visuelles permet en outre de renforcer votre image de marque et votre visibilité, en indiquant systématiquement l’url de votre site.
  3. Afficher des mentions légales sur votre site. C’est de toute façon obligatoire. Vous y préciserez que les visuels présents sur votre site ne sont pas libres de droits ou relèvent de telle ou telle licence Creative Commons (nous y reviendrons dans un prochain article).
  4. Ajouter un script pour empêcher la copie de vos images (le fameux clic droit de la souris), voire empêcher la copie d’écran. Mais ce stratagème sera facilement contourné par les plus habiles.
  5. Protéger les répertoires contenant vos images. Cela semble évident mais vous seriez étonné…

Si malgré tout vous constatez que vos meilleures photos sont indûment utilisées, sans aucune attribution, ne laissez pas passer !  Prenez le temps de contacter le webmaster indélicat et demandez-lui de faire un lien vers votre site et de mentionner votre nom. C’est la moindre des choses. Mais ne vous faites pas trop d’illusion … le web est une jungle où le bon droit est parfois difficile à faire respecter !

Réutiliser des images en toute légalité

Enfin, pour tous ceux qui n’ont aucun talent particulier pour la photographie ou le dessin, le web est une source inépuisable d’images plus ou moins libres de droit. Il est tout à fait légal de les utiliser pour illustrer son propos, à condition de se plier aux règles du copyright.

Trois cas de figures peuvent se présenter :

  1. Copyright – les images non libres de droit
    Toutes les images sont, à priori, protégées par le droit d’auteur, c’est-à-dire le droit exclusif pour le créateur de les utiliser et reproduire. Vous devez donc demander à l’auteur une autorisation écrite pour pouvoir les utiliser. C’est souvent le parcours du combattant.
  2. Creative Commons – les images sous licence libre
    Les images placées sous licence Creative Commons sont réputées libres de droit sous certaines conditions (qui varient en fonction du type de licence) plus ou moins contraignantes : attribution, usage commercial autorisé ou non, modification possible ou non, etc.
    Les banques d’images fonctionnent sous ce régime. Vous payez pour avoir le droit d’utiliser des photos dont les droits sont gérés en amont par les sites qui les commercialisent.
  3. Domaine Public – les images totalement libres de droit
    Les images du domaine public ne sont la propriété de personne. Ainsi, vous pouvez les publier, les modifier, en vendre des reproductions.

 

copyright - creative commons - public domain

Conclusion

Si vous êtes arrivé au terme de ce long article, c’est que le sujet vous intrigue, vous intéresse ou vous inquiète. Et vous avez raison de vous en préoccuper !

Optimiser vos images pour le web demande certes de la discipline, un peu de technique et bien sûr du temps. Mais vos efforts seront récompensés : votre site gagnera en rapidité, en visibilité et en efficacité. 

Et si vous avez des questions ou des suggestions, je serais ravie de lire vos commentaires. Bonne optimisation !