Bon. Au secours. Des gens calés en images responsives dans la salle ?

Je m'embrouille sévère avec srcset et sizes. J'ai un `sizes="100vw"` parce que c'était par défaut dans mon CMS (Grav), mais c'est pas ce que je veux, ça agrandit mes images… Apparemment on peut mettre que des vw ou des px dans `sizes`. Or je ne sais pas à l'avance quelle va être la taille de mon image, c'est dans du contenu en Markdown.

J'aurais bien mis "auto" pour signifier "si t'as la place, laisse l'image à sa taille réelle et basta", mais ça n'est pas valide ^^'

Je pense que j'ai vraiment rien compris. #halp

Merci d'avance.

#webdev #responsive #srcset #images

@lamecarlate Je connais pas suffisamment pour pouvoir t'aider par contre je suis intéressé par le cas d'usage. D'ailleurs si tu utilises "sizes" c'est que tu as plusieurs tailles d'image non ? Du coup je me demande comment tu définis ça en Markdown ? 🤔

@marien Mon CMS ajoute automatiquement `sizes=100vw`, je peux peut-être l'enlever, mais je ne sais pas encore comment.

Mon cas d'usage : je fais une page pour présenter un site web sur lequel j'ai travaillé. Je mets des copies d'écran d'une page suivant différentes tailles de fenêtre pour montrer les variations. Par conséquent j'ai des images de largeur variable. Et toutes mes images sont élargies à mort à 1920px (largeur de ma fenêtre sur a machine) ; quand j'ai une image de 600px ("réels") de large, ça se voit beaucoup…

@lamecarlate Mais du coup tes images sont définies via la balise <img /> avec l'attribut `srcset` ?

- si oui ça veut dire que tu as réussi à définir l'attribut `srcset` dans ton Markdown et donc qu'il doit bien y avoir de redéfinir `sizes` aussi (reste à trouver comment ^^")
- sinon je pense que l'attribut `sizes` ne devrait pas être défini

Une potentielle solution : tu peux essayer de définir tes balises `<img />` directement, sans passer par la syntaxe Markdown (des fois ça marche :))

@marien Concrètement j'utilise ça : https://learn.getgrav.org/content/media#sizes-with-media-queries-using-derivatives. (sizes est automatiquement mis à 100vw…)

Ensuite, toute la partie après le .jpg dans l'exemple, c'est un plugin qui me l'apporte : https://github.com/simoncramer/grav-plugin-srcset.

Moi j'écris juste .

Ce que me donne aussi ce plugin c'est la génération automatique des autres tailles d'image - j'essaie d'avoir un système de contribution le plus simple possible et d'automatiser au max. Si j'utilise Markdown, c'est pour ne pas avoir à écrire du html et me concentrer sur le contenu ^^

@lamecarlate Ah oui ok je comprends mieux ! J'essayerai de jouer avec les "responsive images" un peu plus tard (faut quand même que je bosse un peu :p), le sujet m'intéresse et ça semble pas si simple. Je te dis si jamais je trouve une solution !

@marien Oui, c'est complexe ! Et encore, là j'ai juste mis des tailles d'images différentes, j'ai pas touché aux densités de pixels :P (et là, je suis encore plus paumée, parce que j'ai rien pour tester ça proprement).

@lamecarlate intuitivement je dirais qu'il faut que tu utilises des breakpoints pour les différentes tailles d'images (en principe le plugin te génère toujours les mêmes en se basant sur 'Maximum Width', 'Minimum Width' et 'Step Size'), tout spécifier en px et utiliser un `max-width: 100%` dans ton CSS. Exemple ?

(min-width: 300px) 300px, (min-width: 440px) 440px, (min-width: 580px) 580px, etc.

@marien Je vais tester ça ce soir, merci d'avoir cherché :)

@lamecarlate Tu as essayé du coup ? :)

@marien Oula j'ai *complètement* zappé. Hier soir je n'ai pas codé du tout, zut. Ce soir je n'aurai probablement pas le temps non plus, ni demain… Hum, dimanche j'essaie de me motiver !

@marien Alors j'ai testé : ça revient exactement au même que 100vw (qui veut dire "prendre toute la largeur du viewport à tout moment).

J'ai réussi en donnant `display: inline-block` au conteneur de l'image (pour lui faire prendre la taille de l'image), mais pouak… je cherche encore un peu.