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.
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).
- 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 ?
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 :
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
Mise à jour du 24/04/2024 :
Suite à une mise à jour logicielle, vous pouvez rencontrer des difficultés avec la compression "OxiPNG" depuis un navigateur Chrome (ça mouline). En revanche, pas de problème détecté avec Firefox.