Slide 1

Slide 1 text

La petite clinique des images responsives Passer de ! à " en 1h30 6 octobre 2018

Slide 2

Slide 2 text

Nicolas Hoizey Co-fondateur, directeur de l’innovation @nhoizey @[email protected]

Slide 3

Slide 3 text

Bref rappel

Slide 4

Slide 4 text

Un standard => plusieurs usages • Le standard « Picture » porte plutôt mal son nom • Il apporte bien une nouvelle balise (et déjà connue avec /) • Mais aussi des attributs srcset et sizes utilisables directement sur • Ce qui nous permet de gérer différents cas… 4

Slide 5

Slide 5 text

srcset-x 5 Beau Soleil Beau Soleil Beau Soleil Bannière Bannière Bannière Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Largeur d’image fixe et densité d’écran variable …

Slide 6

Slide 6 text

srcset-w 6 Beau Soleil Beau Soleil Beau Soleil Bannière Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Largeur d’image variable, pleine largeur, et densité d’écran variable …

Slide 7

Slide 7 text

srcset-w et sizes 7 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Largeur d’image variable, différente selon breakpoints, et densité d’écran variable …

Slide 8

Slide 8 text

picture, source, srcset-w et sizes 8 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Praesent sit amet sollicitudin mauris, non bibendum ante. Integer imperdiet in magna ac elementum. Sed arcu nibh, mattis ac tortor ultricies, consequat varius odio. Morbi at nunc at dolor auctor imperdiet in sit amet tortor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Lorem ipsum dolor Largeur d’image variable, contenu ou ratio different selon breakpoints, et densité d’écran variable …

Slide 9

Slide 9 text

Vos questions

Slide 10

Slide 10 text

Un dépôt Github https://github.com/nhoizey/pw2018-responsive-images

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

!

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

14 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. … ordre indifferent ordre primordial

Slide 15

Slide 15 text

15 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Praesent sit amet sollicitudin mauris, non bibendum ante. Integer imperdiet in magna ac elementum. Sed arcu nibh, mattis ac tortor ultricies, consequat varius odio. Morbi at nunc at dolor auctor imperdiet in sit amet tortor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Lorem ipsum dolor … ordre primordial

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

…

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

!

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

21 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } @media (min-width: 1280px) { .card img { width: 400px; } }

Slide 22

Slide 22 text

22 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } …

Slide 23

Slide 23 text

23 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } …

Slide 24

Slide 24 text

24 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } …

Slide 25

Slide 25 text

25 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 640px) { .card img { width: 60vw; } } …

Slide 26

Slide 26 text

Des em ? https://talks.nicolas-hoizey.com/HDbr1q/un-petit-pas-pour-l-em-un-grand-pas-pour-le-web

Slide 27

Slide 27 text

27 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 40em) { .card img { width: 60vw; } } …

Slide 28

Slide 28 text

28 Beau Soleil Beau Soleil Bannière Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Beau Soleil Bannière Lorem ipsum dolor sit amet, consectetur adipiscing elit. @media (min-width: 40em) { .card img { width: 60vw; } } …

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Analyse détaillée d’un cas concret

Slide 31

Slide 31 text

Le besoin exprimé Comment écrire que pour un écran + grand je veux une image plus petite et vice versa ? ● format "large" (>= 1024px), 2 colonnes (en 50/50) dont l'une comprend une image qui occupe 100% de sa colonne. Cette colonne est flexible et sa largeur max est de 740px (donc image max width = 740px) ● format "réduit" (<1024px), une seule colonne, l'image occupe 100% de la largeur disponible. donc image max width = 1023px.

Slide 32

Slide 32 text

Interprétations de l’énoncé On a supposé que les images sont fluides, les dimensions indiquées sur les wireframe correspondants à certains cas précis.

Slide 33

Slide 33 text

Une solution proposée

Slide 34

Slide 34 text

Analyse… Les media queries des 4 couvrent tous les viewports. Ce n’est pas une erreur, mais c’est inutile, le dernier srcset peut aller dans le . (Évite aussi une potentielle surprise si le viewport se retrouve — très peu probable certes — entre 63.9375rem et 64rem.)

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Juste avant 30rem (~480px), l’image chargée fait 440px, alors qu’il faudrait 480px pour les écrans de densité 1. Sur les petits viewports, les densités sont le plus souvent >= 2, donc il faudrait fournir au moins une image x2. On traitera ces sujets plus tard.

Slide 37

Slide 37 text

