Slide 18
Slide 18 text
img {
max-width: 100%;
height: auto;
}
Slide 22
Slide 22 text
Chargement des images
Au parsing du DOM, le navigateur connaît :
le DPR de l'appareil
les dimensions du viewport
la qualité du réseau
mais, le CSS n'étant pas encore chargé, il ne
connaît pas :
les dimensions des zones de rendu des
balises ![]()
Slide 31
Slide 31 text
L'attribut sizes indique au navigateur quelle largeur (en vw ou
en pixels CSS) fera la balise ![]()
selon la largeur du viewport
(en pixels physiques)
On utilise ici la syntaxe des media-queries CSS.
💡
Slide 32
Slide 32 text
L'attribut srcset indique au navigateur quelles sources d'image
sont disponibles, ainsi que leurs largeurs, en pixels physiques
(descripteur w).
Ainsi le navigateur peut choisir l'image la plus adaptée.
Slide 33
Slide 33 text
Pas besoin de spécifier le DPR ici, le navigateur le connait, et il
saura choisir la bonne image :
Viewport == 1440px ![]()
= 50vw
DPR = 1 elephant_1166.jpg
DPR = 2 elephant_1585.jpg
Slide 34
Slide 34 text
Pas besoin de spécifier le DPR ici, le navigateur le connait, et il
saura choisir la bonne image :
Viewport == 1440px ![]()
= 50vw
DPR = 1 elephant_1166.jpg
DPR = 2 elephant_1585.jpg
(50% de 1440) = 720
Slide 35
Slide 35 text
Pas besoin de spécifier le DPR ici, le navigateur le connait, et il
saura choisir la bonne image :
Viewport == 1440px ![]()
= 50vw
DPR = 1 elephant_1166.jpg
DPR = 2 elephant_1585.jpg
(50% de 1440) = 720
(50% de (1440 x 2)) = 1440
Slide 36
Slide 36 text
L'attribut srcset peut aussi être utilisé pour gérer les DPR. Ici, un
avatar d'une largeur fixe en pixels CSS, sur tous les écrans.
On indique au navigateur les différentes sources disponibles
selon le DPR actuel.
Source : https://talks.nicolas-hoizey.com/b23Bwm/la-petite-clinique-des-images-responsives
Source : https://talks.nicolas-hoizey.com/b23Bwm/la-petite-clinique-des-images-responsives
Slide 41
Slide 41 text
L'attribut srcset sert également à servir différents formats
d'image tout en gardant une compatibilité pour les
navigateurs ne supportant pas les formats comme webp.
Slide 42
Slide 42 text
Slide 43
Slide 43 text
Slide 44
Slide 44 text
Slide 45
Slide 45 text
Slide 47
Slide 47 text
Slide 55
Slide 55 text
Glide by The PHP League
Sécurité par signature des URLs avec une clé privée
Prévient les attaques de type "mass image-resize"
getUrl('cat.jpg', ['w' => 500]);
echo '
';
// 
Slide 60
Slide 60 text
{% macro picture(image) %}
%20}})
{% endmacro %}
{% import _self as macros %}
{{ macros.picture('elephant.jpg') }}