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.

Créer un site web avec Dreamweaver CC

Optimiser les images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Quel que soit l'outil graphique utilisé, vous ne gagnerez pas suffisamment de poids sans altérer la qualité de l'image. Optimisez toutes les images du site avec TinyPNG, un utilitaire externe.
01:56

Transcription

Quelque soit l'outil d'optimisation qu'on utilise Photoshop, Dreamweaver, Fireworks, peu importe on va se retrouver avec des images PNG en l'occurrence, qui font un certain poids, ici 997 Ko. Si on décide après de faire un slider donc, d'avoir fond 2, fond 3, fond 4, ça va être autant de poids qui va être multiplié, qui va être extrêmement lourd. Alors, pour cela il existe un site qui s'appelle tinypng.com qui est une API de surcroît ici, qui nous permet de pouvoir, moyennant une clef API, de pouvoir utiliser les outils d'automatisation qu'il s'agisse d'une node, de javascript ou autres et qui vont nous permettre d'optimiser directement l'intégralité de nos images. Et cerise sur le gâteau, si on parle de PNG qui sont donc à fond transparent, on va pouvoir optimiser l'image tout en préservant le fond transparent d'origine. Donc ici, si on regarde du côté de notre fenêtre d'optimisation, il suffit que je glisse le slider sur cette image, vous voyez il est en train de télécharger l'image, Il me dit : moi cette image je trouve qu'elle fait 1 Méga, je suis entrain de la charger. Je vais te la compresser, l'optimiser voilà le résultat que tu vas l'obtenir. Et le verdict est de 278 KB. Donc, maintenant on va pouvoir télécharger cette image, et une fois l'image chargée on pourra l'utiliser comme fond à la place alors déjà, comparons la qualité. Donc, on est bien d'accord que la première fait 997 Ko et la seconde est de 272 Ko. Donc, d'un point de vue aperçu maintenant si je double-clique, voilà la photo originale, voilà maintenant la photo optimisée. Originale, optimisée. Alors, on s'aperçoit qu'il y a une légère pixelisation au niveau de la granularité de l'image, c'est quasiment imperceptible. Et ça va nous permettre donc de réellement optimiser la distribution de nos fichiers au final.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 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 !