Optimiser ses images sur internet améliorer votre site!

optimiser image site internet

Optimiser ses images sur le web c’est un moyen simple et rapide de booster la performance de votre site en améliorant l’expérience client et le référencement de la page.

Dans cet article nous vos expliquons POURQUOI optimiser vos images, COMMENT s’y prendre et nous vous livrons ensuite une MARCHE A SUIVRE facile pour optimiser vous-même vos photos. Enfin, pour ceux qui souhaitent aller plus loin, vous trouverez des informations plus précises à la fin de l’article.

 

 

Pourquoi faut-il optimiser ses images sur internet?

 

 

Pour optimiser l’expérience client

 

Les images représentent plus de 50% du poids d’une page web donc le temps de chargement dépend essentiellement de ces images. Si  vos images sont trop lourdes alors le temps de chargement de votre site est allongé et les visiteurs sont susceptibles de le quitter avant même d’être arrivé sur la page.

Si votre page met plus de 3 secondes à charger alors vous perdez 70% de vos potentiels visiteurs.

Par exemple les dirigeants d’Amazon ont découvert que si leurs pages tardent de 1 seconde, ils perdent 1,6 milliard par an.

et ainsi optimiser le référencement

Améliorer son référencement à travers le temps de chargement

 

Le temps de chargement n’a pas seulement un impact sur l’expérience client. Le temps de chargement influe aussi sur votre référencement naturel par les moteurs de recherche.

Google utilise le temps de chargement de la page comme un facteur dans son algorithme de classement et les moteurs de recherches détestent les sites trop lents. Donc si vos images sont bien optimisées, cela peut améliorer votre référencement naturel dans les résultats des moteurs de recherches.

Votre site s’il est rapide à charger apparaitra plus haut dans les résultats de recherche.

NB vous pouvez améliorer votre référencement grâce aux images également : 

La bonne utilisation des balises alt dans le code source permet aussi d’améliorer le référencement de la page grâce aux images. Ce n’est pas vraiment le sujet, mais nous vous expliqueront rapidement en fin d’article comment bien utiliser vos images et les outils mis à votre disposition par wordpress pour que vos images servent votre référencement.

 

 

optimiser image internet

 

 

Alors, CONCRÈTEMENT, comment optimiser vos images sur votre site?

 

 

Les 4 leviers d’optimisation d’image

 

Optimiser ses images c’est trouver l’équilibre entre poids de l’image et sa qualité et pour cela il y a 4 leviers existants.

 

Pour réduire le temps de chargement de nos pages il est essentiel d’optimiser le poids des images. En effet un temps de chargement court permet gagner en qualité du référencement et en l’expérience client.

Pour diminuer le poids au maximum sans perdre trop en qualité il existe 4 moyens :

  • choisir le bon format
  • choisir la bonne taille/dimension
  • travailler sur la résolution
  • la compression

Choisir le format adapté à vos besoins

 

Nous étudierons les 3 formats les plus utilisés sur les sites internet : PNG, JPEG et GIF. Ces trois formats fonctionnent sur tous les navigateurs. Le GIF est le seul qui permet une animation, Le GIF et le PNG permettent de la transparence. Le JPEG est surement le format le moins lourd.

Alors comment choisir?

 

Avez vous besoin d’animation? 

 

OUI –> GIF

 

NON, Avez vous besoin de conserver tous les détails de votre image avec une bonne résolution?

OUI –>

PNG (étudier la taille et la palette de couleur)

NON –>

 JPEG (étudier les différentes possibilités de qualité des images)

 

NB :

  • le format GIF n’est adapté que pour les animations sinon le format PNG offre une meilleure compression pour les images.
  • Le format PNG est celui qui produit l’image avec la meilleure qualité possible mais avec un poids sensiblement plus important
  • Pour les images, les captures d’écran : utilisez JPEG
  • Il faut tester plusieurs qualité d’image JPEG pour trouver un équilibre entre poids de l’image et qualité

 

Optimiser la taille et la dimension de votre image

L’optimisation des images se résument à deux critères : le nombre d’octet utilisé pour encodé chaque pixel et le nombre total de pixel.

On transporte plus de pixel que nécessaire lorsqu’il y a un écart entre la taille naturelle et la taille d’affichage. Même si la taille d’affichage est plus petite que la taille naturelle cela utilise un grand nombre de pixel supplémentaire. Il faut donc essayer que la taille d’affichage soit le plus proche possible de la taille naturelle.

Donc il faut ABSOLUMENT travailler la taille de votre image AVANT de la charger sur votre blog. Vous pouvez l’ajuster directement sur votre ordinateur par aperçu par exemple si vous travaillez sur mac. Il vous suffit d’aller dans OUTILS puis AJUSTER LA TAILLE.

Nous vous conseillons de choisir un format avec une largeur 800 pixels pour une hauteur environ de 600.

Modifier sa taille directement sur le site alourdi beaucoup trop l’image.

 

Travailler la résolution de votre image

 

Il s’agit de tester sur aperçu ou d’autre logiciels comme Photoshop ou Illustrator à quel point l’on peut réduire la résolution sans perdre trop en qualité. Cette démarche se fait un peu par tâtonnement.

 

ATTENTION : on choisit soit le format de l’image soit sa résolution. Donc si vous décidez d’une certaine dimension pour votre image inutile de travailler sa résolution, cette dernière s’adaptera automatiquement.

 

La résolution de l’image passe par la palette de couleur, la nature de l’image (vectorisée ou matricielle). Ces notions seront développées dans la partie « Aller plus loin ».

Compresser votre image

 

