Éco-conception et images : un mariage impossible ?
Cindy Simon
Un des principaux freins à la démarche d’éco-conception est souvent la peur de devoir proposer un site web pas ou peu illustré et donc plutôt terne et pas très attractif. Alors, un site web éco-conçu doit-il forcément être austère ? Spoiler : pas du tout !
En effet, avec les bons outils et un peu d’astuce, il est tout à fait possible de proposer des visuels, des animations et autres fantaisies à vos visiteurs sans faire exploser la facture environnementale.
UN PRÉ-REQUIS : L’UTILITÉ DE L’IMAGE
Avant même d’insérer une image, il est important de se demander si elle est vraiment utile, ce qu’elle apporte au discours. Si le vieil adage dit qu’« une image vaut 1000 mots », nous avons également souvent la tentation d’utiliser des visuels pour “remplir”. Est-ce que ce texte, ce titre ou encore ce chiffre se suffisent à eux-mêmes ? La réponse varie en fonction du contexte et c’est à vous de prendre conscience de la véritable importance de l’image. Mais sachez qu’en éco-conception, 1000 mots valent souvent mieux qu’une image.
DES VISUELS DE POIDS… LÉGERS COMME L’AIR
Maintenant que vous avez choisi les visuels qui serviront votre discours, il est temps de les préparer pour l’intégration.
En prenant en compte quelques critères clés, vous pourrez obtenir de belles et grandes images de qualité, tout en gardant un poids minimal.
1. Le style graphique :
Le style graphique utilisé va avoir un impact direct sur le poids d’une image. Une image tramée ou en bichromie par exemple sera beaucoup plus légère que la même image en couleur. Le créatif peut alors jouer sur ces effets pour apporter une identité forte, sans perdre le sens du visuel et améliorer l’impact environnemental de son site web.
Image JPG en noir et blanc avant conversion en WebP : 57ko
Image PNG en bichromie et tramée avant conversion en WebP : 38ko
2. Le format :
Selon l’utilité et le contexte de l’image, il est important d’adapter le format à la situation. En général, vous aurez le choix entre 5 formats : JPEG (ou JPG), PNG, SVG, GIF, ICO.
- Le JPEG (ou JPG) est préconisé pour toutes les photos n’ayant pas de transparence et avec beaucoup de couleurs. Ce format permet de créer des fichiers légers grâce à sa compression avec perte. Si la taille de l’image est correcte par rapport à son affichage sur le site, les pertes ne seront pas visibles à l’œil nu. Le gros avantage du JPEG est son côté tout terrain, c’est en effet un format aujourd’hui universel.
- Le PNG est utilisé pour les images avec une transparence ou avec peu de variation de couleurs. Pour ces 2 utilisations, il existe 2 types d’export, le PNG-8 et le PNG-24. Le chiffre indique le niveau de bit pris en charge par l’ordinateur. En clair, plus le chiffre est haut, plus il y a de couleurs prises en charge et plus l’enchaînement des couleurs est lisse pour les dégradés par exemple.
Mais alors, quand utiliser le PNG-8 et le PNG-24 ? Basé sur 256 couleurs, le PNG-8 est adapté à des images présentant peu de couleurs et sans transparence. Dans ce cas, il peut s’avérer moins lourd et de meilleure qualité qu’un JPEG.
Image JPG
Image PNG-8
La différence est légèrement perceptible, mais elle est flagrante en zoomant. On remarque que le PNG-8 offre une meilleure qualité de la couleur et des contours que le JPEG sur ce style d'image, la pixellisation est dû au zoom conséquent.
En ce qui concerne le PNG-24, sa capacité à conserver l’opacité et la transparence fait de lui le format idéal pour des photos avec transparence comme du détourage par exemple.
Attention, pour des images rondes (ou autres formes simples), il est plus intéressant de coder un masque CSS plutôt que d’exporter l’image en PNG. Cependant, pour des formes plus complexes, l’utilisation du PNG vous fera gagner du temps. Mais si vous avez la possibilité d'utiliser un masque pour les découpes dans les images, je vous le conseille fortement.
- Le SVG est employé pour les icônes, les logos et éléments graphiques. Étant un format de fichier vectoriel, le SVG n’utilise pas des pixels mais est entièrement écrit en code XML (un langage permettant de définir, stocker et partager des données) qui spécifie les formes, les couleurs et le texte composant le fichier.
Ce format a de nombreux avantages, notamment sa compatibilité avec la transparence, l’animation et les modifications de couleurs et de formes directement dans le CSS (évitant de modifier le fichier dans un logiciel externe). Il permet également un redimensionnement à n’importe quelle échelle sans aucune perte de qualité. Par ailleurs, le SVG n’étant composé que de code, il crée des fichiers extrêmement légers et bien optimisés, d’autant plus si les formes qui les composent sont simplifiées avant l’export.
Icône SVG non simplifiée : 20ko
Icône SVG simplifiée : 18ko
Si le SVG semble parfait, il présente tout de même quelques inconvénients par rapport au PNG. Ce format peut avoir des problèmes de compatibilité avec d’anciens appareils et navigateurs. Il n’est également pas pris en charge nativement dans la médiathèque de WordPress et nécessite une extension pour pouvoir être utilisé. De plus, il a besoin de logiciels tels qu’Adobe Illustrator (payant) ou Inkscape (gratuit) et d’une certaine expertise pour pouvoir être créé.
Une fois ces limites en tête, le SVG est à utiliser un maximum pour les icônes, logos et autres éléments graphiques peu complexes.
Aujourd’hui, encore trop d’icônes sont utilisées avec l’extension PNG. Malheureusement, en plus d’un fichier plus lourd, les icônes semblent de mauvaise qualité. Si vous en avez la possibilité, troquez vos anciennes icônes PNG pour de magnifiques icônes vectorielles SVG, moins lourdes et plus agréables à l’œil.
- Le ICO est un format très spécifique utilisé en général pour la favicon du site.
- Le GIF est très connu pour les MEMEs ou les chats animés. C’est avant tout un des premiers formats historiques qui permettait d’embarquer de l’animation et de la transparence (avec une couleur “clippée”). Quand il est utilisé pour des vidéos courtes, lues en boucle et composées d’images complexes comme un extrait de film, celui-ci est fortement déconseillé. Le GIF est en effet un format qui devient vite très lourd. Son usage pour l’animation est rarement essentiel. De plus, sa lecture en boucle est une mauvaise pratique UX ne laissant pas le contrôle de l’interface à l’utilisateur. Néanmoins, dans certains cas il peut s’avérer nécessaire. Il est alors important d’optimiser son GIF le plus possible grâce à des applications spécifiques.
Pour des animations avec des formes, il est plus que recommandé d’utiliser du SVG, pouvant être animé grâce à du JavaScript et du CSS, ce qui est beaucoup plus léger et qualitatif, mais qui demande plus d’expertise.
- Les formats nouvelles générations, AV1 (AVIF) et WebP, permettent d’augmenter la compression et ainsi obtenir de meilleures performances avec une qualité, et une vitesse de chargement supérieure aux autres formats.
AVIF est le plus récent et le plus performant des 2, mais il n’est pas encore supporté partout (ex : Safari). Cependant, certains CMS comme Prismic, compressent automatiquement les fichiers de la médiathèque au format AVIF pour les navigateurs le supportant.
Pour ce qui est du WebP, il est supporté sur toutes les versions récentes de navigateur. En revanche, certains CMS comme WordPress, Magento et Salesforce Commerce Cloud nécessitent des plugins pour le supporter, ce qui peut être contre-productif d’un point de vue éco-conception, en alourdissant la partie serveur. Parfois, la conversion au format WebP peut rendre votre fichier plus lourd qu'il ne l'était de base, c'est généralement le cas lorsque le fichier initial n'est pas un JPEG, il est important de vérifier.
Si votre site n’a pas ces contraintes, alors foncez en utilisant le format WebP !
Image JPG en noir et blanc converti en WebP : 28ko (soit un gain de 29ko)
Image PNG en bichromie et tramée converti en WebP : 49ko (soit une augmentation de 11ko), ici le PNG est à privilégier.
3. La taille et la résolution :
Evidemment, plus c’est grand, plus c’est lourd ! Il est essentiel que la taille de l’image affichée à l’écran et dans le code soit les mêmes. En effet, le navigateur charge le visuel qui lui est donné dans le code, peu importe sa taille à l’écran. Ainsi, si pour afficher une photo de profil de 64x64px vous appelez une image de 1024x1024px, alors vous chargerez cette dernière, soit 250 fois plus de pixels que nécessaires.
Le code doit également prendre en compte les différentes tailles et densités d’écrans. Un écran 4K ou retina aura besoin d’une qualité d’image supérieure à un écran HD, et un mobile n’aura pas besoin de charger une image aussi grande qu’un ordinateur. Certes les images retina à haute densité de pixels sont flatteuses à l'œil pour les écrans qui peuvent les afficher, mais gardez en tête qu’une image dont on double la taille pour être compatible rétina ou 4K, voit son poids quadrupler. Il faut donc charger différentes images en fonction de ses 2 propriétés d’écran, notamment grâce aux balises srcset et src des images dans le code HTML.
Les logiciels d'optimisation et de conversion :
De nombreuses solutions gratuites en ligne existent pour optimiser vos images. En voici deux, chacune répondant à une problématique précise :
- ImageOptim : très utile pour l'optimisation de vos images avec un simple glissé déposé
- XnConvert : permet de modifier le format de votre image en quelques secondes (conversion en webp notamment) mais aussi de la recadrer, redimensionner, d’ajouter des filtres et bien d'autres fonctionnalités !
SI ON NE LE VOIT PAS, ÇA NE COMPTE PAS !
Le lazy loading est une technique permettant de charger des éléments uniquement lorsqu’ils apparaissent à l’écran. Ainsi, toutes vos images n’auront pas à charger dès l’affichage du haut de page et votre site gagnera en performance. Elle est presque aussi importante que le travail d’optimisation. Le code JavaScript suivant permet de mettre en place cette technique, il vous suffit d’ajouter la classe « lazy-img » et de mettre le lien de votre image dans un attribut data-src.
<img class="lazy-img" data-src="./img/jpg-noir-blanc.jpg">
const imgTargets = document.querySelectorAll('.lazy-img');const loadImg = (entries, observer) => {const [entry] = entries;if(!entry.isIntersecting) return;entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target);};const imgObserver = new IntersectionObserver(loadImg, {root: null,threshold: 0.5,})imgTargets.forEach(img => imgObserver.observe(img));
En résumé
Les visuels pèsent pour beaucoup sur le poids d’une page web et il est important d’agir dessus pour améliorer les performances de chargement et diminuer son impact environnemental.
Une fois l’utilité des images validée, les différentes méthodes proposées permettent à la fois d’agir sur le visuel en lui-même (style, format, taille) et sur les appels serveur nécessaires à son chargement (lazy loading).
Maintenant que vous savez tout, plus d’excuses pour ne pas optimiser vos images sur vos sites web !