L'essentiel du HTML5

Découvrir img et srcset

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En intégrant une image dans une page, vous devez tenir compte du périphérique sur lequel elle sera distribuée. L'attribut srcset permet de répartir les qualités d'images en fonction des possibilités du périphérique.
06:35

Transcription

Dans l'étape précedante, on s'est apperçu que si on zoomait dans l'image, on pixelisait l'image, et forcément c'était pas de bonne qualité. Alors, qu'en est-il lorsqu'on a à faire à des écrans de type retina, par exemple, qui ont une résolution supérieure à certains types d'écrans. Et puis, qu'est-ce qu'on va faire lorsqu'on doit afficher une image, qui serait d'excellente qualité sur du retina, mais sur un appareil mobile qui a un tout petit écran. Eh bien, il va falloir adapter la fourniture de l'image, fournir une image adoc en fonction du périphérique. Et pour ça, la technologie d'une part CSS et HTML, nous permet de résoudre et de solutionner un grand nombre de problématique de ce côté là. Alors, par le passé et pour des navigateur plus anciens, on va déjà commencer à travailler avce la balise meta, sur la propriété name = viewport, on va s'assurer que le contenu, déjà que le width = device-width Ça veut dire quoi, ça veut dire qu'un appareil comme un iPhone, par exemple, il va dire, il n'y a pas soucis, je peux t'afficher quelque chose de bien plus grand que la surface mon écran, je vais me débrouiller avec, je vais zoomer, dézoomer, etc. Donc là ce qu'on va faire, ça veut dire attention, le contenu, sa largeur sera égale à la largeur de ton écran, on va pas aller au-delà, on va pas voir i tu pourras afficher autre chose. Et surtout, va s'afficher une échelle de zoom égale à un, c'est-à-dire qu'on va rezoomer par défaut à 100%, pour être sûr que le périphérique pourra dialoguer correctement, avec l'image qu'on va lui fournir. Pour les navigateurs plus contemporains, aujourd'hui, on a la propriété add viewport dans les feuilles de style, qui va pouvoir remplir le même job, et qui va pouvoir s'assurer d'un remplacement d'un alternative à la balise meta. Alors maitenant, lorsqu'on va intégrer une image à l'intérieur de notre page HTML, comme on l'a vu dans le passé, alors là elles sont toutes dans le dossier 02, ici, c'est pour ça qu'il y a un chemin un peu composé. Cette image va s'afficher mais elle s'affichera quelque soit le périphérique. Et pour cela, on a la possibilité d'avoir un attribut qui s'appelle SRCSET, Et là, c'est un jeu de SRC qui n'est aps compris par les vieux navigateurs, donc les vieux navigateurs eux, afficheront cette image là, quoiqu'il advienne. Par contre, tous les navigateurs ou les appareils mobiles, qui comprennent l'attribut SRCSET, vont dire, eh bien moi, j'afficherais cette image là. Mais il va afficher cette image là, OK, donc ça veut dire que tous les périphériques vont afficher cette image là. Eh bien, pas tout à fait, parce qu'on a accès à une propiété seconde, ici, une autre description. C'est-à-dire que la première partie de la description, c'est le chemin d'accès à l'image. Et la seconde partie, ça va être la largeur du périphérique, donc ici, 400W. Pour la largeur Wits, d'accord, 400 Wits. On pourrait avoir une alternative, vous le verrez ultérieurement, mais de mettre la résolution de l'écran, par exemple 1x, 2x, 3x, pour dire voilà, en fonction de la capacité que tu as d'afficher une autre résolution, et tu afficheras cette image. Attention, l'image doit être deux fois plus grande pour tenir la même largeur. Donc nous on va rester sur la largeur, parce qu'une fois que vous aurez compris le pirncipe du Wits qui fonctionne pareil, pour la résolution. Donc, si je donne qu'une image, que se passe-t-il ? Si j'ai une image qui est supérieure à 400, eh bien je vais placer une virgule, simplement, et je vais remettre un nouveau jeu, maintenant, d'informations. C'est-à-dire le chemin d'accès, et la propriété sur laquelle je vais affecter. Donc, si je fais ces 100 pixels de large, eh bien, tu prends cette image là, et si je fais 600, tu prendras cette image là. Si j'enregistre maintenant mon document, et que je bascule dans le naivgateur, alors ici, je vais avoir le navigateur. Je vais télécharger le ficher adoc, et vous comprendrez pourquoi je ne l'avais pas téléchargé au préalable. Vous voyez ici j'ai une image, je n'ai pas l'image par défaut. Alors regardons quand même la correspondancede ces images, ici. Vous voyez que la 02 par défaut, c'est cette image-là. Le navigateur comprend SRCSET, il m'affiche la première, la 400, qui est celle-ci. Donc théoriquement, j'ai une grille dessous dès que je vais arriver à 500, il affichera la verte. Et dès que j'arrive à 600, il m'affichera la bande, ici. Donc, je reprends mon navigateur. Voilà, je continu à agrandir. Et hop, vous avez vu, je bascule automatiquement dans une autre image, Et là, je bascule dans l'image. Petit soucis, c'est que maintenant, je reste toujours avec cette image. Pourquoi ? Parce qu'on est dans le cache donc autant profiter de la meilleure qualité. puisqu'il n'y a pas de problème de résolution. Donc je vais avoir l'image de meilleure qualité que ce qui se trouve dans le cache. Si j'actualise, vous voyez, il se passe rien donc je suis impérativement obligé de vider mon cache, pour actualiser et repartir à zéro. Donc ce que je vous invite à faire, c'est de venir dans le mode d'inspection, ici, et de vous assurer au niveau du réseau, de désactiver la propriété de cache. Alors là, bien entendu, une fois que l'image a été chargée, c'est terminé. Il me faudra juste réactualiser ma page pour être sûr. Alors déjà, vider le cache, s'assurer une première fois, et voilà, ici de pouvoir réactualiser. Normalement, il devrait le prendre, donc s'il le prend pas, pensez à vider le cache. à chaque fois, pour être sûr de pouvoir bénéficier de cette mécanique de SRCSET. Alors, l'attribut SRCSET n'arrive pas seul, il arrive également avec un autre attribut qui s'appelle sizes. Et là, sizes, je vais pouvoir définir une unité par défaut, que je vais souhaiter au niveau de l'affichage de l'image. Alors là, je vais utiliser le viewport width, et je vais utiliser 100. Alors, il faut savoir que l'unité 1 viewport width vaut 1/100, de la largeur de ce fameux divise qu'on a défini ici. Donc, 100vw vaut 100% de la largeur de l'écran. Attention de pas confondre 100% la valeur CSS, qui dirait 100% du conteneur par an, là c'est 100% de l'écran du divise. Donc, je vais pouvoir avoir cette partie là, mais si on fait ça, c'est ce qui va se donner par défaut, vous avez vu que l'image tenait toute la largeur du navigateur, en partie. Alors on va le faire maintenant, ici. Voilà, je vais m'assurer que le cache est bien vidé. J'actualise ma page. Et vous voyez que, maintenant quand je vais grandir, je suis toujours en largeur maximum de l'écran. Parfait. Et je vais pouvoir venir pareillement ici, utiliser une propriété par une requête. Et dire, avec une largeur minimum de 590 pixels, eh bien tu me mettras 100vw. Par contre, et je vais pouvoir séparer par une virglue, je vais lui dire, autrement, tu me mettras un 50vw. Là si j'enregistre et que je vais dans le navigateur, je vais, bien sûr, penser à vider le cache, j'actualise ma page, vous voyez qu'on a bien cette partie là. Et quand je grandis, je vais avoir toujours. Et c'est dès l'instant où je vais passer à une largeur minimum de 600 pixels, que je vais être à 100%. Le bon sens voudrait qu'on inverse, qu'on dise, tant que je suis dans un petit écran, tu me mets en 50vw. Dès que je passe sur un grand écran, on passe sur un 100vw.

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 !