Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel du HTML5

Aborder le format d'image

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe divers formats d'image. Avant de les employer et de choisir tel ou tel format, comprenez ce qui les différencie et ce qui les caractérise.
06:33

Transcription

En complément du texte, l'un des médias les plus fréquemment utilisés sur le web, ce sont les images. Donc il est, quelque part, nécessaire de bien comprendre les divers types d'images et de formats, que l'on peut avoir en utilisation d'une page web classique. Alors déjà, au niveau des formats, les fomats les plus fréquemment rencontrés dans l'utilisation, et surtout la comptabilité avec les navigateurs, sont le GIF. Le GIF, c'est un format d'images qui possède 256 couleurs, qui est surtout utile pour des aplats et des logos. Donc des choses très basiques avec très peu de couleurs. Il y possbilité d'avoir une trace par un de ces index, on verra tout à l'heure la différence avec la transparence de l'alpha. Et surtout, on peut faire du GIF animé avec. Alors, c'est un très vieux format qui existe depuis les débuts du web, depuis le début des années 90 sur les BBS, on utilisait déjà le GIF. Alors ensuite, on a le JPEG qui est un format d'image compessé, avec un millier de couleurs cette fois-ci, qui est bien adapté aux photos, mais qui, quand même, est un format destructeur, et qui peut parfois bien dénaturer les photos en fonction de leur utilisation. Alors le PNG qui est un format compressé, mais sans perte cette fois-ci. Un peu comme se réduit ZIP, par exemple, c'est-à-dire qu'une fois compressé on a une perte de poids, mais une fois décompressé on retrouve le format original. Il peut être utilisé en 8 bits, comme le GIF. Par contre, il y a une transparence d'alpha qui est beaucoup plus intéressante. Il peut être utilisé en 24 bits ou en 32 bits, c'est-à-dire en 8 bits par couche en RBB, ou RBB plus alpha, donc on peut gérer une véritable transparence, donc c'est assez intéressant. Par contre c'est un format qui est beaucoup plus lourd, et on verra qu'on peut le compresser une fois de plus grâce à certains outils. Le Base64 qui est un format textuel, donc c'est du code exa décimal. Il est adapté aux petites images. Le gros intérêt du Base64, c'est surtout qu'il évite de faire des requêtes clients serveur. À chaque fois qu'on a une image dans le HTMLl, en réalité le brosseur, le navigateur va aller chercher cette image, donc, va retourner sur le serveur récuperer l'image, alors qu'avec la Base64 c'est du texte qui est inclut soit dans les CSS, soit dans le HTML. Alors c'est un peu plus lourd, mais ça évite ces requêtes. Le canvas, c'est pas un format d'image en soit, c'est plutôt une APi HTML5, qui permet de construire à la volée du graphique de l'image bitmap C'est un format qui peut être interactif, c'est un peu le remplaçant de ce que faisait flash à l'époque, avec son APi graphique. Le SVG, qui est un format qui fut par le passé un format popriétaire à Adobe mais qui, aujourd'hui, est un format Open Source, qui est une grammaire XML, ça permet de gérer du vectoriel, c'est interactif, ça accepte les feuilles de style CSS. C'est assez sympa, et ça permet d'agrandir l'image sans qu'il y ait une pixelisation. Et enfin, un dernier petit format. Le wep P, qui est apparu il y a 5/6 ans à peu près, qui est developpé par Google, et qui est surtout maintenu par les géants de l'industrie du web, qui sont Google, Facebook, Ebay, entre autres. Voilà, donc c'est un format d'image qui permet d'avoir une compression sans perte, avec un gain par rapport à des formats comme PNG, JPEG. Par contre, il y a un petit côté glacé sur les images, qui donne un aspect un peu plastique. Mais maintenant c'est vrai qu'on peut préserver la couche alpha. Alors après, c'est à vous de voir entre le tini PNG, par exemple, serait une optimisation du PNG, pour garder la couche alpha, ou éventuellement, même, une optimisation de JPEG, en contre partie de ce format, parce qu'il est peu pris en compte par les navigateurs Et il faut un plug-in sous photoshop, ou alors utiliser des logiciels OpenSource. comme le GIM, par exemple, pour pouvoir l'exporter. Alors, histoire de s'y retrouver un petit peu dans cette jungle de formats, je vais prendre ici une image que j'ai travaillé, qui est une image en Bitmap. Je vais zoomer au maximum, vous voyez ici on a des semies transparences de ce bleu pour faire ce qu'on appelle un alising, c'est-à-dire avoir une meilleure fusion entre cette couleur là, et les couleurs d'arrière plan. Ici c'est transparent, mais ça aurait pu être une couleur d'arrière plan, comme le blanc, vous voyez. Ça se fusionne sur le bleuciel, qui va être un compromi entre le banc et le bleu. Alors bien entendu, si on change la couleur d'arrière plan, Forcément on va avoir cette fusion qui va se faire entre le bleu et cette couleur d'arrière plan, d'accord ? Donc c'est ce qui est important de comprendre. Alors, si je reste sur du transparent, ici, je vois que je vais pouvoir avoir du PNG en 8 bits. J'ai un poids d'image qui est de cinq kilos, donc c'est assez intéressant. Mais je peux gérer ce qui s'appelle une transparence d'alpha, vous voyez que ce bleu est devenu semi opaque. Alors que si je viens ici et que je travaille sur du GIF, Je peux être toujours pareil dans un poids relativement léger, c'est 1.7 kilos. Et là, par contre, je vais avoir ce qu'on appelle une trasparence d'index, et cette fois-ci, ça veut dire que c'est ou transparent, ou ça ne l'est pas. Vous voyez que ce bleu ciel est resté bleu ciel, parce qu'il était sur fond blanc. Mais si je change la couleur de fond, maintenant, et que je reviens sur une couleur très opaque, cet index ici n'aura plus cette transparence, là c'est-à-dire que cette image sera toujours de cette couleur là. Donc ça , on le verra tout à l'heure dans l'exploitation des fichiers directement. Et enfin le format JPEG ici. On voit que c'est une compression qui est un peu plus lourde, qui arrive à vingt kilos, au lieu de cinq kilos. Alors, deux petits points en ce qui concerne les poids d'image, Regardez, ici j'ai une image en JPEG qui va faire trois cent kilos, et exactement la même image que ça, le même format, mais qui fait quatre cent quarante kilos en PNG. Voilà les comparaisons également entre du 24 bits PNG à cent trente trois kilos, du GIF à quinze kilos, du PNG, cette fois-ci 8bits à trente deux kilos, qui est un paraboxe, presque, on va dire. Et ici, un PNG optimisé à treize kilos. Je vous invite par vous-même à venir contrôler les différences de poids, en fonction des divers types d'images. Le dernier format d'image que l'on pourrait voir, c'est le vectoriel. Donc là je suis dans Illustrator, un logiciel qui va gérer le vectoriel. Ici on n'a plus à faire à des Bitmap, mais à des tracés, qui vont pouvoir définir des chemins, des secteurs, et qui seront beaucoup plus légers parce que ce sont des formules mathématiques, qui vont contenir cette information. Alors, juste deux petits détails pour le fameux Base64, donc, en fait, on va pouvoir aller sur un site qui permet de convertir. Donc ici, vous allez pouvoir déposer votre image et la convertir, et vous verrez en l'exploitant lors d'une autre étape, c'est du code exa décimal qu'on va pouvoir copier coller. Et ce site, ici, qui est très intéressant, qui est un site outil tiny PNG, qui va permettre, donc ici, de déposer des PNG ou du JPEG, bien entendu, et de récupérer une image extrêmement optimisée. Donc on arrive à gagner presque soixante quinze pourcents de poids, tout en gardant la transparence alpha sur le PNG, donc c'est très intéressant, des fois, d'optimiser ces images, par des sites de ce type là pour diminuer la bande passante, et accélérer le temps de chargement sur nos pages web. Alors, je vous invite à passer aux étapes suivantes, et maintenant à mettre en application, à utiliser toutes ces images.

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 !