Les deux premières sources chargent une image de même ratio 2/1 et de même contenu visuel. Ce sont des max-width, la seconde suffit. On peut lui donner les deux tailles d’image, par contre, pour que les petits viewports ne chargent pas la grande.

Slide 38

Slide 38 text

Attention, on perd une caractéristique du code précédent, on y reviendra.

Slide 39

Slide 39 text

Soucis : il manque les descripteurs sur les images dans les srcset : x ou w ? Une seule image dans le srcset -> interprété comme un 1x La première source (de 0rem à ~48rem) a pour objectif de montrer une image de largeur variable, c’est un descripteur w qu’il faut utiliser.

Slide 40

Slide 40 text

Slide 41

Slide 41 text

En fusionnant les deux premières , on a perdu la limitation de largeur d’image à 440px pour les viewports < 30rem. En l’absence d’attribut sizes, sa valeur par défaut est 100vw. (L’attribut sizes est obligatoire selon la spec HTML du WHATWG, mais toujours pas dans la version 5.2 du W3C…) Avec un viewport de 30rem (~480px) : ● L’image 440x220 sera chargée sur un écran de densité < ~1.5, comme initialement ● L’image 750x375 sera chargée sur un écran de densité > ~1.5 (750/480), au lieu de 440x220 Dans le principe général des images responsives, on n’a en fait rien perdu, mais plutôt gagné en qualité visuelle sur les petits viewports avec écrans haute densité. Mais ne pas servir une image plus grande pour les hautes densités peut être un choix légitime. À arbitrer.

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Dans le besoin exprimé, l’image est de même ratio pour tous les viewports < 1024px (~64rem). On peut fusionner les deux premières et changer la hauteur de la troisième image.

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Sur petits écrans, la valeur par défaut sizes="100vw" convient. Mais ce n’est pas le cas sur plus grands écrans (>= 64rem =~ 1024px) où l’image doit occuper la demi largeur uniquement, avec une limite à 740px. Le fallback dans src pourrait d’ailleurs être limité aussi à 740px. Il n’y a qu’une image dans srcset, donc pas de risque de télécharger la « mauvaise » image trop grande dans l’absolu, mais le navigateur « pense » avoir besoin d’une image pleine largeur. On devrait pouvoir : ● Fournir une image moins large sur écrans de densité 1 et viewport < 1480px ● Fournir une image plus large sur écrans de densité supérieure

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Code optimisé

Slide 48

Slide 48 text

Amélioration potentielle supplémentaire Inverser les sources pour avoir media="(min-width: 64rem)" et éviter les risques de « trou » : alt="" />

Slide 49

Slide 49 text

Mais en fait…

Slide 50

Slide 50 text

Le « vrai » besoin Le besoin réellement exprimé par le client est que l’image ne soit pas fluide, mais fasse toujours 900px de hauteur, quelle que soit la largeur de viewport, avec un crop latéral. Constats : • Ce n’est pas le comportement fluide « naturel » des images dans la plupart des sites ○ Sur un écran 320x480, l’image fera plus de deux écrans de hauteur… • On ne pourra pas éviter de charger des images plus grandes que nécessaires sur une grande partie des viewports

Slide 51

Slide 51 text

Solution minimaliste ● Une ● Des descripteurs x pour gérer les variations de densité, puisqu’on n’a pas de variation de largeur ● object-fit: cover; pour opérer le crop en CSS

Slide 52

Slide 52 text

Solution minimaliste

Slide 53

Slide 53 text

Solution optimisée • Plusieurs pour limiter le surplus de pixels croppés • On fixe ici des paliers arbitraires à 40rem, 75rem et 85rem • Il faudrait analyser les viewports les plus courants des visiteurs pour fixer des paliers optimaux

Slide 54

Slide 54 text

Solution optimisée L’image se fige à 740px (92.5rem), taille nécessaire aussi sur la tranche inférieure, fixée à 85rem. Donc pas besoin de avec media query à 92.5rem. La largeur d’image nécessaire est fixée par rapport au palier supérieur : 75rem * 16px / 2 = 600px Viewport >= 64rem Viewport < 64rem

Slide 55

Slide 55 text

D’autres questions ?

Slide 56

Slide 56 text

À la semaine prochaine ? Mardi 9 octobre 2018 à Bordeaux L’événement français des mordus de web performance ! https://www.welovespeed.com/ …”
srcset= Comment choisir les dimensions optimale pour le srcset ?

Slide 57

Slide 57 text

À vous de jouer ! @nhoizey @[email protected] illustrations :