6 bonnes pratiques optimiser ses images pour le web

O

ptimiser ses images pour le web est devenu un incontournable pour son site internet. Même les blogueuses lifestyle s’intéressent à cette pratique, c’est vous dire l’importance que cela a ! Ici, il n’est pas question seulement d’esthétisme. C’est une étape paressant un peu pénible au premier abord, je vous l’accorde. Pourtant elle vous rendra bien des services tout au long de la vie de votre blog ! Il existe 5 bons réflexes à avoir pour maximiser vos chances d’avoir des images bien optimiser.

Bannière télécharges ton guide offert

Pourquoi optimiser ses images ?

Le temps de chargement

Je le rappelle optimiser ses images sert le côté esthétique de votre blog, mais pas seulement. Dans les rouages de votre WordPress, l’optimisation sert des causes plus nobles. La première d’entre elles est le temps de chargement de votre site. Une image trop lourde, ou au mauvais format peut vite devenir le premier de vos fléaux ! Il y a des paramètres à prendre en compte aussi bien lorsque vous modifiez votre design que lorsque vous illustrez vos articles. Les moteurs de recherche et les vitesses de connexion seront différents suivants vos visiteurs. Cela vaut aussi bien pour les ordinateurs, que pour les tablettes ou les téléphones. C’est pourquoi il est essentiel de rendre vos images le plus adaptables possibles.

 

Suivant le CMS que vous avez choisi ainsi que le tarif, l’espace de stockage réservé à vos médias sur votre blog est sûrement limité. Même si vous avez plus de places que vous ne pensez nécessaire, réfléchissez simplement à cette option. Si un jour, vous vous trouvez dans le cas où vous n’avez plus assez de place ? Allez-vous vous contenter de prendre une nouvelle formule plus chère pour plus d’espace de stockage ? Alors que vous auriez pu tout simplement prendre le temps de mettre en place les bonnes pratiques pour optimiser vos images ! Et ainsi économiser ! Les techniques pour vous rendre service à ce niveau-là sont des plus simples.

 

SEO-friendly !

Il n’y a pas que vos mots qui sont au service de votre référencement, les images qui illustrent vos articles sont aussi dans ce cas. Il s’agit de petites étapes simples à réaliser avant et après le téléchargement de vos images dans l’espace de stockage de votre blog.

 

Les bonnes pratiques

Etape 1 : Le format

Le JPG est le format le plus courant sur le web car il s’agit du plus léger ! Il est idéal pour la compression très importante, il fait preuve d’une grande adaptabilité. Néanmoins, au-delà de 60-70%, on constate une dégradation de l’image. Sa qualité s’altère et cela peut devenir un problème au niveau esthétique. Attention, il ne faut pas négliger ce format pour autant ! Mais il est nécessaire de faire attention lors de la manipulation de ce format plutôt réservé aux photographies.
Le PNG est le format le plus souple à mon sens. Il permet la transparence, ce qui n’est pas négligeable. Il est plus lourd que le format JPG, mais il est plutôt à privilégier pour les créations graphiques. C’est pourquoi c’est celui-ci que j’utilise pour les images de mes articles.

Article : Le petit lexique de l’apprenti web designer

Etape 2 : Les dimensions

Les dimensions des visuels peuvent varier en fonction des blogs. Néanmoins, en général , il est conseillé d’utiliser des images allant 600 à 1000 pixels de largeur. Pour savoir quelles dimensions seraient optimaux pour les images de votre blog, il existe une technique très simple. Rendez-vous sur votre blog, faites un clic droit —> Inspecter.

clic droit inspecter, optimiser images pour le web

Sur la droite de la fenêtre, apparaîtra des lignes de code, mais ce qui nous intéresse, se trouve en bas à droite de votre écran. Suivant votre thème, vous pouvez savoir quelles dimensions maximum sont préconisées. Je peux constater que sur le mien, je devrai utiliser des images de 870 pixels de large maximum, pour que leur affichage soit optimisé.

