1633 sujets

Formats, encodage, internationalisation, XML

[Résolu] Redimensionner des images à la volée

Salut les dev,

J'ai un souci : je travaille sur un site qui présente des images, notamment sur la page d'accueil, il y a un carousel qui présente des photos.
Elles sont stockées dans un répertoire faisant partie de l'appli (Symfony), elles sont énormes, pour certaines jusqu'à 7M (!!) et ça ralentit énormément le chargement du site, surtout dans les zones ou la 4G ne passe pas. Ces photos sont uploadées par l'administrateur, qui les sort directement de son appareil photo ce qui explique leur taille gigantesque.
Je cherche une solution pour redimensionner à la volée ces photos quand elles s'affichent dans le carousel (en couplant éventuellement avec du lazy loading). J'ai trouvé des solutions de CDN d'images qui font ça mais sont payants, ou fortement limités dans leur version free ; j'ai trouvé Glide mais après l'avoir mis en place, l'affichage des images ne se fait pas. J'ai trouvé Liip-Imagine mais il ne semble pas fonctionner sur Symfony 4.4. J'ai trouvé srcset, mais pour l'utiliser il faut au préalable définir des images de differentes tailles, ce que ne pourra pas faire l'admin uploader de gigaphotos. Et je crois que la solution @mediaqueries + CSS ne changera pas le volume data à l'envoi de l'image.

Quelqu'un a t il quelquechose à me conseiller, pour pouvoir donc redimensionner ces images et ainsi améliorer la performance du site, sans que l'admin ait la moindre manip à effectuer ? Merci pour votre attention les amis
Bonjour,

L'attribut srcset est effectivement la piste la plus optimale. Voici l'exemple que je sers à tout le monde sur le forum : Picture tag, srcset and sizes attributes (CodePen).

Lorsque c'est possible il faut aussi expurger les données EXIF car elles peuvent être très volumineuses et on allège la photo de manière non négligeable, maintenant ça peut être important de les garder si vous comptez les exploiter sur le site web. De même, ne négligez pas la piste du format WebP de Google (les autres alternatives du même genre, prometteuses, ne sont pas encore suffisamment supportées).

Pour le redimensionnement à la volée, le standard sous JS est #sharp ; sous php - et plus particulièrement sous Symfony - je ne suis pas assez connaisseur, je laisse mes collègues vous en parler.
Modifié par Olivier C (08 Aug 2022 - 18:04)
Bonsoir,

perso, sous symfony, j'utilise glide pour redimensionner à la voléé mes images et éventuellement changer de format ou générer du cache d'images à partir de streams.
Pour ça, j'ai fait quelque chose d'assez simple :
1 / Un service qui gère la création des images et le cache, auquel je passe des paramètres dans le services.yml (chemin du cache, format des img etc.), Ce service contient une méthode de mise à l'échelle des images en utilisant glide.
2 / Un controleur pour la générer les urls des images que je souhaite utiliser dans mon application par exemple :
- une méthode pour générer les avatars avec comme url 'https://monsite.fr/img/avatar/{username}'
- une autre méthode pour générer des vignettes d'articles 'https//monsite.fr/img/articles/{slug}
- etc.
chaque méthode du controleur appelle le service avec les bon paramètres (taille désirée, format de sortie, etc.), ça évite que l'utilisateur appelle l'url en changeant les paramètres pour générer des images énormes.
3 / Je peux appeler mon controleur depuis twig, vue, react ou autre simplement avec un img src (alors qu'avec liip il fallait utiliser un helper twig).

J'ai aussi gagné en poids en passant au format webp et pour ça il m'a suffit de changer le format dans ma config.

Il y a peut être plus simple encore, le schéma que j'ai mis en place correspond à mon cas d'utilisation car j'ai des images provenant de plusieurs sources mais si de ton coté, c'est l'admin qui uploade toutes les images, tu peux éventuellement faire le traitement de l'image après l'upload sans avoir besoin d'un controleur comme dans mon cas.
Merci pour vos réponses Smiley ravi !

Olivier :
les données EXIF je pense qu'il peut être bon de les garder sur ce projet je ne vais pas les supprimer. J'ai regarde a quoi ca ressemblait, on dirait pas qu'on peut gagner tellement de place la dessus !

Gilles : Glide a l'air clairement excellent mais j'ai pas réussi à le faire fonctionner Smiley fache , je comprends tes explications mais j'en suis encore au stade ou j'ai besoin de concret, d'un cadre ; j'avais suivi ce tuto https://blog.silarhi.fr/symfony-miniature-image-glide-php/ mais pas d'affichage des images... J'ai posté un message de panique ici https://www.guilded.gg/Nouvelle-Technofr/groups/MDqGG49z/channels/0c2933cc-4291-486f-bcda-8eb1ee7ca50c/forums/1180738362 et son équivalent anglophone ici https://stackoverflow.com/questions/73039193/jpg-dont-appear-when-using-glide-to-resize-it et je n'ai pas eu de réponse, du coup j'ai cherché autre chose .. alors qu'il y a surement pas grand chose pour remettre en ordre le schmillblick Smiley rolleyes comme toujours en fait ...
Tu voudrais bien jeter un oeil sur ce message voir si tu trouves ce qui foire ?
Bonjour,
Je testerai ça dès que je serai sur un pc.
En attendant, est-ce que tu as qqchose dans les logs ?
Que se passe-t-il si tu accedes directement à l’url d’une image ?
Bonjour Gilles,

Je n'ai rien dans les log de la debug barre, 2 messages de dépréciation à propos d'autre chose et c'est tout.

Quand j'essaie d'accéder à l'URL d'une image elle ne s'affiche pas, dans "réseau" des outils dev Chrome j'ai un 404 pour chaque image.

En dehors de ça tout fonctionne bien et j'ai pas de message d'erreur, c'est ce qui me fait penser que ça doit être un tout bête problème de syntaxe quelque part, ou le mauvais dossier appelé je ne sais ou .. Smiley ohwell

Merci pour ton aide !
Suite et fin, pour les gens qui passeraient par ici avec le même problème, je m'en suis finalement sorti avec le redimensionnement des images grâce à Liip Imagine :

1/ Installer le bundle
2/ il se crée dans config/packages un fichier liip_imagine.yaml (si non, le créer), dans lequel on met la configuration du filtre à appliquer :

liip_imagine:
resolvers:
default:
web_path: ~

filter_sets:
cache: ~

# nom du "filter set" qu'on met en place
vignette:

# qualité de l'image redimensionnée (ici ajustée à 75%)
quality: 75

# liste des transformations à appliquer dans ce filtre "vignette" :
filters:

# créer une miniature : ajustement de la taille à 200*200 utilisation du mode "outbound" pour crop les images quand le ratio de taille diffère :
thumbnail: { size: [200, 200], mode: outbound }

# crée une bordure noire de 2px : centrage de la vignette sur un fond noir
background: { size: [208, 208], position: center, color: '#000000' }

3/ Appliquer le filtre créé à l'image souhaitée :
<img src="{{ asset('/img/ZombieKrisIA.png') | imagine_filter('vignette') }}" />

Et le tour est joué !

A noter que la vignette générée se crée dans le nouveau dossier situé à 'public/media/cache', elle y reste et est affichée par défaut. Si on veut finalement appliquer un autre filtre à cette même image il faut la supprimer d'abord.
Sujet clos
Aller à