Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Dreamweaver CC 2017

Utiliser TinyPNG

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Bien que la collaboration entre Dreamweaver et Photoshop soit exemplaire, vous devez veiller en permanence au rapport qualité/poids des images. Pour cela, TinyPNG vous sera vite indispensable.
02:47

Transcription

Bien que PhotoShop et Dreamweaver possèdent un excellent aller/retour pour optimiser nos fichiers images, Il est toujours bon de se rapprocher des librairies extérieures, et notamment une des plus répandues qui est tiny png . Tiny png qui permet de travailler soit avec du PNG soit avec JPEG et qui va nous permettre d'optimiser ces images. Regardez, ici, je me trouve avec une image, juste pour illustrer, qui est un slider-fond-01, qui est donc, une image que je vais pouvoir utiliser, ici, comme arrière-plan d'un concert. Parfait. Mais si je regarde cette série là, l'image fait 1.840 MB, ce qui est qulque part, énorme. Bon, c'est une très grosse image, elle a une résolution de 1190x700, donc, c'est quand même de l'image slider. Mais si maintenant je prends cette image et je la glisse/dépose ici, je laisse faire le travail, regardez, au départ, l'image fait 1.9 MB, elle se charge sur le site de tiny png, pour pouvoir être optimisée, et une fois le travail de chargement réalisé coté serveur, Le serveur travaille sur la compression de cette image là. Et regardez, il a sauvegardé 88% de ce poid. C'est-à-dire qu'au départ, il faisait 1.9 MB, maintenant, la même image fait 234.5 KB Alors c'est-à-dire ok, oui mais elle a été détruite. Donc, ce que je vous propose c'est de la télécharger et de la comparer. Donc, voilà, l'image a été récupérée. Reprenons la, je viens de la renommer tiny, Donc, ici, on a l'image originale, 1 mega 840, l'image tiny à 230. On va l'ouvrir directement dans le visualiseur windows, voilà l'image d'origine, voilà l'image tiny. Oui, on est passé sur Tiny, entre parenthèses. Voilà, l'image d'origine, l'image tiny. Donc il faut surtout pas se passer de ce genre de documents. Tiny peut être travaillé de manière manuelle, donc si vous avez pas beaucoup d'images, mais vous pouvez obtenir une clé API qui va vous permettre de l'automatiser soit au travers de grunt, gulp, node directement, vos propres javascripts, voilà. Alors tiny peut être payant si vous faites beaucoup, beaucoup d'images sur vos sites. Mais si vous faites un site, on va dire, très raisonnable, tiny va être, quelque part gratuit, pour pouvoir être utilisé. Cerise sur le gateau, vous allez me dire : Alors oui mais moi, le png c'est la transparence que je veux, et ça va me l'éclater. Non, non, regardez, Tiny travaille en transparence, c'est-à dire que ici au départ, on a une image qui fait 57 KB avec transparence, ici, à l'arrivée on a une image qui fait 15 KB avec transparence. Coucou Panda. Donc, ça vaut vraiment le coup d'optimiser ses images et de penser de faire appel à ce genre de librairie là.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

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 !