HTML5 : Optimisation des flux de production

Coder les images en Base64

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour éviter de trop nombreuses requêtes client/serveur, convertissez les images en Base64. Découvrez de nombreuses tâches qui vont vous aider.
05:18

Transcription

Il existe une autre possibilité pour des images de petite taille répétitives et qui ne sont pas spritées, c’est d’utiliser la base64. Alors, la base64, ça va être un processus qui va permettre de convertir le binaire des formats des fichiers image en format textuel, donc compressable mais surtout intégrable au fichier html ou css. Donc on va le voir en exemple, ce sera beaucoup plus parlant. Ici je ne me suis orienté que sur du gulp, donc vous avez gulp-base64, qui est celui qu’on va utiliser. Mais vous avez aussi gulp-css-base64 qui est assez intéressant aussi. gulp-inline-base64, base64-img. Et puis je vous invite à venir faire votre marché directement sur npm. Ici, npmjs en tapant base64, vous aurez du gulp, du grunt, du node, enfin toute une série de packages qui vous permettra d’optimiser les images en base64. Alors, regardons-le directement de plus près sur un petit exemple. Ici si je prends le dossier 07_05 ici, on se retrouve avec un package.json prêt à l’emploi. Et puis un dossier image. Dans ce dossier image, on a toute une série d’images qui ne sont pas optimisées, qui sont des images jpeg classiques, avec un styles.css. Et bien sûr un fichier html qui pointe vers ce fichier css. Alors, regardons le code de plus près. On a une liste html classique qui contient des pommes, des cerises, des pamplemousses, et tous sont classés avec une classe qui leur est propre. Le fichier pointe vers un fichier styles.css, donc celui dont on parlait précédemment. Et en fait, ça utilise simplement qu’un background image avec chacune de ces images .jpeg qui sont donc préparées dans ce sens-là. On va regarder du côté du gulpfile ici, js qui a été préparé. Il fait appel aux deux packages, gulp et gulp-base64, et la fonction build, la tâche build va dire : tu vas aller prendre justement ce fichier css ici qu’on trouve dans le dossier image, tu vas le piper en base64, et tu vas me le placer en destination dans ce dossier css qui est juste au-dessus. Alors, si vous avez déjà installé les éléments et le package.json, faites simplement un npm install, sinon vous faites le classique npm init, un npm install gulp save dev, et un npm install gulp-base64 save dev, pareil, pour pouvoir avoir les éléments. Une fois que tout ça c’est prêt, on va pouvoir faire directement un gulp build, puisque c'était le nom de la fonction qu’on a utilisée. Vous allez voir, c’est très rapide, voilà, c’est terminé. Et si je regarde maintenant du côté de mon dossier css, j’ai un fichier styles.css qui a été généré. Alors, ce fichier styles.css qui a été généré, si je l’actualise ici, on le regarde, il utilise maintenant du base64. C'est-à-dire, je n’ai plus de relation vers une image, j’ai directement toutes mes images qui ont été converties en base64. Ce qu’il me reste à faire ici ensuite, ça va être de modifier la relation css de mon fichier html. Pour le mettre en évidence, regardons du côté du navigateur. Alors, on lance le navigateur ici, voilà, j’ai mon fichier 07_05. Assurez-vous que le cache soit bien vidé. Et vous actualisez la page. Regardez, il se passe, ah, il me pointe vers un fichier 01 que j’avais mis pour être sûr de vider le cache. Voilà, je l’actualise, regardez. Il vient de se passer un chargement de toutes ces images. Mais surtout il s’est passé 12 requêtes puisque chaque fois que le html avait besoin d’une image, eh bien, c’est le css qui en avait besoin pour le background image, il faisait une requête client-serveur. Alors comme je disais, en http2 ce ne sera pas gênant, mais en http1 ça peut causer un petit, pas souci, mais bon voilà ça fait beaucoup d’échanges client-serveur qui peuvent pénaliser s’il y a du trafic. Donc en fait, on est à 67 kilos, on a 12 requêtes. Donc je vais changer mon fichier html maintenant ici. Donc je vais venir commenter cette partie-là et décommenter cette partie-là, voilà, pour le css je vais penser à remettre, à placer mon fichier sur le serveur, ici. Je vais penser à placer le styles.css sur le serveur. Je suis sûr que mon code source maintenant est sur le serveur, comme mon style css est sur le serveur. Et surtout ce que je veux faire, c'est : je vais mettre un fichier htaccess, parce que si je regarde sur le serveur distant ici, je n’ai pas de fichier htaccess qui a été placé. Donc si je vais sur le serveur local ici, et prendre mon fichier htaccess qui va compresser les fichiers de type texte, donc css, ça va me faire gagner un certain poids parce qu’il est vrai que toute cette information en octet, enfin, cette information de base64, a un certain poids ici. Donc je retourne maintenant sur le navigateur, ici. Je m’assure que le cache soit bien vidé. Et je réactualise ma page. Alors ici, vous voyez que ça cherche. En termes de poids, j’ai gagné 3 kilos. Donc je n’ai pas gagné grand-chose. J’ai gagné en termes de vitesse aussi. Le résultat est strictement identique d’un point de vue visuel. Par contre, je ne suis passé que par 2 requêtes, puisque j’ai une requête vers mon fichier html, et une requête vers mon fichier css, qui fabrique l’intégralité de mes images au travers d’un fichier texte.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 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 !