Image svg lourde !

[Manu-41]

Bonjour,

J'ai un module de personnalisation qui génère des images produits en .svg. Donc dans l'historique de commande ou dans le panier, c'est long, surtout que certain client personnalisent plusieurs produits, donc les temps sont multipliés.

Quelle serait la solution simple pour avoir des images png ou décaler le chargement des svg ?

Merci pour vos infos.

[Manu-41]

Sujet qui ne motive pas grand monde 🤔

[El Patron]

Bonjour,
Si vos images produits en SVG ralentissent le chargement du panier, du tunnel de commande ou de l’historique des commandes, la solution la plus efficace est de générer automatiquement une version PNG à chaque personnalisation client, puis d’afficher le PNG à la place du SVG dans ces pages.

Pour cela, il se peut que vous deviez modifier votre module de personnalisation afin qu’il convertisse le SVG en PNG sur le serveur (par exemple avec la librairie PHP Imagick), et qu’il enregistre ensuite les deux fichiers pour chaque personnalisation.

Ensuite, il faudra modifier les fichiers de template utilisés pour le panier, la commande et l’historique afin d’afficher le PNG plutôt que le SVG. Cela accélérera grandement le chargement des pages et assurera une meilleure compatibilité avec tous les navigateurs.

Si vous ne savez pas comment faire cette adaptation, vous pouvez soumettre le code de votre module à une intelligence artificielle comme ChatGPT, Jules ou un outil similaire. Vous pouvez leur demander de modifier le code pour enregistrer un PNG en même temps que le SVG, ou même uniquement le PNG si le SVG ne vous est pas indispensable. Cela peut vous permettre d’obtenir rapidement un exemple de code ou une version adaptée de votre module.

Enfin, si votre module est commercial ou suivi, pensez aussi à contacter directement le développeur. Il sera sûrement en mesure d’effectuer ce changement beaucoup plus rapidement, puisqu’il connaît déjà la structure et l’intégration du module avec PrestaShop.

Nous ne savons pas exactement à quel endroit le module s’intègre dans PrestaShop, mais j’espère que ces conseils vous aideront à avancer !

N’hésitez pas à demander plus de détails ou un accompagnement étape par étape si besoin.

Edited June 24 by El Patron (see edit history)

[Manu-41]

2 hours ago, El Patron said:

Bonjour,
Si vos images produits en SVG ralentissent le chargement du panier, du tunnel de commande ou de l’historique des commandes, la solution la plus efficace est de générer automatiquement une version PNG à chaque personnalisation client, puis d’afficher le PNG à la place du SVG dans ces pages.

Pour cela, il se peut que vous deviez modifier votre module de personnalisation afin qu’il convertisse le SVG en PNG sur le serveur (par exemple avec la librairie PHP Imagick), et qu’il enregistre ensuite les deux fichiers pour chaque personnalisation.

Ensuite, il faudra modifier les fichiers de template utilisés pour le panier, la commande et l’historique afin d’afficher le PNG plutôt que le SVG. Cela accélérera grandement le chargement des pages et assurera une meilleure compatibilité avec tous les navigateurs.

Si vous ne savez pas comment faire cette adaptation, vous pouvez soumettre le code de votre module à une intelligence artificielle comme ChatGPT, Jules ou un outil similaire. Vous pouvez leur demander de modifier le code pour enregistrer un PNG en même temps que le SVG, ou même uniquement le PNG si le SVG ne vous est pas indispensable. Cela peut vous permettre d’obtenir rapidement un exemple de code ou une version adaptée de votre module.

Enfin, si votre module est commercial ou suivi, pensez aussi à contacter directement le développeur. Il sera sûrement en mesure d’effectuer ce changement beaucoup plus rapidement, puisqu’il connaît déjà la structure et l’intégration du module avec PrestaShop.

Nous ne savons pas exactement à quel endroit le module s’intègre dans PrestaShop, mais j’espère que ces conseils vous aideront à avancer !

N’hésitez pas à demander plus de détails ou un accompagnement étape par étape si besoin.

Merci pour votre réponse.

J ai déjà contacté le développeur, mais il semble qu il faut avoir sur sont serveur inscape ou similaire pour convertir le fichier svg en png. Chez o2switch, ce n est pas possible. 

[El Patron]

 Imagick pour PHP?

other option is to ask them to lazy load in those areas

 

Edited June 24 by El Patron (see edit history)

[ps8modules]

Bonjour.

Convertir un fichier SVG en PNG est très simple avec JavaScript.

Vous trouverez un exemple ici (EN): 

https://zooper.pages.dev/articles/how-to-convert-a-svg-to-png-using-canvas

[Manu-41]

Le développeur du module indique 

Le canvas n'est pas disponible coté serveur, donc on a rien fait. (Le module utilise déja le canvas pour pour la conversion svg/png en backoffice)

Si on fait la conversion dans le navigateur, alors on doit bien sur charger le SVG pour le convertir en PNG.. Et nous voulons éviter de charger le SVG en premier lieu.

Il vous faut une solution de conversion svg -> png sur le serveur.