Retour aux actualités

Eco conception SPOTE – Utilisation des images

Le 7 février 2024

Les images jouent un rôle important dans la présentation d’une fiche offre sur SPOTE, elles permettent de donner un aperçu visuel des services proposés. Toutefois, l’utilisation d’images de haute qualité et en grand nombre peut avoir une empreinte environnementale significative et perturber l’expérience utilisateur. Pour répondre à ce défi, SPOTE souhaite adopter une approche écoresponsable pour optimiser et compresser les images, tout en préservant leur qualité et en réduisant leur impact environnemental.

Temps de lecture estimé : 3 mn
Eco conception SPOTE – Utilisation des images

L’optimisation et compression des images

Différents outils faciles à l’emploi existent et sont préconisés dans le cadre de l’écoconception, il est recommandé de les utiliser lorsque le porteur d’offre souhaite intégrer une image à la description de son offre et/ou article sur SPOTE.

Les formats d’images

Les formats d’images préconisés :

  • JPEG  : format image de type “photographie” sans effet de transparence souhaité. Ce format est recommandé pour les photos, les dégradés et autres images avec beaucoup de couleurs. Par exemple : prise d’individus, de paysages, de la faune & de la flore, document numérisé, etc.
  • PNG  : format d’images de type “dessin numérique” avec ou non un effet de transparence. Ce format est recommandé pour les images avec un arrière-fond clair et des illustrations avec peu de couleurs. Par exemple : création de logos.
  • SVG  : format vectoriel, pour les images de type « dessin numérique ». À privilégier si le poids du SVG est inférieur à celui du PNG généré et si le redimensionnement sans perte est un impératif.
  • WebP et AVIF  : pour les images de type « photographie » et « dessin numérique », dès lors que la compression permet d’obtenir des médias de poids inférieur au JPEG et PNG. Ces formats sont recommandés pour les images avancées. Par ailleurs, privilégiez le format Webp, compatible avec 96% des navigateurs actuellement utilisés (seulement 83% pour AVIF).
À noter :
  • WebP ne fonctionne pas avec certaines versions des navigateurs Chrome 4 - 8, Edge 12 - 17, Safari 3. 1 et 13.1, firefox 2-64, Opera 10.1, IE 6-10 et 11.
  • AVIF ne fonctionne pas avec certaines versions des navigateurs Chrome 4- 84, Edge 12-109 et 110, Safari 3.1 et 16.1, Firefox 2-76 et 77-92, Opera 10-70, IE 6-10 et 11.

Voir le taux de navigateurs supportant le webP sur Can I Use

Outil de compression d’images

Pour le traitement d’images, nous recommandons l’utilisation de l’outil Squoosh.app, qui est gratuit et très facile à utiliser. Il permet une optimisation complète des images (compression et redimensionnement) et constitue une alternative intéressante aux solutions payantes.

Avec Squoosh, les améliorations apportées à l’image et sa taille de fichier sont visibles en temps réel. Il est possible de comparer les résultats obtenus et d’évaluer le nombre d’octets économisés.

Squoosh est un logiciel web en ligne qui prend en charge de nombreux formats d’images tels que le JPEG, le PNG, le Webp et l’AVIF. Une fois les modifications apportées, la version optimisée de l’image peut être facilement sauvegardée sur le poste de l’utilisateur.

Comment utiliser Squoosh.app ?

Vidéo : Comment utiliser l’outil Squoosh ?

Une fois sur la page d’accueil https://squoosh.app/, charger l’image à compresser, soit par un glisser-déposer, soit en important l’image avec le sélecteur de fichiers.

Par défaut, la taille de l’image chargée est à 100%. Il est recommandé pour SPOTE d’utiliser le format d’image WebP et de respecter un format minimum préconisé de 1920 X 1024, ou 1024 x 760.

Pour les logos traités par Squoosh, choisir la qualité 100% format d’image, par exemple :

Pour les images standards, la compression n’est pas visible, par exemple :

Principe d’affichage des images et de la vidéo sur SPOTE :

L’affichage du contenu (image d’illustration et image cliquable des vidéos) sur SPOTE s’affiche progressivement au fur et à mesure que l’on se déplace de haut en bas de la fenêtre. Cette méthode permet de ne pas surcharger la bande passante lors du chargement de la page.

Bien que les images de haute qualité puissent sembler être la meilleure option pour améliorer l’apparence d’une plateforme, leur utilisation excessive peut avoir des conséquences négatives sur la performance, l’expérience utilisateur et l’environnement. Il est donc important de trouver un équilibre entre la qualité des images et la performance globale de la plateforme.
Si vous souhaitez en savoir plus sur l’écoconception des produits numériques, n’hésitez pas à explorer l’offre proposée par la DNum en cliquant ici