Tuto (gratuit) - L'attribut srcset avec la balise img

Bonjour à tous...

Petit cadeau de Noël, un nouveau tuto vidéo sur ma chaine Youtube.

Utiliser correctement l'attribut srcset

J'ai toujours eu un peu de mal à bien comprendre le fonctionnement de l'attribut srcset au sein de la balise img et finalement, après m'y être un peu plongé dedans je me rends compte que cet attribut est fort utile dans nos développements web en Responsive Design.

Je vous propose d'explorer son utilisation dans cette vidéo de 53mn.
Je pense faire une suite en expliquant l'emploi de la balise <picture> dans le contexte "Art Direction"
Modifié par lionel_css3 (24 Dec 2018 - 15:13)

bonjour, moi je l'utilise comme ceci, est-ce valable ?

<picture>
<source media="(min-width: 1800px)" srcset="imagebig.jpg">
<source media="(max-width: 900px)" srcset="imagemin.jpg">
<img src="images/imagemid.jpg" class="image">
</picture>

en tout cas ca fonctionne
Modifié par drphilgood (26 Dec 2018 - 19:30)

drphilgood a écrit :
bonjour, moi je l'utilise comme ceci, est-ce valable ?

&lt;picture&gt;
&lt;source media="(min-width: 1800px)" srcset="imagebig.jpg"&gt;
&lt;source media="(max-width: 900px)" srcset="imagemin.jpg"&gt;
&lt;img src="images/imagemid.jpg" class="image"&gt;
&lt;/picture&gt;

en tout cas ca fonctionne

Oui bien sur ça marche aussi, c'est une façon différente de procéder. On utilise <picture> avec <source> principalement dans le cas où l'on veut proposer une version différente de l'image ( "Art direction" ) en fonction du viewport. par exemple une photo panoramique pour le PC et un image plutôt carrée et recadrée pour le smartphone.

D'ailleurs je prépare une suite en expliquant un cas d'utilisation de <picture>
Modifié par lionel_css3 (28 Dec 2018 - 18:11)

@drphilgood justement, j'ai publié la suite avec <picture> et <source>

Art direction et responsive design avec picture et source