Optimiser les performances des images

[@amlslmn4573]

Salut Enzo, tu as aussi la balise qui englobe les balises et (plusieurs sources et une image de base) et qui permet, avec plusieurs attributs dont "srcset" d'avoir un comportement équivalent à ce que tu nous présente ici :) Comme souvent, il y a plusieurs manières de faire la même chose dans notre métier ^^ Prend soin de toi l'ami et merci pour le travail que tu fournis.

[@EcoleduWeb]

Exact ! On peut même changer la densité des images mais c'est pour une autre vidéo. Merci pour le soutien 🚀

[@gaeil1]

Merci pour la démo. Dans le cas d’une image plus petite, vignette d’illustration d’un texte , genre 400x250 px, je présume que cette astuce ne sert pas. Et qu’il faut utiliser juste class="img-fluid" ? . Sauf pour les grandes images, Je n’arrive jamais trop à choisir entre le code image responsive, et cette méthode. Car dans ce cas, l’image possède quand même sa taille (fixe), certes choisi par le navigateur en fonction de l’ecran, mais dans le cas où elle est utilisée avec une combinaison de texte, (ou placement dans une colonne etc.) c’est le texte qui va s’ajuster et pas les deux. Ou, si l’image fait 400px, et que l’écran du terminal fait 380 (c’est un exemple) l’image "déborde" sur la droite..(on ne la voit plus en entier. Merci.

[@simonlandais6132]

Merci, je serai intéressé par d'autres choses à savoir sur les performances comme ça

[@linalol999]

Hello, Merci beaucoup pour cette super astuce ! Sais-tu s'il existe quelque chose de similaire pour gérer les background-image ? J'ai pensé à utiliser des media queries mais cela ne permet pas au navigateur de choisir automatiquement la bonne taille en fonction de ce qu'il a besoin de render. Merci encore pour toutes tes vidéos, je regarde ton contenu depuis quelques semaines et ça m'enrichit beaucoup !

[@axelpo9390]

Merci Enzo ! Très bien expliqué

[@EcoleduWeb]

🙌

[@electronpositron7005]

Merci Enzo en effet c'est importent ! 😉 👍

[@Kogotaskillsandgetmoney]

Merci beaucoup vous pouvez nous donner formation sur SASS

[@Astroyal02]

Merci beaucoup pour cette vidéo très claire, comme d'hab ! Petite question quand je lance l'outil lighthouse de l'inspecteur pour vérifier la performance de mon site en mode mobile, il ne se base pas sur les images de taille 576px que j'ai utilisées mais sur les images de taille 992px alors qu'il fait bien le test sur un mobile de 412px de large, sais-tu pourquoi ? je n'ai pas ce problème en utilisant la lighthouse en mode desktop sur différents formats de fenêtre. EDIT : Il semblerait qu'il faille modifier un peu le code pour que cela marche pleinement de manière responsive, j'ai réussi en utilisant ce code :

[@auto-diciplime237]

Bonjour, pourquoi tu mais lle width en px au lien du%?

[@anontough6907]

if you knew, how much helpfull you are... 💌💌✌✌ Thank you for all these works.

[@soulslord1733]

Il y a pas un moyen de faire ça, sans avoir 3 photos (une pour le desktop, une pour le format tablette et une pour le mobile)? Car c'est une très bonne astuce et je t'en remercie, mais devoir redimensionner les images quand t'en a 50, ça peut devenir très long

[@entrepreneurdigitalmedia9489]

j'adore vos tutos très bien expliqué mais malheureusement j'arrive pas à me connecter à votre newsletter j'avais mis mon adresse mail mais ça ne passait pas

[@orzejfozjeofio]

Tu pourrais commencer par utiliser du jpg/webp pour les photos plutôt que du png

[@EcoleduWeb]

C'était pour l'exemple, j'ai pris la première image trouvée ...

[@tenchigreed]

First mais pas trop

[@EcoleduWeb]

Super le thème de ta chaîne, je pense que tu peux aider beaucoup de gens en parlant réseau et sécurité, lâche rien!

[@tenchigreed]

@@EcoleduWeb oh merci c'est super sympa ^^ , je fais au mieux

[@fredericf7135]

Très bien expliqué merci Enzo 👍