Pas d’accord, le mieux c’est de combiner l’astuce donnée avec la balise picture et les src set. Car ça permet entre autre de mettre en place du lazy loading et d’optimiser le chargement de la page 😉
@@mzellelilas1267 le Lazy loading gère aussi le "background" il y a pas que le src set pour image qui permet de faire du Lazy loading. J'utilise du lazy loading autant en background et parlent d'opti , alors la base utilisons une image en webp serais déjà un bon départ dans les 2 cas je préfère background , chacun le choix et dépend de l'application ou du site toute façon. Il y a pas de réel meilleur façon de faire qu'une autre dans les 2 cas comme dit cela dépend du projet et du type du projet et comment la personne gère le projet =)
@@myanimes_fr pour le coup on passe par twic pics qui optimise l’image et la renvoie au meilleur format possible supporté (soit webp dans les navigateurs récents) Pour le reste j’ai réellement vu une différence en mettant en image avec lazy loading plutôt qu’en background notamment sur le score lighthouse
@@mzellelilas1267 Après le lazy oui j'affirme que c'est utile je dirais pas le contraire. Après lazy avec background c'est aussi possible. Lazy peu charger un background image, pour cela je dit que les 2 façon c'est possible :)
Salut ! c'est top ! Cependant je'ai rencontré plusieurs fois un problème avec les images: De temps en temps j'ai besoin de changer le centre de l'image, admettons par exemple un montagne , l'image ne doit afficher que le pic de la montagner et non la bas. hors je n'arrive pas à faire ceci, j'utilise ojectif-fit mais je vois le haut et le bas de l amontagne. Peux tu faire une video à ce sujet ? pour changer le point central de l'image et la deplacer sur un axe X/Y dans son conteneur ? Est-ce possible ?
@@EcoleduWeb Pour essayer de conserver les dimensions de l'image il faudrait ne pas mettre de hauteur fixe sinon ? Et on essaie de garder nos rapport largeur hauteur avec un aspect ratio ou ça change pas grand chose ?
@@maclevine9233 Tu peux simplement mettre une width 100% dans la carte. Si tu as plusieurs cartes avec plusieurs images différentes, tu peux utiliser aspect ratio en plus, afin d'avoir toujours le même ratio.
Oh genial. J'ai un problème similaire avec du responsive sur un élément et j'arrive pas du tout a ne pas deformer le contenu quand on change de taille d'écran ou de fenêtre c'est horrible. 😢
Le souci de Canvas c’est que c’est un élément dont le contenu est tracé, donc il se comporte un peu comme une image… ce que tu peux faire est manipuler la taille du Canvas mais en rajoutant la priorité « aspect-ratio: 1; » et normalement il conservera ses proportions
C'est object-position: center; et ça permet de centrer l'image dans son container, ce n'est pas tout à fait similaire; Si l'image couvre tout l'espace avec object-fit: cover, il n'y en a plus pour la centrer et object-position ne sert à rien.
Le must c'est de resize les images aux tailles souhaitées et d'utiliser les srcSet
Absolument, je prépare un short dessus.
Background , est bien meilleure 👌
Pas d’accord, le mieux c’est de combiner l’astuce donnée avec la balise picture et les src set. Car ça permet entre autre de mettre en place du lazy loading et d’optimiser le chargement de la page 😉
@@mzellelilas1267 le Lazy loading gère aussi le "background" il y a pas que le src set pour image qui permet de faire du Lazy loading. J'utilise du lazy loading autant en background et parlent d'opti , alors la base utilisons une image en webp serais déjà un bon départ dans les 2 cas je préfère background , chacun le choix et dépend de l'application ou du site toute façon. Il y a pas de réel meilleur façon de faire qu'une autre dans les 2 cas comme dit cela dépend du projet et du type du projet et comment la personne gère le projet =)
@@myanimes_fr pour le coup on passe par twic pics qui optimise l’image et la renvoie au meilleur format possible supporté (soit webp dans les navigateurs récents)
Pour le reste j’ai réellement vu une différence en mettant en image avec lazy loading plutôt qu’en background notamment sur le score lighthouse
@@mzellelilas1267 Après le lazy oui j'affirme que c'est utile je dirais pas le contraire. Après lazy avec background c'est aussi possible. Lazy peu charger un background image, pour cela je dit que les 2 façon c'est possible :)
Salut ! c'est top ! Cependant je'ai rencontré plusieurs fois un problème avec les images: De temps en temps j'ai besoin de changer le centre de l'image, admettons par exemple un montagne , l'image ne doit afficher que le pic de la montagner et non la bas. hors je n'arrive pas à faire ceci, j'utilise ojectif-fit mais je vois le haut et le bas de l amontagne. Peux tu faire une video à ce sujet ? pour changer le point central de l'image et la deplacer sur un axe X/Y dans son conteneur ? Est-ce possible ?
Salut, tu peux utiliser background-position ou object-position suivant ta configuration.
Salut, tu ne serais pas prof (ou ancien prof) sur la plateforme "Studi" ?
Sinon incroyable tes vidéos, 1000 merci pour l’aide que tu fournis !
Merci beaucoup et non, je ne connais pas cette plateforme;
Tu peux voir les plateformes où je suis présent en description.
Je me demande ce que ça donne en essayant avec un aspect ratio ?
Aspect ratio est très intéressant, et après coup, mon dernier exemple avec la carte n'est pas bon.
@@EcoleduWeb Pour essayer de conserver les dimensions de l'image il faudrait ne pas mettre de hauteur fixe sinon ? Et on essaie de garder nos rapport largeur hauteur avec un aspect ratio ou ça change pas grand chose ?
@@maclevine9233 Tu peux simplement mettre une width 100% dans la carte.
Si tu as plusieurs cartes avec plusieurs images différentes, tu peux utiliser aspect ratio en plus, afin d'avoir toujours le même ratio.
Comme d’hab, c’est top
Oh genial. J'ai un problème similaire avec du responsive sur un élément et j'arrive pas du tout a ne pas deformer le contenu quand on change de taille d'écran ou de fenêtre c'est horrible. 😢
Le souci de Canvas c’est que c’est un élément dont le contenu est tracé, donc il se comporte un peu comme une image… ce que tu peux faire est manipuler la taille du Canvas mais en rajoutant la priorité « aspect-ratio: 1; » et normalement il conservera ses proportions
ooh gosh i was using js to do so
object-fit : center est pas mieux dans certains cas ?
C'est object-position: center; et ça permet de centrer l'image dans son container, ce n'est pas tout à fait similaire;
Si l'image couvre tout l'espace avec object-fit: cover, il n'y en a plus pour la centrer et object-position ne sert à rien.
@@EcoleduWeb Ah oui effectivement, merci pour la réponse ! On peut donc potentiellement utiliser les 2 en même temps alors
@@quentin443effectivement exemple:
body {
background: url(./blablabla.jpeg) center/cover
}
:)
Top
Width=100vh et tu rajoute centre/cover
Pourquoi 100vh (d’ailleurs il vaut mieux utiliser dvh car il prend en compte les variations de hauteur en interface sur mobile) et os 100vw ?
C ce que je fais!
Merci, mais je déteste css
Moi je met min-wheight: 100vh est c'est ◻️