Optimiser les images

Comme nous le préconisons régulièrement, la première cible de la web performance, c’est le poids ! Or le plus gros gain à espérer en terme de poids, c’est d’optimiser les images.
C’est l’occasion pour nous de revenir sur les étapes qui permettent d’optimiser les images à tous les niveaux et pas que sur les aspects web performance.

Source des images

Soit vous produisez vos images, soit vous utilisez des images issues de banques d’images.

Dans le premier cas, vous souhaiterez peut-être protéger vos images d’une récupération illicite par un tiers.

1. Premièrement prévoyez les cas d’usages dans vos mentions légales.
2. Éventuellement, ajoutez un filigrane à vos images (exemple : cobrenord.com, réalisé par artwaï).
3. Enfin, n’hésitez pas à contacter les contrevenants pour obtenir, à minima, la citation de la paternité de l’image et au mieux un lien vers votre site.

Dans le deuxième cas, assurez vous bien que l’usage de l’image est bien définie par une mention explicite sur le site où vous la récupérez.
Il existe 3 types de licences : libre de droits, de droits gérés et creative commons.

• La licence libre de droits. “Concrètement, cela signifie que vous ne payez qu’une fois. Ensuite, vous pouvez utiliser cette image comme vous le souhaitez, aussi longtemps que vous le souhaitez, en France ou à l’étranger, sur tout type de support”. Attention, libre de droits ne veut pas dire gratuite !
• La licence droits gérés, dont vous devez payer des droits à chaque usage d’une image.
• Creative commons est une solution alternative légale aux personnes souhaitant libérer leurs œuvres des droits de propriété intellectuelle.

Source et plus d’informations sur le blog du modérateur ( un média édité par le désormais groupe HelloWork ).

Optimiser les images pour le référencement

L’objectif de cette étape est de permettre à Google d’indexer vos images, d’être visible sur les résultats de Google Images et donc d’être trouvé par les internautes depuis vos images.

La popularité de l’image

Si vous utilisez une banque d’images, essayez de trouver des images pas trop courantes sur le web. Avec l’outil TinEye, vous pouvez rapidement voire si l’image sélectionnée est très, voir trop, populaire. L’idée étant d’avoir plus de chances que l’image affichée dans Google Images pointe sur votre site plutôt que sur un autre.

Le nom de fichier

Une image sur le web, doit avoir un nom explicite, et non pas l’habituelle numérotation automatique attribuée par l’appareil photo, le smartphone ou en sortie de découpe de votre éditeur graphique. Voici quelques règles à respecter pour vos noms d’image:

1. Utilisez les mots clés qui apparaissent dans votre site en les séparant par des traits d’union et surtout pas d’underscores (_).
2. Sans accents, sans caractères spéciaux et sans majuscules. Ce qui permet d’éviter les erreurs 404 ou autres URLs illisibles.
3. 3 à 5 mots maximum.

Les informations complémentaires

En html, on peut renseigner 2 attributs complémentaires pour décrire une image.

• Title : le titre de l’image. Le title s’affiche en infobulle quand la souris passe sur l’image.
• Alt : un texte alternatif à l’image. L’alternative textuelle est restituée à la place de l’image quand celle-ci n’est pas consultable. Elle est également importante pour les liseuses d’écran (destinées aux personnes malvoyantes) qui décriront le contenu de l’image grâce à cette balise.

Il faut donc avoir conscience que le title a un impact sur l’interface avec cette infobulle alors que l’attribut alt non.

Accessoirement, on peut aussi encapsuler une image dans une balise <figure> (comme le font couramment les CMS type WordPress) ; auquel cas l’attribut <figcaption> peut servir de légende. On fournit ainsi un peu plus de texte à Google pour indexer au mieux notre image.

WordPress propose aussi de renseigner une description longue. Celle-ci est affichée sur la page du média. C’est-à-dire que pour chaque image enregistrée dans la bibliothèque de médias de WordPress, vous avez le fichier et la page du fichier. Force est de constater que ces pages sont assez “pauvres” en termes de contenus pour le référencement.
Ainsi Yoast (une des  plus célèbres extension de SEO pour WordPress)  conseille même de désactiver les pages de médias. NB : c’est le choix que nous avons retenu pour ce site.

Optimiser le poids des images

Les formats

Les formats d’image les plus couramment répandus sur les sites web sont le svg, le gif, le png, le jpeg, et le webp.

	Transparence	Animation	Support
SVG	oui	oui
GIF	oui	oui
PNG	oui	non
JPEG	non	non
WEBP	non	non

(Update du 05/09/2019 : Firefox supporte WebP depuis janvier 2019)

Le SVG est un format XML et vectoriel qui donc peut être redimensionné à foison. Il est généralement utilisé pour les logos et les illustrations. Leur optimisation est rarement nécessaire.