capture d'écran d'un article pour dimensions, optimiser images pour le web

Etape 3 : Le poids

Le poids de votre image va varier selon le format et les dimensions que vous lui donnerez. Avoir des images de 15 ko pour chaque article, cela n’existe que dans un monde idéal ! En réalité, il est plus fréquent de trouver des images dans les alentours de 50-70 ko. Il est fortement déconseillé de dépasser les 100ko sans quoi le chargement de votre site sera mis à mal pour vos visiteurs !

Etape 4 : La compression

La compression est l’étape la plus méconnue, pourtant elle peut rendre de grands services. J’en parlais plus haut, le format le plus enclin à la compression est le JPG. Je pourrais aussi l’utiliser pour le format PNG, mais à mon sens, la seule façon de compresser un PNG de façon efficace est de lui supprimer des couleurs. Passer de 256 à 128 couleurs voire 64 couleurs est risqué au niveau qualité, c’est pourquoi je répète que ce format doit être dédié aux créations graphiques et non aux photos. Vous pouvez compresser vos images de 100% jusqu’à 60% quel que soit le format que vous utilisez, si vous désirez conserver une qualité correcte sans dégradation importante. Néanmoins, je vous conseille une compression à 80% maximum pour le format PNG.

Etape 5 : L’enregistrement

L’enregistrement est la dernière étape avant d’exporter vos images sur votre blog. Avec Photoshop, il est plutôt simple de gérer toutes les étapes dont je vous ai parlé juste avant. Il existe également une option très intéressante, à connaître pour les futures images qui illustreront votre blog. Dans Fichier —> Exportation —> Enregistrer pour le web. Cette option va permettre de calibrer tous les paramètres qu’il faut pour que votre image soit optimisée pour le web.

Capture d'écran Photoshop fichier, enregistrer pour le web, optimiser images pour le web

Une fenêtre va s’ouvrir, sur la droite de cette fenêtre se trouveront tous les paramètres que j’ai détaillé. Vous pouvez choisir le format entre JPG, PNG et GIF. Vous pouvez modifier la qualité, comme je le disais plus haut, évitez d’aller en dessous de 60. Avant d’enregistrer, vous avez la possibilité une dernière fois de modifier la taille de votre image en modifiant son pourcentage d’affichage à l’écran.

capture d'écran enregistrer pour le web, optimiser images pour le web

En cliquant sur le bouton enregistrer juste en dessous, vous pourrez renommer votre image. Ne passez pas à côté de cette étape clé qui vous rendra service par la suite ! Les titres tels que “image 001$.jpg” sont officiellement à bannir ! Voici les bons réflexes à prendre :
  • Servez-vous de mots-clés contenus dans le titre de votre article.
  • Ne mettez pas d’espace entre les mots, utilisez le – du 6 ou bien le _ du 8
  • Évitez les accents et les caractères spéciaux

Etape 6 : Sur votre blog

Voice la toute dernière étape, et certainement celle qui vous prendra le moins de temps pour le plus de résultat sur votre trafic. Il est temps de rendre vos images SEO-friendly ! Pour cela, après avoir exporté vos images dans les médias de votre blog, prenez le temps de remplir le titre de votre image ainsi que le texte alternatif. Pensez à y insérer des mots-clés et suivez les mêmes bons réflexes que lorsque vous avez enregistré votre image sur votre ordinateur.
Vous pouvez également remplir la légende et la description si vous le voulez, mais ce n’est pas du tout une obligation.
6 bonnes pratiques pour optimiser ses images pour le web

Avez-vous déjà pensé à optimiser vos images ?

J’espère que cet article vous a plu ! Si c’est le cas, n’hésitez pas à partager l’épingle sur Pinterest ⤵️

6 bonnes pratiques pour optimiser vos images pour le web
6 bonnes pratiques pour optimiser vos images pour le web

6 bonnes pratiques pour optimiser ses images pour le web

Et si vous en parliez :