HTML5 : Optimisation des flux de production

Optimiser les images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il est toujours possible de gagner du poids tout en préservant la qualité des images. Utilisez une librairie TinyPNG, très souple d'emploi, qui se met en place rapidement et de manière transparente.
05:42

Transcription

Dans l’étape précédente, nous avons vu qu’au travers du fichier htaccess, on allait pouvoir compresser un grand nombre de fichiers. Mais ce sont principalement des fichiers à base de texte, et non pas des fichiers binaires. Donc en ce qui concerne les images, ça serait un peu ridicule d’essayer de dire à deflat ou à gzip de compresser du jpeg parce qu'on ne gagnerait pas grand-chose, et puis à compresser plus le jpeg, on perdrait en qualité, et à compresser du png, on perdrait de forte chance la transparence. Mais il existe des librairies JavaScript qui vont nous permettre d’optimiser les fichiers quand bien même leur transparence et leur état de compression déjà avancé en jpeg. Alors, vous avez ici par exemple Gulp-smushit qui va être un des outils qui va nous permettre d’optimiser ces genres de fichier. Puis vous avez le plus connu d’entre eux, qui commence vraiment à se répandre dans la communauté, qui est le tinyPNG qui fonctionne pour PNG et JPEG compression, qui va nous permettre de vraiment gagner en différence. Regardez ici, on voit un de nos fichiers PNG avec transparence, Ombre protée également, qui fait 57 kilos en PNG, qui ne pèse plus que 15 kilos en png mais optimisé par cette API. Alors, qui dit API dit accès à cette API, et notamment en node. Vous l’avez en PHP, vous l’avez en RUBY, vous l’avez en PYTHON, vous l’avez en beaucoup de technologies propres au web. Elle et très facile à installer et à utiliser, moyennant une clé API ici. Alors vous allez pouvoir cliquer là-dessus, taper votre nom et votre e-mail address, et obtenir votre clé API qui vous donnera ensuite accès à un compte, pour pouvoir régler l’intégralité de votre travail. Alors, il est vrai que si on travaille avec énormément de fichiers à compresser, vous allez devoir passer par un compte Premium. Mais dans la majeure partie des développements de sites web, cela suffit largement. On peut passer par cet outil. Vous avez un premier github qui vous propose le tinypng en command line, ici directement, l’interface, qui est assez sympa, qui permet de travailler directement dans la ligne de commande. Vous avez la même chose qui est disponible pour grunt et si vous travaillez avec gulp, vous avez la même chose disponible pour gulp. Alors, je vous invite à ce qu’on travaille avec celle-là pour les tests et la démonstration de l’utilisation de telle API. Vous pouvez également aller sur le npmjs, et regardez, faites votre marché. Il y a énormément de librairies qui vont vous permettre de compresser les images si vous ne voulez pas travailler avec tinypng. Alors, côté gulpfile, c’est très simple à utiliser. Il suffit d’invoquer les deux packages gulp et tinypng compress. Et puis après, on va faire un src qui va pointer vers le dossier source ici. Alors, si on présente ce dossier de travail ici, on va se retrouver avec directement ici, on a un dossier source qui va contenir un certain nombre d’images. Il y en a pour 6 mégas à peu près. Et puis un dossier img qui est vide, et qui va être le dossier qui va recevoir l’intégralité de ces images. Et puis ici donc, on a le gulpfile et le package.json. On reviendra sur le package.json juste après. Alors, si vous regardez à ce niveau-là, on peut dire à la tâche de venir regarder dans ce dossier source ici, pour regarder les png, les jpg, les jpeg, les gif, toutes les images que vous auriez à compresser en fonction du module que vous allez utiliser. Donc ici, gulp tinypng est capable de travailler avec du png et du jpeg comme on l'a vu. Donc ensuite, on va apposer directement la fonction de tinypng qui observe trois options principales. La première, ça va être votre clé API ici. Donc il va falloir venir taper à l’intérieur la clé API que vous aurez obtenue après vous être inscrit. Le sigFile, qui est une signature de fichier qui va nous permettre de dire : attention, ces fichiers ont déjà été traités. D’une part, ne passe pas du temps à le faire, surtout si vous avez énormément d’images à traiter, et puis secondement, ne va pas leur remettre une deuxième couche. Tu ne gagneras rien, tu perdras du temps, pour pas grand-chose. Log true : tu vas nous donner des résultats, si besoin y était, d’un fichier log nécessaire. Ensuite tu places tout ça directement dans le fichier de destination ici, sur img. Et vous avez vu que la signature, on l'a placé également dans le même dossier, voilà. Pensez à placer votre clé API à l’intérieur du fichier gulp, l’enregistrer, et passer en ligne de commande. En ligne de commande, faites un npm install, puisque tous les fichiers sont présents, le package.json est complet, prêt à recevoir le gulp et le gulp tiny compress. Et une fois que vous avez pointé sur ce dossier et installé, on n’a plus qu’à lancer l’instruction. Alors, on va faire un gulp tinypng directement, et on lance l’instruction. Alors, tout va se passer en arrière-boutique. C’est assez rapide comme processus, surtout que là il n’y a qu’une dizaine d’images. Et une fois que cela vous rend la main, donc on va commencer à la récupérer en attendant, ici. On va mesurer d’une part, le poids du fichier final obtenu, et d’autre part, on va regarder la qualité des images que l’on aura obtenues en final. Alors, vous voyez qu’ici, l’intégralité de ces compressions est en train de se réaliser. Voilà, donc dès que la commande vous rend la main, c’est que tout le fichier a été compressé. Vous voyez qu’ici vous avez le fichier tinypng.sigs qui vous dit : en gros, toutes les images étaient traitées. Et si on regarde au niveau du poids, une fois au final, on était à 6 mégas au départ, à l’arrivée, on est à 2.48 mégas, donc on a gagné un peu plus de 50% par rapport à la qualité des images souhaitée. Alors, qu’est-ce que ça donne d’un point de vue qualité ? Voici ici les images qui ont été traitées. Vous voyez quand même, elle a une bonne qualité si on les regarde par rapport aux images originales. Voilà les images originales. Voilà donc une bonne qualité de compression. N’hésitez surtout pas à explorer d’autres modules qui puissent exister. Mais pensez à toujours traiter vos images avant de pouvoir les mettre en ligne.

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 !