Chat devant une vitre
Chat devant une vitre

Optimiser vos images pour le WEB

Avant d’utiliser une IMAGE pour le web, il est préférable de l’optimiser. Cette manipulation vous permettra de diminuer le temps de chargement de vos pages. Même si la fréquentation d’un site dépend avant tout de l’originalité de son contenu – ses qualités techniques dont la vitesse d’affichage seront aussi considérées par ses visiteurs. Cette opération peut paraître contraignante mais elle reste simple et rapide à réaliser.

En 2010, GOOGLE  annonçait pénaliser les sites trop lents

Cette optimisation constituera également une base pour du référencement. Les images non optimisées, trop lourdes – en poids [ on parle en octet ] et en taille [ en pixel ] – sont détectées par les moteurs de recherche. Vous risquez d’obtenir une mauvaise notation de votre site [ Pour tester > MEASURE ]. En 2010, GOOGLE  annonçait pénaliser les sites trop lents. Est-ce toujours le cas ? Rien n’est certain mais la rapidité reste un critère incontournable.

Outre les critères techniques, le surpoids de donnée est un gaspillage, voire une pollution. En optimisant vos données, vous réduisez la consommation d’énergie des DATA-CENTERS. Ces derniers consomment déjà beaucoup trop d’énergie inutilement… et le climat s’en portera d’autant mieux.

1 • Le format des images

Pour des photos courantes, choisissez le format JPEG qui est le plus adapté pour le WEB. Si votre image contient des zones de transparence [ c’est parfois le cas pour un LOGO ], utilisez le format PNG. Il est possible d’utiliser ce format pour une image courante, mais je ne vous le conseille pas et cela n’a aucun d’intérêt; vous ne ferez qu’alourdir inutilement son poids.

Le format WEBP de GOOGLE est une autre possibilité qui permet d’obtenir un taux de compression encore plus important, mais n’étant pas reconnu par tous les navigateurs [ SAFARI ], je le vous le déconseille.

2 • La tailles des images

La taille moyenne des grands écrans fait aujourd’hui : 1920 x 1280px. Il est rarement utile d’aller au delà.

D’autant plus que – pour WORDPRESS, PRESTASHOP et d’autres – les visuels que vous chargez dans Tableau de bord > Médias servent à générer automatiquement d’autres formats d’images. Ce n’est pas l’image que vous avez chargée qui sera directement utilisée mais une copie réadaptée. De base WORDPRESS  génère 4 formats : Thumbnail (pour les vignettes) | 150px • Medium | 300px • Large | 1024px • et FULL.

La taille idéale : 1920px de large pour une hauteur de 1280px si le ratio [ rapport entre la largeur et la hauteur ] est de 1:5 et 1024px si le ratio est de 1:3. Votre image est plus petite ? Ouvrez un logiciel de traitement d’image ou utilisez des solutions en ligne comme par exemple : ILOVEIMG. Il en existe beaucoup d’autres. Certains font aussi l’optimisation [ cf. chap.2 ]. Renseignez la largeur voulue [ 1920 px ] et lancez l’opération. La hauteur se réglera automatiquement selon le ratio de l’image. Si ce n’est toujours pas le cas, faites le réglage manuellement.

3 • Le poids des images

La taille de votre image étant optimisée, il est encore possible de diminuer son POIDS avec un script d’optimisation qui trouvera les données dont il est possible de se séparer tout en conservant un rendu similaire. On arrivera ainsi à gagner jusqu’à 80% du poids de l’image. Ce n’est pas négligeable et au final cela représente un gros gain de temps si on considère l’ensemble des visuels utilisés.

Votre logiciel de traitement d’image pourra faire ce travail. Sinon vous pouvez passer par un traitement en ligne. TINYJPG est très bien et sans pub, sinon vous avez aussi  OPTIMIZILLA qui a l’avantage de traiter 20 images en lot. Sélectionnez vos images, lancez le processus puis téléchargez un fichier zippé.

Optimisation d'une image - Avant et aprés
Optimisation d’une image – Avant et aprés

4 • Les attributs des images

Vous avez désormais une image dont la TAILLE et le POIDS sont calibrés pour le WEB. Il y a une dernière étape : Remplir correctement les attributs rattachés à votre image.

Évitez les lettres accentuées, les ponctuations et les espaces ou underscore_

Le NOM • Si votre image représente un chat devant une vitre, limitez vous à cette description [ Par exemple: chat-devant-une-vitre.jpg ]. Évitez les lettres accentuées, les ponctuations et les espaces ou underscore_ (mais le tiret du milieu [ – ] est possible). Il s’agit ici de respecter les normes d’une adresse URL. Cette précaution est notamment utile pour éventuellement exporter une base de données. Les noms d’images accentués sont mal supportés et peuvent créer des erreurs. J’ai été directement confronté au problème 🙂 .

Dans l’exemple d’image que j’ai utilisée, le nom initial était : « cat-862888_1920.jpg ». Pour les caractères, aucun soucis mais pour la description du contenu ce n’est pas idéal.
Dans un site, toutes les images possèdent une adresse [ URL ] propre. Dans notre exemple : https://www.vizibl.fr/wp-content/uploads/2020/08/chat-devant-une-vitre.jpg. Cette adresse sera [ comme toutes les autres parties de votre site ] prise en compte par les moteurs de recherche. En renseignant correctement le nom de votre image, vous permettez à des recherches par image de vous référencer.

Attributs des images dans wordpress
Attributs des images dans wordpress

Reste ensuite à remplir : Le TEXTE ALTERNATIF • Le TITRE • La LÉGENDE • La DESCRIPTION.
Pour ces 4 champs vous pouvez utiliser tous les caractères que vous voulez. Restez quand même raisonnable. Si vous ne voulez pas vous embêter [ comme moi ] faites un copier-coller dans tous les champs. Sinon, complétez à votre guise…

Résumé • Optimisation des images pour le web

  •  Le format : Enregistrez vos images en format JPEG. Choisissez le PNG, si vous avez des zones de transparences à conserver. Évitez le WEBP.
  •  La taille : Réglez vos images sur 1920px de large. Il est rarement utile d’aller au delà.
  •  Le poids : Traitez vos images avec un script d’optimisation. Le gain de poids est souvent conséquent pour un rendu similaire.
  •  Les attributs : Décrivez simplement le contenu de l’image pour ce qui concerne le TITRE, la DESCRIPTION, la LÉGENDE et le TEXTE ALTERNATIF. Pour le NOM de l’image qui sera utilisé dans l’URL et scanné par les moteurs de recherche, supprimez les accentuation, les espaces ( le tiret – est possible) et les caractères spéciaux.