assemblee-virtuelle
Générer automatiquement des miniatures des images
Tension Parfois les images uploadées sont énormes. Cela ralentit considérablement l'affichage des pages.
Proposition Lorsqu'un upload d'image est détecté, générer automatiquement les miniatures (thumbnails) du côté du middleware. Les lier à l'image principale via une ontologie spécifique à SemApps, pour ne pas dépendre de PAIR (cf cette issue où il a été décidé de ne pas intégrer la notion de thumbnails dans l'ontologie PAIR).
Alternatives Je n'en vois pas.
@simonLouvet Cette issue a-t-elle été analysée lors des travaux sur les upload d'image ?
Je la transfert dans Archipelago car cela concerne les perfs, et je trouve qu'il est important d'avoir une version v1.0 ou v1.1 dans laquelle les perfs sont travaillées.
Oui c'est noyau. Surtout que c'est une amélioration qui concerne essentiellement le middleware.
Je comprends votre point de vue, mais c'était de mon côté pour la mettre en priorité "Archipelago"... mais bon, tant pis, je n'insiste pas, vous êtes 2 ! :) Ou alors, on pourrait créer un label "A résoudre pour le produit archipelago" dans SemApps...
Idéalement il faudrait reprendre le kanban, ça permettrait de mettre de la visibilité sur ce qui est important dans le noyau SemApps.
Malheureusement je crois pas qu'il est possible de faire des kanban cross-projets, sur une organisation. A vérifier, notamment avec la nouvelle gestion de projet Github, qui est en bêta.
Est-ce qu'il ne serait pas pertinent de convertir automatiquement toutes les images au format WebP ? Ce serait une belle politique écolo / basse conso non ?
https://nicolas-riviere.fr/2020/11/17/format-image-webp-performance-seo/ https://www.anthedesign.fr/creation-de-sites-internet/format-webp/
@simonLouvet
On va sans doute implémenter ça pour les Chemins de la Transition
La solution qui a été implémentée dans l'ontologie PAIR (voir https://github.com/assemblee-virtuelle/pair/issues/176), c'est de définir un ImageType (p.ex. "thumbnail" pour l'image en miniature).
Lorsqu'on upload une image, au lieu d'utiliser un semapps:File, on pourrait créer automatiquement plusieurs pair:Image: un pour la grande image, l'autre pour la petite image, etc.
Je tagge cette issue avec "needs concertation" pour qu'on en discute à l'occasion.
Après réflexion, je pense que la manière la plus propre de gérer ça en évitant d'avoir du code trop spécifique (donc non standard) côté middleware, c'est de faire la compression du côté client. Il y a de bonnes librairies pour ça:
https://github.com/fengyuanchen/compressorjs (la plus populaire) https://github.com/WangYuLue/image-conversion https://github.com/Donaldcwl/browser-image-compression
Après il pourrait être intéressant de gérer automatiquement les différents formats, afin d'uploader à la fois l'image originale et l'image compressée. Mais ça pourrait être fait uniquement côté client.
Petit problème avec cette solution: cela ne permet pas de réduire les images déjà uploadées. Il faudrait donc un petit outil de migration pour le faire. Il existe plusieurs librairies sous NodeJS, mais la plus populaire et la mieux maintenue semble être https://github.com/lovell/sharp. Il y a aussi https://github.com/oliver-moran/jimp mais il n'est plus maintenu depuis 2 ans.
Plus concrètement, le composant ImageInput de React-Admin a une prop options dans laquelle on peut passer toutes les options de react-dropzone.
La bonne manière de faire semble être d'utiliser l'événement onDrop ou onDropAccepted pour compresser le fichier au moment où il est sélectionner.
L'autre solution serait de gérer la compression côté data provider, avec une option activable. Mais ça veut dire que toutes les images seraient compressées pareillement, alors que si on met la compression au niveau du composant, on peut avoir une gestion plus fine.
tu peux aussi t'nispirer de ce que j'avais fait dans collabaction, le logiciel de ParLePeuple. j'utilise Sharp
