Pour utiliser une image sur site internet, il est préférable de l’optimiser. Si vous le faites, vous allez réduire le temp de chargement de vos pages. Cette opération peut paraître contraignante mais elle reste simple et rapide à réaliser. Elle permettra notamment de maintenir la rapidité de votre site et d’augmenter le confort de navigation de vos lecteurs.

Cette optimisation bénéficiera aussi - un peu - à votre 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. En 2010, GOOGLE annonçait pénaliser les sites trop lents. La rapidité reste un critère incontournable.

Outre les critères techniques, vous contribuerez également à réduire le gaspillage d’énergie et l’émission de CO2. Plus une image - ou une autres ressources - est légére, moins elle consomme d’énergie. C’est logique. Le climat s’en portera d’autant mieux.

Voici 4 opérations pour optimiser simplement vos images pour le web.

Les attributs des images : Le nom et la description

Avant de charger votre image (après ce n’est plus possible), nommez correctement vos images pour le référencement. On parle ici du NOM de l’image. La description, le titre etc… c’est autre chose. Si votre image représente un détail de fleur jaune, limitez vous à cette description. Par exemple: detail-fleur-jaune.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 : “frdkoo-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. Cette adresse sera 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.

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…

Le format des images : JPEG - PNG ou AVIF ?

Pour des images courantes, utilisez le format JPEG qui est pour le moment (les technos évoluent) le plus adapté pour le WEB.

Si votre image contient des zones de transparence - c’est parfois le cas pour un LOGO - utilisez alors le format PNG. Vous pouvez bien sûr utilisé ce format pour des images sans transparences, mais cela n’a aucun intérêt sinon d’alourdir inutilement le poids d’une page et donc de rallonger son chargement.

Les formats WEBP et AVIF, c’est l’avenir… Le poids est divisé par 2 ou 3 avec la même définitions. A moins que vous ne soyez professionnels, cette technologie n’est pas forcément des plus accessibles.

La taille des images : Quelle largeur et hauteur ?

La taille moyenne des grands écrans est aujourd’hui de : 1920px de largeur par 1280px de hauteur. Il est rarement utile d’aller au delà d’autant plus que c’est maintenant les petits écrans qui dominent.

  • Largeur idéale : 1920px (pas en dessous sauf exceptions :un logo par exemple);
  • Hauteur idéale : 1280px pour un ratio (3:2) - C’est classique;
  • Hauteur idéale : 1024px pour un ratio de 16:9;
  • Hauteur idéale : 1440px pour un ratio de 4:3;

Le CMS que vous utilisez se chargera ensuite de générer différents formats d’images à partir de l’image que vous avez chargée. Le mieux étant de centré votre sujet dans l’image pour supporter les coupes lors de la génération automatique.

Le poids des images : en KiloOctet

Vous avez désormais une image dont le NOM et la TAILLE sont calibrés pour le WEB. Ce n’est pas terminé (courage :-) ) Il y a une dernière étape.

Pour diminuer le poids d’une image, il faut un script 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 (XnResize par exemple) pourra faire ce travail.

Sinon vous pouvez passer par un traitement en ligne : TINYJPG est très bien et sans pub; Sélectionnez vos images, lancez le processus puis téléchargez un fichier zippé.

Résumé • Optimisation des images pour le web

  • Les attributs : Nommez votre image de façon logique sans caractère spéciaux.
  • Le format : Enregistrez vos images en format JPEG;
  • La taille : Réglez vos images sur 1920px de large et 1280px de hauteur;
  • Le poids : Traitez vos images avec TINYJPG (en ligne) ou XnResize;