Ce deuxième épisode sur les images d’un site internet est dédié à l’optimisation de vos fichiers images pour un site web.

Pourquoi est-ce si important de placer des fichiers images bien traités et optimisés sur son site pro ?

Les raisons qui se voient à l’écran

Tu veux vraiment savoir ? Nan mais tu te vois avec des images dégueulasses sur ton site ? Tu veux vraiment faire fuir tes internautes cibles ? Tes clients potentiels ? Tes amis ? Ta famille et ton chien ?

Une image te représente : on parle d’une image de marque, pas d’une image dégueulasse de marque ! Alors présente-nous des images de sites qui soient belles, attractives et de bonne qualité s’il te plaît.

Les raisons invisibles

Ce que tu ne voit pas, d’autres le voient pour toi ! Autrement dit, les raisons invisibles, ce sont :

    • le référencement de ton site : car les robots des moteurs de recherches ont des yeux bien aguerris lorsqu’il s’agit de scruter tes images de site ! Lis donc la suite de l’article et tu verras (ce que tu ne voyais pas avant cela)…
    • Tu n’as pas dans tes connaissances quelqu’un qui a des problèmes de vue à tel point que son ordinateur est équipé de commandes vocales ? Et bien sache que lorsque toi, tu vois une image, elle, lui ou yel entend un texte qui lui décrit l’image. Ce texte, c’est la balise alt de ton image, mais continue de lire l’article pour en savoir un peu plus à ce sujet 😉

La check-list des vérifications techniques des images d’un site

Pour répondre aux deux critères d’optimisation (visible et non visible par les internautes), je vous ai préparé une liste de 6 éléments à vérifier pour vos images avant de mettre votre site en ligne :

Le POIDS de l’image :

Le moins lourd possible ! Sur internet, plus c’est lourd, plus c’est lent. Le tout étant comme toujours de trouevr le juste équilibre entre conserver une bonne qualité d’image et faire en sorte qu’elle soit la plus légère possible.

Vous voulez vraiment des chiffres ? Alors disons : maximum 200 ko par image.

Illustration pour le poids des images : balance avec poids de 200 ko et une image

Le NOM DU FICHIER image :

Il doit être cohérent et parlant pour vos cibles. Bannissez les noms de fichiers tout droit sortis de votre appareil photo (IMG753095421.jpg) !

Renommez les fichiers avec un nom qui va éclairer tout le monde, y compris les robots des moteurs de recherches 😉

 

Illustration pour le nom des fichiers d'images : une vache dans un pré et deux noms de fichier, l'un compliqué (une suite de chiffres qui ne veut rien dire) et l'autre est optimisé pour le SEO

La BALISE ALT de l’image :

Ok, ok, on aborde ici un point plus technique, mais rassurez-vous, c’est très simple ! La balise alt, c’est le texte alternatif à l’image. Et c’est ce texte qui est lu par les ordinateurs équipés de commandes visuelles (pour les mal-voyants, par exemple). C’est aussi ce texte que lisent les robots des moteurs de recherche qui, n’ayant un sens artistique visuel que très peu développé, doivent compenser leur déficience visuelle par la lecture de ces fameuses balises.

Alors, on va les remplir ces fameuses balises alt ? surprised

Illustration pour la balise alt des images du web : une photo de Lise Pathé avec sa balise de texte alternatif

La QUALITÉ de l’image :

Il est bon de rappeler qu’une image participe à la première impression qu’on donne aux internautes. Si l’image est floue, mal cadrée, pixellisée ou de piètre qualité, la première impression que vous donnerez à vos cibles ne sera pas des plus favorables !

Et qui voudrait d’une baleine floue sur son site internet, hormis une baleine folle ?

Illustration pour la qualité des images de site : une illustration de baleine floue et nette

Le format PNG ou JPG :

Une chose à apprendre par cœur dès lors qu’on manipule un site internet !

Un fichier png n’a pas de couleur de fond par défaut, on peut donc le placer sur n’importe quel fond sans avoir ce foutu carré blanc ou coloré inesthétique au possible.

Un fichier jpg comporte un fond blanc . Il est donc idéal si le fond de votre site est blanc, mais je vous le déconseille si le fond de votre site est coloré. L’erreur la plus courante est de demander à votre graphiste de vous créer un logo sans penser à lui préciser que vous aurez besoin qu’il vous livre une version avec fond transparent de votre logo.

 

Illustration pour les formats de fichiers : png avec fond transparent et jpg avec fond blanc

Une résolution de 72 DPI :

C’est la résolution idéale pour les images sur internet, contrairement aux images destinées à l’impression qui auront une résolution maximum, c’est-à-dire 300 DPI.

Les DPI (ou PPP) ne vous causent pas ? Pas de souci, je vous donne un indice pour les différencier. Pour deux images identiques :

  • si l’une pèse lourd (quand je dis lourd, c’est vraiment lourd, du genre 3Mo) : il y a de fortes chances pour que ce soit une version en 300 DPI ;
  • Si l’autre est légère comme une plume (37 ko par exemple) : on peut se dire que sa résolution est moindre, voire proche de 72 DPI.

Car la résolution, vous l’avez deviné, influence fortement le poids d’une image.

 

Illustration pour l'article du Blog de Liz : 72 DPI versus 300 DPI

Le format WebP :

C’est le dernier né des usines de Google ! Il date de 2010 – oui oui, c’est relativement récent, comparé à l’époque des dinosaures ! – et “the firme” pourrait sans doute bien finir par prendre en compte ce critère de format d’images pour référencer les sites sur son moteur de recherche préféré…

Donc forcément, c’est le format recommandé de nos jours pour les images d’un site web. Ceci dit, il est idéal pour gagner en rapidité d’affichage car il va considérablement réduire le poids de votre fichier.

WebP ta mère et Png ta sœur : illustration pour l'article du Blog de Liz

Et maintenant, tu fais quoi ?

TU VAS VÉRIFIER QUE TES IMAGES DE SITES SONT BIEN CONFORMES !

Comment cela tu n’es pas encore parti ? Besoin d’un coup de main pour optimiser tes images de site ? N’hésite pas à contacter Liz à la Ligne !

@ bientôt ! {La prochaine fois, je te dirai où pécho tes images de site sans t’exposer à des ennuis !}

Blog de Liz / Les articles / Les images d’un site web, deuxième épisode

Illustration d'accueil du Blog de Liz

Vous souhaitez participer ?

Que ce soit pour écrire un article ou répondre à mon interview, ce sera avec plaisir ! Il suffit de me le faire savoir et nous trouverons à coup sûr un terrain d’entente 😉

CES ARTICLES POURRAIENT VOUS INTÉRESSER…

Hébergeur vs Webmaster

J’ai constaté que beaucoup d’agences web proposent à leurs nouveaux clients un package “hébergement + site Internet”…

Conseils en rédaction web

Ça y est : vous avez décidé de créer un site pour votre entreprise afin d’attirer de nouveaux clients !

L’ergonomie appliquée au web

Ergonomie web… On entend souvent cette expression lorsqu’on parle de sites internet. Mais de quoi s’agit-il exactement ?

Un template pour mon site

Venant à l’origine d’un autre monde professionnel que celui du web, je me sers souvent de mon passé pour me mettre à la place des clients…

Bien référencer son site web

Aujourd’hui donc, pour faire plaisir à Mathieu, je vais vous parler d’un sujet qui fâche : le référencement d’un site internet.

Faire la maintenance de son site wordpress avant l’été !

Vous vous apprêtez à fermer votre entreprise pour partir en vacances ? Avez-vous pensé…

error: Ce contenu est protégé.