Quelques solutions facilitant la bonne mise en œuvre des images responsives

Comment utiliser les images responsives, quelles dimensions d'images, quels formats, quelles optimisations, etc.

See slides and additional content on Notist:
Quelques solutions facilitant la bonne mise en œuvre des images responsives

21 reactions

3 likes

18 replies

Cédric G. / effi10
Très bon lien, merci !
- 29 May 2020, 08:51
- Source
Nicolas Hoizey
De rien !
- 29 May 2020, 09:06
- Source
Thomas Fourdin
Merci pour la précision, c'est bien noté !
Mais j'en profite pour repréciser ma question : pour un site de contenus très axés images, on a justement mis en place srcset/sizes mais sur un mobile en portrait moderne, on a un pixel-ratio de 3 et donc des images de 1000px de large.
- 2 February 2022, 10:36
- Source
Thomas Fourdin
Pour des pages riches en contenus visuels, ça fait rapidement des poids de page qui gonflent. Est-ce qu'il faut adapter le srcet/sizes pour fournir des images moins qualitatives pour les petits écrans ?
- 2 February 2022, 10:37
- Source
Nicolas Hoizey
Ah, oui, il faut effectivement faire en sorte de servir du x2.5 au maximum, on ne voit pas la différence au delà à l'œil nu, et les smartphones vont maintenant jusqu'à x4.

Une discussion sur le sujet : github.com/whatwg/html/is…
- 2 February 2022, 10:45
- Source
Nicolas Hoizey
Conf donnée chez Mozilla avec Julien à la régie vidéo, de mémoire ! 😁
- 2 February 2022, 10:46
- Source
Julien Wajsberg
Tu veux dire une plus grosse consommation mémoire que nécessaire sur certains devices, mais les retina vont bien devoir l'avoir de toute manière non ?
- 2 February 2022, 10:46
- Source
Julien Wajsberg
(et je mets un bémol sur l'analyse de Tim Kadlec, car ce sont des calculs théoriques, je ne suis pas sûr que les navigateurs ont l'image décodée en entier en mémoire s'ils doivent l'afficher en plus petit -- mais "en vrai" je sais pas)
- 2 February 2022, 10:47
- Source
Thomas Fourdin
C'est exactement ça, merci beaucoup !
- 2 February 2022, 10:48
- Source
Nicolas Hoizey
Le problème est qu'aujourd'hui "Retina" ne veut plus dire grand chose. C'était du x2 au début, mais maintenant on a des mobiles en x4.

Et les smartphone qui souffriraient le plus avec des petits CPU/RAM sont ceux qui sont en x1.
- 2 February 2022, 11:22
- Source
Nicolas Hoizey
Ce serait effectivement intéressant de connaître les données réelles, en plus des théoriques .
- 2 February 2022, 14:10
- Source
Jean-Pierre Vincent
il n'y a plus de X1 d'après ce que je vois des stats de mes clients
- 2 February 2022, 21:12
- Source
Jean-Pierre Vincent
on est entre 1,75 et 4 mais franchement je m'arrette à 2x maintenant, on ne voit pas la différence
- 2 February 2022, 21:13
- Source
Nicolas Hoizey
Il n’y en a plus sur mobile en France.

Mais il y en a dans certains pays où il y a beaucoup de smartphones bas de gamme voire des feature phones.

Et il en reste beaucoup sur desktop.
- 2 February 2022, 23:20
- Source
Nicolas Hoizey
Je tente de limiter à 2,5 parce que statistiquement certains voient la différence jusqu’à 2,3 en gros, et les clients ne veulent rien risquer. C’est déjà une victoire par rapport à 4.

Bien sûr, quand la solution technique le permet…
- 2 February 2022, 23:22
- Source
Nicolas Hoizey
Les données de Tim sur son site international avec pas mal de trafic :
- 2 February 2022, 23:27
- Source
Jean-Pierre Vincent
oui, j'ai des données comparables en regardant les modèles
- 3 February 2022, 10:01
- Source
Nicolas Hoizey
👍
- 3 February 2022, 10:28
- Source