Il existe des sites qui compressent vos images pour vous. Pour les images au format PNG et JPEG vous pouvez vous rendre sur le site TinyPNG. Et pour compresser des GIF vous pouvez vous rendre sur GifCompressor.

Attention : il faut compresser seulement une fois que vous avez travaillé le format et la résolution de l’image. C’est la dernière étape avant de poster votre image sur votre site.

 

 

 

Les 7 étapes à suivre pour optimiser vos images simplement et rapidement

 

 

  1. Choisir votre image : je vous conseille de vous rendre sur des sites ou les images sont libres de droit, c’est le cas de Pexels, de Freepic, de pixabay.
  2. Prendre une image au format PNG si vous avez besoin de transparence, au format JPEG sinon
  3. Choisir la taille de l’image : Pour la taille de l’image vous pouvez travailler sur Photoshop mais aussi sur n’importe quel lecteur d’image (comme aperçu sur mac par exemple). Je vous conseille de choisir une taille au format 16/9 c’est à dire un peu prés 800*450 ou 1280*720. Il vous suffit d’ouvrir « ajuster la taille » pour rentrer les dimensions voulues.
  4. Choisir le nom du fichier : il faut que l’image porte un nom composé d’un des mots clés de l’article.
  5. Choisir la résolution : comme on a décidé de choisir la dimension de notre image nous ne pouvons pas toucher à la résolution de l’image elle s’adapte directement à l’écran.
  6. Procéder à la compression de l’image: ensuite, et seulement après ça, vous compressez grâce aux sites donnés plus haut et re-téléchargez votre image
  7. Poster l’image : vous pouvez à présent poster votre image sur votre page (et vous ne devez pas re-modifier sa taille une fois la photo chargée!)

 

 

optimiser ses images

POUR ALLER PLUS LOIN

L’optimisation des images est terminée mais vous pouvez maintenant vous servir de vos images pour améliorer votre référencement

 

Tout d’abord, le nom du fichier de l’image doit être composé de mots clés de l’article. Ensuite il faut remplir le texte alternatif lorsque l’on télécharge l’image sur la page. C’est ce texte alternatif qui va composé les balises alt.

En effet les balises alt sont l’équivalent textuel de votre image au sein du code source de la page. C’est le mot clé que reçoit le moteur de recherche pour illustrer votre image. Il a intérêt à l’illustrer le mieux possible et à rester simple pour améliorer votre référencement naturel. En effet si la description est bonne alors elle se rapproche de votre contenu, le moteur vous classe comme un site « pertinent » et vous remontez dans les résultats des moteurs de recherche.

 

Vous pouvez vous aider de sites qui analysent les recherches et les résultats des moteurs de recherche comme Yooda Insight. Cela vous permet de voir à propos d’un même thèmes qu’elle est le mot clé qui ressort le plus souvent, par exemple site web ou site internet?

Vous pouvez ainsi affinez votre choix en terme de « texte alternatif » pour décrire vos images.

L’utilisation intelligentes des balise alt est le meilleur moyen pour vous de voir apparaitre vos images en bonnes position dans les résultats de Google Image (ou autre moteur de recherche).

Attention tout de même à ne pas utiliser les balises alt pour vos images « décoratives » les moteurs de recherches pourraient vous pénaliser pour « suroptimisation ».

 

 

Concrètement ?

Lorsque vous télécharger l’image :

  • Vérifiez bien que le nom source du fichier soit simple et contiennent des mots clés pertinents avec l’article que vous êtes en train d’écrire.
  • Remplissez le « texte alternatif » avec encore une fois des mots clés simples et clairs

Une fois l’image postée vos balises alt sont bien utilisées et vous gagnerez en référencement.

 

 

 

 

Approfondir votre compréhension de la résolution de l’image

La résolution en pixel par pouce (ppi) dépend de plusieurs facteurs. Entre autres la résolution passe par la nature de l’image (vectorisée ou matricielle) et la palette de couleur utilisée.

 

  • Image vectorisé ou matricielle

Si l’image continent des formes géométriques il faut utiliser un format vectorisé pour avoir une meilleure résolution, le format vectorisé est donc adapté pour des logo par exemple parce qu’il offre une image net à chaque niveau de zoom et à chaque résolution (donc adapté aux écrans haute résolution).

 

En revanche dés que l’image est complexe comme une photo par exemple, il faut préféré le format matriciel. En revanche ces formats ne sont pas indépendants du niveau de zoom ou de la résolution. Si vous l’agrandissez, l’image matricielle devient floue. Il faut déterminer ses besoins fonctionnels pour sélectionner le bon format. Il ne faut pas avoir peur de réduire les paramètres de « qualité » (comme le degrés de résolution) : le résultat reste très bon et on économise beaucoup d’octet.

 

  •  la palette de couleur de l’image

Pour réduire le poids d’une image en réduisant sa résolution on peut diminuer le nombre de couleurs utilisées par la palette de l’image. Cela revient à utiliser moins de couleur que l’image naturelle et cela permet de diminuer le nombre d’octet par pixel et donc diminuer le poids de l’image. En langage technique on dit que l’on réduit « la profondeur de bit » de l’image.

Conclusion

 

 

Maintenant vous avez compris il y a trois points essentiels à l’optimisation des images sur internet :

  • le format de l’image
  • la dimension de l’image
  • la compression de l’image

 

Si vous souhaitez approfondir votre connaissance sur la création de contenu et l’alimentation d’un blog n’hésitez pas à télécharger GRATUITEMENT ma fiche sur les notions de base du blogging, ici.

 

 

Laissez un commentaire