Éco-conception web : la (grosse) question des images

On se pose les bonnes questions

Est-ce qu’on a vraiment besoin d’une image à cet endroit-là ? Trop d’images tue l’image.
Est-ce qu’on doit obligatoirement passer toutes ses images en bichromie pour les rendre plus légères ? Oui et non, tout dépend de l’objectif qu’on s’est fixé. Donc la bonne question, c’est plutôt : quel est l’objectif de poids par page ?
Est-ce qu’on peut mettre de grandes images ? Quand on est une agence de publicité par exemple, on ne peut pas se passer de grands visuels. Cela ne veut pas dire qu’on ne peut pas éco-concevoir son site : tout est une question de dosage et d’optimisations techniques. Il faut combiner méthode d’éco-conception et développement éco-conçu pour concevoir une page qui aura un impact le plus réduit possible par rapport à un site traditionnel.

Les JPEG et PNG sont morts, les GIFS sont enterrés

Vive les Webp, avif et svg

Première chose : on oublie les vieux formats que sont jpg, png et gif. On les oublie pour toujours. Sérieusement.

Ensuite, on convertit tout en webp ou avif (webp vs avif) et on produit les images vectorielles en svg. Le poids est sans aucune comparaison pour une même qualité de rendu, alors pas d’excuse !

Attention : tous les navigateurs ne supportent pas le Webp. Pour lutter contre l'obsolescence des matériels, il faut prévoir de servir des jpg et png en backup pour ces vieux navigateurs !

Des svg oui, mais pas toujours…

Le format svg, vectoriel, est tout indiqué pour les images comme les logos, les pictos, certaines illustration : plus léger qu’un jpg ou un png, il est aussi beaucoup plus net, notamment sur des écrans retina. MAIS parfois, pour des cas bien précis, par exemple lorsque l’image mesure moins de 50 x 50px, ce qui est souvent le cas des icônes, un export Webp peut se révéler moins lourd qu’un svg avec une multitudes de points. Donc il convient de tester en exportant dans les deux formats.

Et surtout...

On respecte le principe d’adéquation des moyens, on les sert à la bonne taille : une grande en desktop, une petite en mobile, et toutes les tailles intermédiaires pour les différents devices. Alors, ça paraît évident, mais en réalité, très peu de sites servent les images à la taille du device, occasionnant un transport de données inutiles et ralentissant le chargement des pages. Cela demande un peu de développement au départ, mais les résultats sont là !

Le cache & le lazy loading

Oui, c’est basique, mais on le redit quand même : on met en place des règles de cache efficaces pour ne pas charger inutilement plusieurs fois une même image, et on met en place un lazy loading, c’est-à-dire un chargement des images au moment ou elle est visible, lorsqu’on scroll par exemple, suivant l’intérêt réel de l’utilisateur.

Et les vidéos, on fait quoi ? Ah le vaste sujet. On se penche dessus prochainement :)