Le GIF et le PNG sont des formats d’image qui utilisent une palette de couleurs plus ou moins limitée. Si on a peu de couleurs dans l’image on préférera utiliser le PNG ou le GIF quand il s’agit d’une animation simple.

Le JPEG est un format dédié pour les photos. Il supporte différents niveaux de compression et gère 16,7 millions de couleurs.

Le WebP est un format d’image développé par Google qui assure une compression supérieure des photos.

Taille et compression

La règle de base est de dimensionner l’image à leur taille réelle d’affichage. Vous pouvez très bien avoir une image de 1000px x 1000px affichée en 100px x 100px. Du coup, en exagérant votre image est 10 fois plus lourde que nécessaire.

Ensuite vient la compression qui est l’étape essentielle pour optimiser les images. Elle sert à réduire la redondance des données d’une image afin de pouvoir l’emmagasiner en occupant moins de place.

• Il y a la compression avec perte de données où l’image devient plus floue à mesure qu’elle est compressée ;
• et la compression sans perte où les traits de l’image reste nette.

Il faut trouver le bon rapport qualité/compression qui satisfasse à vos besoins.

Optimiser la distribution des images

Optimiser les images elles-mêmes c’est une chose ; mais comment ces images désormais bien définies doivent être appelées dans les pages de votre site web ?

Responsive design

En responsive design, si vous ne voulez pas saturer les smartphones et une bande passante en 3G somme toute limitée, il faut fournir une version de l’image correspondante à chaque résolution cible. Pour faire simple, on va dire au device (périphérique) d’utiliser la version de taille minimum pour les smartphones et maximum pour les desktops.

Pour faire cela deux solutions HTML sont disponibles :

• l’élément picture et plusieurs sources (non supporté par Internet Explorer 11)
• l’attribut srcset qui va définir les différentes versions de l’image selon la résolution.

L’avantage de la première solution étant qu’on, autorise des proportions différentes de l’image alors que l’attribut srcset ne doit pointer que sur des images de même rapport hauteur/largeur.

Plus d’informations sur l’article Images Adaptatives.

Personnellement, j’utilise plus souvent la seconde solutions en gérant le recadrage en CSS si nécessaire.

Et pourquoi pas webp ?

Comme nous l’avons vu ci-dessus, le webp n’est pas un format d’image supporté par tous. Il y pourtant une solution (comme sur ce site) qui permet de faire profiter du webp les navigateurs le supportant.
Il suffit de faire une règle de redirection coté serveur de l’image d’origine vers celle en webp. C’est d’autant plus intéressant quand on sait que cela va grandement impacter les smartphones.

Lazyload

Le lazyload permet de ne charger les images qu’une fois qu’elles apparaissent à l’écran et non pas dès le chargement de la page. Malheureusement, ce qui devrait être une fonction native des navigateurs ne l’est pas. Nous nous retrouvons obligés de gérer le chargement des images en fonction de leur positionnement dans la page.

Cela requiert (à ce jour) obligatoirement l’utilisation de JavaScript et si l’on veut respecter les règles d’accessibilité, ça multiplie le code HTML par deux car on embarque la version du code avec le JavaScript et pour accessibilité la version sans.

Images dans les feuilles de styles

Si les images sont appelées via une propriété background dans une feuille de style CSS, alors celle-ci est chargée après le chargement complet de la CSS…
Pour palier ça, vous pouvez utiliser un élément link avec attribut preload ou voir même utiliser le push server en http2.

Automatiser les optimisations

Je ne crois pas à la rigueur absolue de l’être humain. Derrière cette sentence (et surtout ce constat), je pense qu’il est illusoire de définir un processus pour optimiser les images que tout intervenant respectera à la lettre dans l’urgence d’une publication X ou Y. Heureusement, un certain nombre de ces optimisations sont automatisables, notamment dans WordPress.

Le cas WordPress

Voici ce qui est envisageable dans WordPress pour optimiser les images :

1. l’utilisateur choisit une image comme définit ci-dessus ;
2. il la charge dans WordPress en renseignant les informations complémentaires ;
3. WordPress créé automatiquement toutes les versions de taille d’images nécessaires au site et les compresse ;
4. à chaque utilisation dans un article, WordPress génère automatiquement l’attribut srcset pointant vers les différentes résolutions de l’image et l’attribut alt, voire même l’attribut title ;

Avec un plugin ou un peu de code :

• WordPress va pouvoir générer une version Webp des images et créer la règle de redirection citée ci-dessus ;
• intégrer une solution de lazyload ;
• enfin il existe aussi des solutions pour renommer les images soit image par image ou par lot.

Pour mettre en place et vérifier toutes ces étapes, il faut bien comprendre la structure de WordPress et les interactions avec et entre les plugins d’optimisations. Ce n’est pas toujours simple, mais si dès le départ les bonnes options sont choisies, l’utilisation du CMS s’en trouve grandement simplifiée, tout en conservant un bonne Web Performance.

Photo par Brooke Lark via Unsplash