L'essentiel du HTML5

Utiliser et mettre en place des images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Quel que soit le format d'image employé, le code HTML ne change pas. Tout se passe toujours au niveau de l'attribut src de la balise <img>. En ce qui concerne <canvas>, il s'agit d'une API HTML5 qui s'appuie donc sur l'usage de JavaScript.
06:07

Transcription

Au niveau du HTML, l'utilisation d'images est très simple, il suffit d'avoir recours à la balise IMG. Pour cela, on va saisir une balise IMG, et vous voyez, deux attributs sont vraiment recommandés d'être employés. Le premier, c'est SRC. Donc SRC va lui correspondre à la souce de l'image. Alors il suffit d'aller pointer vers l'image que l'on souhaite importer, peu importe son format, peu importe sa nature. Le chemin va se représenter exactement de la même manière que les autres chemins, donc en absolu, en relatif, comme on le souhaite. Mais surtout, ce qui est très important, c'est le texte alternatif, c'est-à-dire la source est alternative, donc on va marquer tableau. Tout simplement, ici, aux représentations, où il faut être assez explicite sur l'attribut Alt, qui va permettre aux lecteurs d'écran de pouvoir donner une interprétation, de ce qui est représenté visuel. Donc les personnes qui désactivent les images sur leur navigateur, ou les personnes à déficience visuelle, pourront se référer à cette balise là pour pouvoir comprendre ce qui est représenté dans l'image. Donc il est très important de remplir cet attribut là. Alors, on ne va pas le faire maintenant pour tous, ce qu'on va regarder c'est, simplement, les diverses comparaisons de ces formats. Donc ici, je vais utiliser un format avec transparence, vous voyez ici c'est un tableau, donc ici du PNG, du GIF, ou encore une fois un autre PNG. Et si je regarde en mode en direct, c'est-à-dire que je visualise ce qu'il se passe, vous voyez qu'ici le PNG et la transparence d'alpha, va bien donner cette sur impression d'aliasing, entre la couleur de devant et la couleur d'arrière plan. Alors que le GIF, qui est une transparence d'index, il y a des petites couleurs qui sont entre le mauve et le noir, mais qui sont représentés, donc ça peut être un mauve pale, un gris très pale, mais ils donennt une impression de blanc sur la couleur d'arrière plan. Alors que dès qu'on travaille avec du PNG 24, par exemple, ou du JPEG, peu importe, on aura cet aplat dur, puisqu'il n'y a pas de transparences qui sont gérées. Si je compare le JPEG et le PNG, on va avoir exactement le même type de rendu dans les deux, sauf que le JPEG, vous voyez cette impression un peu de flou, ici. Alors je vous invite à faire des travaux par vous-mêmes, et d'approcher après, de bien regarder ce détail. Et vous allez voir que le PNG il y a quand même plus de piquets, plus de contrats, on le voit notamment au niveau du noir, des ocres ici, il y a plus de soutenue, que dans le JPEG, il y aura une compression. Ensuite, on a des formats qui peuvent être comparés, alors ici c'est du 8 bits, le GIF, le PNG et le SVG. Alors si je regarde en mode indirect, vous voyez, on a toujours cette petite problématique de moirage ici, au niveau de l'alpha, qu'on n'a pas au niveau du PNG. Par contre, ici on a du SVG. Le SVG donne une impression de similitude avec le PNG. Par contre, si je zoom à l'intérieur de ce document, donc je vais aller le visualiser dans un navigateur ici, et vous voyez que si je commence à zoomer à l'intérieur du document, donc on a bien cet effet de moirage, ou de tour au niveau du GIF. Voilà le PNG, on rend compte qu'on a une pixelisation, on a des arrachements de pixels, des fois, qui ne sont pas très bien détourés ici, Par contre, au niveau du vectoriel on reste pile poil tranché, parce qu'on est dans du vectoriel, on n'est plus du tout dans du format Bitmap. Voilà, donc on va revenir sur un dernier test. Le dernier test, ça serait de travailler avec ce qu'on appelle le Base64 et le canvas. Alors ici, au niveau du Base64, vous regardez. Ici, on a cette image, on la voit, donc l'outil ici c'est Dreamweaver, on retranscris l'aspect visuel de cette image, il me dit voilà ce que tu as. Mais si je regarde dans la partie du code, on se retrouve avec cet encodage hexadécimal, qui nous a été renvoyé par le convertisseur en ligne. Et il est vrai que si je le visualise en mode indirect, on voit une image, on ne voit pas ce code là. Le gros intérêt, c'est qu'il n'y a pas de requête client/serveur, puisque le code est déjà présent dans la source au niveau du HTLM. Le dernier format c'est du canvas. Le canvas n'est pas un format en soit, comme je le disait, c'est une API HTML 5. Donc ici on a une balise canvas, qui peut avoir un style CSS ici, qui va le transformer en mode indirect, vous voyez avec ce rectangle gris. Mais dès que je vais le lancer dans un navigateur, en réalité, c'est ce javascript qui va s'exécuter. Et ce javascript va dire, je définis une zone qui est cette élément canvas ici, je vais lui donner une largeur, une hauteur. Je vais aller chercher un porte-image, une nouvelle image, qui se trouve être cette image. Donc, il y a vraiment une requête client/serveur avec l'image pour pouvoir l'importer. Je vais l'afficher ici, puisqu'une fois que une fois que l'image sera chargée, je vais lui demander d'afficher l'image. Eh bien il va venir me définir cette image ici, il va venir me la dessiner, avec son API directement dans le cadre. Alors si je regarde, pareil qu'un navigateur, on voit bien qu'il a dessiné une image de 600 par 600, Donc, le cadre est bien fait de 600 par 600, et il a importé l'image à l'intérieur. Alors si c'est simplement pour faire ça, il n'y a pas trop d'intérêt d'utiliser canvas, par contre, si maintenant je décommande cette fonctionnalité, si je dis recadre image ici, et que je place un commentaire plutôt sur un porte-image ici, voilà, je vais changer de fonction. Cette fois-ci, je vais faire exactement la même chose que tout à l'heure, c'est-à-dire que je vais importer une image, mais je vais jouer avec du texte. Et ce texte, je vais pouvoir l'incruster dans l'image. Donc si je reviens dans le navigateur, ici, et que je réactualise ma page, vous avez écris directement et utilisé l'image un peu comme étant l'arrière plan. Alors vous voyez comme l'image ne va pas jusqu'au bout forcément ici ça fait du noir. Mais là vous avez compris qu'on va pouvoir en direct, en temps réel, transformer l'image, l'utiliser avec l'API HTML5. Voilà, donc on a fait le tour de toutes les optimisations d'images, la seule chose qu'on n'a pas vue, c'est au niveau du travail sur le code. Ici vous voyez, j'ai prévu l'image optimisée, c'est-à-dire que si vous décommenter cette partie là du HTML, et que vous visualisez en direct, ici vous avez un code PNG optimisé, et qui pèse vraiment pas lourd, puisqu'il est passé par tiny PNG. Le service en ligne qui permet de préserver la qualité des images, tout en réduisant leur poids, et surtout, tout en préservant leur transparence. Voilà, donc on a fait le tour un peu de l'intégration de tous les types d'images, le seul qui nous manquerait vraiment, c'est le SVG interactif, mais je vous propose d'avoir une étape dédiée pour cela, un peu plus tard dans le déroulé de la formation.

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 !