Optimiser les performances des images

Поделиться
HTML-код
  • Опубликовано: 9 ноя 2024

Комментарии • 20

  • @amlslmn4573
    @amlslmn4573 3 года назад +3

    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
      @EcoleduWeb  3 года назад +3

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

  • @linalol999
    @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 !

  • @simonlandais6132
    @simonlandais6132 3 года назад +1

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

  • @gaeil1
    @gaeil1 2 года назад

    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.

  • @axelpo9390
    @axelpo9390 3 года назад

    Merci Enzo ! Très bien expliqué

  • @electronpositron7005
    @electronpositron7005 3 года назад

    Merci Enzo en effet c'est importent ! 😉 👍

  • @Astroyal02
    @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 :

  • @Kogotaskillsandgetmoney
    @Kogotaskillsandgetmoney 3 года назад +1

    Merci beaucoup vous pouvez nous donner formation sur SASS

  • @soulslord1733
    @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
    @entrepreneurdigitalmedia9489 3 года назад

    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

  • @auto-diciplime237
    @auto-diciplime237 3 года назад

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

  • @anontough6907
    @anontough6907 2 года назад

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

  • @orzejfozjeofio
    @orzejfozjeofio 3 года назад +1

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

    • @EcoleduWeb
      @EcoleduWeb  3 года назад +2

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

  • @tenchigreed
    @tenchigreed 3 года назад

    First mais pas trop

    • @EcoleduWeb
      @EcoleduWeb  3 года назад +1

      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
      @tenchigreed 3 года назад

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

  • @fredericf7135
    @fredericf7135 3 года назад

    Très bien expliqué merci Enzo 👍