Optimiser la performance des images responsives

J'ai eu l'honneur de présenter une petite conférence lors du meetup WebPerf de mars 2018, sur un sujet qui me passionne, puisqu'il combine deux de mes marottes en Web front : la performance et les images en Responsive Web Design. Je vous invite à découvrir mes slides et la vidéo.

Vous pouvez directement regarder la vidéo, captée par Mozilla, qui nous accueillait dans ses somptueux locaux parisiens :

En me regardant, je me rends compte de la quantité incroyable de « euuuh » qui ponctuent ma présentation, il va falloir que je fasse des progrès…

Les slides sont visibles — et même téléchargeables — en plusieurs emplacements :

N'hésitez pas à mettre des commentaires, des pouces, des likes, des étoiles, sur ces différentes plateformes, c'est toujours intéressant de savoir si ce travail a été apprécié !

Rappel au passage, les images responsives sont vraiment supportées partout maintenant, n'hésitez pas :

Browser support for feature “srcset“
Can I Use srcset?
Browser support for feature “picture“
Can I Use picture?

75 Webmentions

38 likes

19 reposts

  1. Eric Martin avatar
  2. goetsu avatar
  3. Christophe Le Bot avatar
  4. Christophe P. avatar
  5. David Beck avatar
  6. Vincent Valentin avatar
  7. Florian Bouvot avatar
  8. Jacques Pyrat avatar
  9. Damien Jubeau avatar
  10. Valérie Galassi avatar
  11. Fabrice Gangler 🔗 avatar
  12. SCHWEICH avatar
  13. Mathieu B avatar
  14. sebbane alexandre avatar
  15. Jonathan Levaillant avatar
  16. Xavier Zalawa avatar
  17. Arnaud Ligny 💡 avatar
  18. Martin Supiot avatar
  19. Jean-Pierre Vincent avatar

16 replies

  1. Vincent Valentin avatar Vincent Valentin
    Toujours clairement présenté ! Je fini juste la partie sur les stats là.

    Limite de la technique que tu n’évoques pas : il faut aussi accepter une première étape en aveugle.
  2. Nicolas Hoizey avatar Nicolas Hoizey
    Merci ! 😘



    Pourquoi une première étape en aveugle ?
  3. Vincent Valentin avatar Vincent Valentin
    Avant d’avoir des stats adaptées au nouveau design, il faut implémenter une première version de ton srcset. C’est forcément un peu empirique à ce moment non ?
  4. Nicolas Hoizey avatar Nicolas Hoizey
    Les stats viewport + densité des utilisateurs ne vont pas changer avec le nouveau design.



    La courbe de largeur d’image selon le viewport peut être obtenue en début d’intégration, bien avant mise en prod.
  5. Vincent Valentin avatar Vincent Valentin
    Mais tu parles aussi d’un site ayant déjà des stats là. Ce n’est pas toujours le cas.



    Et on espère que les stats vont bouger avec le nouveau design justement.



    Mais ok tu combines les deux approches présentées si je te suis bien.
  6. Vincent Valentin avatar Vincent Valentin
    Autre question : personne n’a jamais tenté d’utiliser la vignette pouvant être embarquée dans le format jpeg pour un usage web ?
  7. Nicolas Hoizey avatar Nicolas Hoizey
    Pas pertinent parce qu’on ne peut pas se limiter à la vignette en l’état actuel.



    @yoavweiss avait fait une proposition intéressante en 2012, mais il y avait trop de limites, notamment l’implémentation partout aurait pris trop de temps : blog.yoav.ws/responsive_ima…
  8. Vincent Valentin avatar Vincent Valentin
    Fini ! Plein de bonnes ressources aussi à la fin. Cool résumé, merci.
  9. Nicolas Hoizey avatar Nicolas Hoizey
    De rien, un grand plaisir à partager !



    On pourra en discuter en interne pour voir comment bien mettre en œuvre partout… 😉
  10. Valérie Galassi avatar Valérie Galassi
    Bienvenu au club pour les euh ^^
  11. Nicolas Hoizey avatar Nicolas Hoizey
    😁
  12. Bob Volte, agent du chaos, chaotic good alignement avatar Bob Volte, agent du chaos, chaotic good alignement
    Par contre le responsive image breakpoint generator de Cloudinary ne permet pas de passer d'un mode paysage à un mode portrait ? Ou alors j'ai pas trouvé la fonctionnalité ?
  13. Nicolas Hoizey avatar Nicolas Hoizey
    Si, dans le bloc Art Direction
  14. Frank Taillandier avatar Frank Taillandier
    TL,DW: les images responsives c'est compliqué, checkez vos stats et utilisez un SaaS comme Cloudinary pour automatiser les optimisations.
  15. Shipow avatar Shipow
    typo-tolerance:
  16. Nicolas Hoizey avatar Nicolas Hoizey
    Oh, you're right! I thought about it, but didn't find where there was a similar enough word! 👍

    I chose to highlight only perfect matches, I might have to reconsider… 😅

2 mentions

  1. Nicolas Hoffmann avatar Nicolas Hoffmann
    Excellente présentation, et très complète. Merci ! ;)
  2. Catherine Denos avatar Catherine Denos
    Tout savoir sur l'optimisation des images en responsive (avec vidéo de la présentation et slides) par @nhoizey #performance #responsive