L'essentiel du HTML5

Comparer img et picture

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Désormais, un nouvel élément HTML est introduit pour représenter les images. Utilisez la balise <picture> pour gérer des contextes de distribution plus complexes.
04:52

Transcription

Cela faisait longtemps que dans les groupes de travail, cela était discuté. En fait tous les médias, qu'il s'agisse de la vidéo, de l'audio, on leur propre balise Mais la balise image était un petit peu limitée à IMG, et donc on a pu gérer les attributs, c'est très bien, on l'a vu juste avant pour le côté responsive, mais, ça manquait un petit peu de souplesse dans certaines complexités. Donc, l'élément picture a fini par arriver avec le HTML5. Et donc, cet élément picture est purement dédié à la gestion des médias image, de manière complexe. Alors on va l'utiliser un peu de la même manière que ce qu'on a utilisé IMG, avec SRCSET jusqu'à présent, avec le sizes aussi. Mais, à ceci près, on va utiliser dans la balise picture, une balise source. Cette balise source va pouvoir être plus complexe et multiple, que la balise image qu'on utilisait tout à l'heure. Pour faire simple, on va dire que cette source, on va utiliser le size d'affichage comme on l'a fait tout à l'heure. Je le dégage d'un trait de jeu pour se débarasser, ne pas se compliquer avec l'attribut média que l'on verra après. Si on veut dire, dans la mesure où le maximum de largeur est de 500 pixels, on affiche à 100%, sinon, tu afficheras à 50%. Donc je ne reviens pas sur l'unité du portwits, OK ? On va dire que maintenant, on va avoir un attribut média. Et cet attribut média va dire, attention, jusqu'à une largeur de 700 pixels, A ce moment là, on entre dans cette ronde là. Ici je vais utiliser max-width, mais on aurait pu utiliser tout autre requête de média que l'on souhaiterait utiliser. Donc faites bien la distinction, entre l'application, si vous voulez, de cette balise source, que dans le cadre où cette requête sera vérifiée. Ça, c'est le mode d'affichage en fonction de cette requête, ce qui est différent. Et là, je vais avoir mon SRCSET, qui devrait être basé, théoriquement, de dire, jusqu'à 700 pixels de large au niveau du média, je voudrais cette image qui correspond à une résolution normale d'un écran normal. Par contre, un écran retina utilisera cette image, et je pointerais vers une autre image. Le problème, c'est que ici sur le navigateur, ça va être compliqué de le simuler donc je vais mettre en commentaire cette partie là. Et je vais mettre un faux SRCSET qui lui, se basera sur le width. Donc, en gros, jusqu'à 400 pixels de large, tu vas utiliser cette résolution là, cette image là, et à partir de 400 pixels, tu changeras d'image. Maintenant, on va pouvoir utiliser un deuxième élément source, Et là, on pourrait que, à partir de 700px, min-width 700 pixels à ce moment là on n'affiche qu'à moitié, et on part sur cette autre image, qui serait une image, par exemple, en SVG ou en autre format. Donc si je veux le manifester par une autre image de représentation. Par contre, attention à la rétro compatibilité avec les navigateurs plus anciens, qui ne comprendraient pas, eux, la balise picture. On va pouvoir rajouter une image traditionnelle qui serait utilisée par défaut, Alors faites bien attention, par défaut dans la mesure où le navigateur ne comprend pas la balise picture, ou si la balise source, ici avec l'attribut média, rentre dans un trappe. C'est-à-dire que si je ne rajoute pas cette condition là, ici, puisque c'est max-width 70px, dès que je vais passer au-délà de 700 pixels, forcément, cette image sera prise en compte. Alors ici, c'est du ?, c'est-à-dire qu'on va pouvoir rajouter, également, des balises paragraphe, des balises section, etc. Tout autre type d'élements qui seraient prise en compte, dans la mesure où ces deux éléments ne seraient pas pris en compte, ou que la balise picture ne serait pas prise ne compte. Voilà, donc ceci fait, si j'enregistre maintenant cette image là, et que je pars la tester dans un navigateur, j'actualise ma page, on voit qu'on a notre première image. Notre première image, jusqu'à 500 pixels, elle va être à 100%. A partir de 500 pixels, elle va tomber à 50%, mais attention, on changera également d'image. Alors ici j'avance. 100, 200, 300. Je continu à monter, regardez, à 500 je change d'image. Et je vais changer de largeur, regardez. Bingo, je change de largeur. Je suis à 50vw. Je continu de monter, et dès que je vais passer au-delà de 700, je vais passer à une image qui sera à la moitié et qui prendra la troisième image ici. Donc je monte à 700, et je rebascule sur une autre image à 50. Voilà, là je vais pouvoir rester, jusqu'à plein pot, puisque je n'ai pas de limite d'image. Si j'avais mis une image, une limite maximum, ici, par exemple qui serait 1000 pixels, dès que je dépasserais 1000 pixels, bingo, je basculerais sur cette image. Voilà donc, ma balise picture, qui n'est pas bien distribuée, on va dire, sur certains types de navigateurs, et qu'il faut garder du coin de l'oeil , pour pouvoir utiliser avec beaucoup plus de souplesse, beaucoup plus de complexité des requêtes de médias, et distribuer les images en fonction du divise qui va les lire.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !