Transcription
1. Bienvenue dans le cours !: Quand il naviguait maintenant sur Internet sur un appareil, tout comme celui-ci,
ce que vous voulez vraiment peser sur une grande image à télécharger, qui était destiné à être utilisé sur un grand moniteur. Bien sûr, pour ceux-là, et voici le problème. L' utilisation d'une plus petite image de site Web signifie que cela se téléchargera beaucoup plus rapidement sur un appareil de taille mobile plus petite. Lors de la mise à l'échelle vers le grand écran, il peut sembler vraiment étiré et pixélisé. Si nous allons dans le sens inverse et commençons par une grande image, cela peut sembler bon sur un grand moniteur, mais il peut prendre beaucoup trop de temps à télécharger sur un appareil mobile, plupart du temps une mauvaise expérience utilisateur. Alors, comment ajouter efficacement des images alors que le site Web convient à toutes les tailles d'écran et à tous les appareils ? Nous pourrions essayer d'utiliser une image qui a une sorte de milieu sur la taille. Mais cela devient beaucoup plus difficile dans les écrans, encore plus grands, et ont également une résolution plus élevée aussi. Une autre façon de le faire est de tirer parti des éléments de pitch HTML. Avec l'image, nous pouvons avoir plusieurs tailles de la même image, et le navigateur va charger la bonne en fonction de la taille de l'appareil. Nous allons donc jeter un oeil à cette technique et à diverses autres techniques. Nous voulons également nous assurer que nous pouvons charger différentes images en fonction de l'orientation de l'appareil, du type de formats d'image pris en charge par le navigateur, et bien plus encore. Nous allons également couvrir beaucoup plus de choses utiles sont demandé direction, différents types d'image et comment nous pouvons les convertir
en utilisant la compression sur les différentes méthodes de compression, en utilisant des images de secours, des réseaux de diffusion de contenu, chargement paresseux, et bien plus encore. Si vous créez n'importe quel type de sites Web ou d'applications HTML, alors ce cours est idéal pour vous. Vous n'avez pas besoin de beaucoup d'expérience pour suivre ce cours. Il est conçu pour être convivial pour les débutants. Bien qu'une certaine expérience HTML sera bénéfique puisque je suppose que vous savez comment configurer une page HTML de base. J' espère que vous êtes intéressé et excité de suivre ce cours. Passons maintenant à la première leçon où nous allons découvrir les images de la taille de l'onglet effet et la moitié sur l'expérience utilisateur.
2. Partagez vos travaux sur Skillshare !: Lorsque vous suivez un cours, il est très important de
ne pas prendre l'habitude de suivre un cours juste pour le plaisir de
reprendre un autre cours. Prenez le temps de lire
chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces
solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment
créer quelque chose de
personnel et d'unique. Vous n'avez pas besoin de trop vous
perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul une fois que
vous avez terminé le cours, revenir
et apporter des modifications au
projet par la suite. Cela vous donnera vraiment
une bonne chance de mettre en pratique ce que vous
avez appris en classe. N'oubliez pas non plus de
partager votre projet ici sur Skillshare et je suis le
seul à
y jeter un coup d'œil, mais il inspirera également
les autres étudiants. Pour plus d'informations sur
le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous
pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai
hâte de voir ce que vous
créerez et téléchargerez
ici sur Skillshare.
3. Télécharger les fichiers de démarrage: Avant de nous lancer dans notre première leçon, fourni avec ce cours est quelques fichiers de démarrage que vous pouvez télécharger et travailler à mesure que nous progressons dans ce cours. Chacune des leçons a un dossier correspondant, et à l'intérieur nous avons quelques fichiers de démarrage de base, par exemple, celui-ci a une page HTML de base, et aussi quelques images afin que nous puissions sauter directement à l'apprentissage de nos sujets. Pour télécharger ceci pour le cours, ce que vous devrez faire est de vous rendre sur github.com, puis dans mon profil qui est chrisdixon161. Ensuite, le référentiel est les fichiers de démarrage de l'élément image. Une fois que vous êtes à l'intérieur du dépôt, tout ce que vous avez à faire est de cliquer sur ce bouton « Code », puis télécharger ce fichier zip. Pour un accès facile, j'ai placé le mien sur le bureau juste ici, mais vous pouvez le placer partout où vous préférez. Pour travailler sur ce cours, j'utiliserai l'éditeur de texte, qui est Visual Studio Code. Si vous n'en avez pas, vous pouvez le télécharger via votre système d'exploitation ici. Il est gratuit à télécharger, et gratuit à utiliser pour Mac, Windows et Linux. Une fois que vous avez tout cela configuré et installé, tout ce que vous devez faire est de faire glisser sur les fichiers de démarrage dans Visual Studio Code. Je vous verrai dans la prochaine vidéo, où nous allons travailler sur notre première leçon.
4. Utiliser des images de mauvaise taille: Plutôt que de prendre ma parole, jetons maintenant un coup d'oeil à quelques exemples de la façon dont images de
mauvaise taille peuvent vraiment affecter votre projet. Pour cette tête au projet de démarrage et dans les fichiers, allez dans la leçon numéro 1. Dans notre code Visual Studio ou votre tête d'éditeur de texte dans le premier dossier de projet, je vais maintenant cliquer avec le bouton droit sur la page Index, Copier le chemin, puis Coller ce dans le navigateur. Vous pouvez également double-cliquer sur la page Index à l'intérieur du dossier du projet pour, cela s'ouvrira à l'intérieur de votre navigateur par défaut. Pour cela, je vais utiliser Google Chrome, mais vous pouvez utiliser Firefox, Safari ou tout navigateur majeur que vous préférez. Pour commencer, nous allons jeter un oeil à la taille des fichiers de certaines images fournies et voir également quel effet cela a sur la vitesse de téléchargement. Ouvrons la page Index et à côté cela, nous avons un dossier Images qui a la même image, mais en trois tailles différentes, nous avons le plus grand, qui mesure 5 311 pixels de large et nous pouvons également voir la taille vers le bas à le fond. Nous avons une version large de 640 pixels, et aussi une petite qui est de 320 pixels. À la page d'index, tout ce que nous allons faire pour cela est de mettre en place trois éléments d'image distincts, de les
lier aux trois images. Sautons dans le dossier des images et le premier, qui est le plus petit, et comme c'est un exemple, je vais juste laisser ces vieux textes vides. Dupliquez cela deux fois de plus et la prochaine est la version 640 et nous aurons la plus grande, qui est 5,311, sauvegardez ceci et maintenant si nous
actualisons, nous voyons les trois images comme prévu, et aussi juste comme une note de côté, toutes les images fournies pour ce cours ont été téléchargées depuis unsplash.com, donc si vous voulez les modifier ou télécharger les vôtres, c'est une bonne ressource à rechercher. Cliquez avec le bouton droit de la souris et ouvrez les outils de développement avec Inspect. Tous les navigateurs ont également les outils de développement, et ils sont généralement disponibles avec le bouton droit de la souris et l'élément Inspecter ou Inspecter. Ici ajouter dans l'onglet Réseau et puis nous pouvons rafraîchir le navigateur pour télécharger les trois de ces images. Si vous le faites un peu plus large, nous pouvons voir la taille de chacune de ces images. Comme prévu, il va du plus petit au plus grand et aussi probablement comme prévu, nous pouvons voir que la plus petite image est 27 millisecondes, nous voyons 29 pour celui au milieu, puis 37 millisecondes pour le plus grand. Actualisons et réessayons ceci. Ceci est légèrement différent chaque fois que nous actualisons la page, mais nous pouvons généralement voir que la petite image sera téléchargée dans environ les deux tiers du temps de la grande image. Cela peut faire une vraie différence si vous avez beaucoup d'images sur notre site, ainsi que le temps de téléchargement, la qualité de l'image est également une considération énorme pour, il est
donc préférable que nous puissions nous assurer que les trois de nos images, ils ont eu le même espace disponible. Nous pouvons le faire dans la section tête, puis il va ajouter quelques styles et juste aller pour l'élément image, puis sélectionner la largeur, puis ces deux 100 pour cent. Maintenant, si nous retournons au navigateur et actualisons, nos trois images vont maintenant s'étirer jusqu'à 100 pour cent de la largeur disponible. Nous pouvons voir si nous regardons l'image en haut, nous voyons une perte de qualité, puisque cela a été étiré un peu plus grand. Au milieu, la qualité a été améliorée, sur la qualité sur la troisième ou la plus grande image est beaucoup mieux que les deux précédentes. Nous voyons également sur cette actualisation particulière que le temps de téléchargement est beaucoup plus lent pour la grande image, cela renforce également ce que nous avons dit dans la vidéo d'introduction. Les images volumineuses prennent plus de temps à télécharger, ce qui peut causer une mauvaise expérience utilisateur et potentiellement perdre des utilisateurs de tous les sites. Il y a aussi beaucoup d'enquêtes et de statistiques là-bas qui disent utilise le taux de conversion diminue considérablement avec chaque seconde une page prend
la charge et aussi le taux abondant augmente considérablement en attendant trop longtemps. Je ne jetterai pas de statistiques là-bas puisque beaucoup d'enquêtes montrent des résultats différents, mais je suis sûr que nous avons tous été là dans le passé. Quand une page prend trop de temps à charger, dans cette patience et notre attention passe à autre chose. D' un autre côté, les images trop petites perdront une grande quantité de qualité à mesure qu'elles augmentent. Tout comme nous pouvons le voir ici avec la première image, donc lorsque vous utilisez des images dans votre site Web, ne vous contentez pas d'en télécharger une qui a l'air superbe et ensuite simplement l'ajouter à votre projet, pensez d'abord à la taille de l'image. Au cours des dernières années, la gamme de tailles d'appareil utilise une visualisation de nos sites Web sur, il est juste de plus en plus et voici juste un petit échantillon de tailles d'écran que nous devons permettre. Comme vous pouvez le voir, nous avons une vaste portée et certains jusqu'à plus de 7 000 pixels de large, même si certains des plus grands écrans et les plus communs. Cela peut encore laisser notre choix de taille d'image vraiment difficile. Cependant, lorsque nous prenons ces décisions, nous devons non seulement penser à la taille des appareils,
mais aussi à la façon dont notre site sera installé. Cela peut avoir un grand impact sur nos choix. Vous pourriez être tenté de penser, « Ok, je devrais peut-être viser le milieu et aller sur 3 000 pixels de large. » Cela ne signifie cependant pas que nous devons rendre toutes les images aussi larges. Par exemple, vous pouvez prévoir d'avoir des pré-images sur la même ligne, comme ceci, et c'est une situation courante pour un site Web ou même une vue de galerie avec plusieurs rangées d'images. Quoi qu'il en soit, le fait est que maintenant nous avons soudainement divisé la largeur. Nous avons maintenant besoin de nos images par trois, encore moins si nous prenons en compte l'espace autour de chacune de ces images. Maintenant, nous parlons de nos images qui doivent seulement être d'environ 800 pixels de large, ce qui permettra d'économiser beaucoup sur le temps de téléchargement. en va de même pour deux images de large, quatre images et ainsi de suite. Toutes ces économies peuvent vraiment s'ajouter si nous planifions la taille des images dont nous avons besoin en premier
lieu, au lieu de simplement télécharger dans la première taille d'image qui est disponible, jeté dans notre projet, et l'oublier. Parfois cependant, il est inévitable que nous aurons besoin d'utiliser une image pleine largeur,
comme une image d'en-tête ou un carrousel d'image, ce qui nous ramène à nouveau au problème de si nous sacrifions
la qualité de l'image ou la vitesse de téléchargement. Eh bien, heureusement, il y a un moyen de commencer à contourner cela, donc nous n'avons pas à faire de compromis et nous allons jeter un oeil sur la façon de le faire dans la prochaine vidéo.
5. Laisser le navigateur décider: Pour vous aider à choisir l'image de taille correcte pour l'appareil ou
le navigateur, l'élément image a un attribut intégré très utile appelé srcet. Srcet nous permettra de lister plusieurs images que vous voulez potentiellement utiliser, et nous allons laisser le navigateur décider lequel est le mieux. Dans notre dossier Lesson Two, qui est Laisser le navigateur décider, nous avons deux éléments et un est la page d'index, que nous allons utiliser. On peut copier le chemin. C' est plutôt vide. Nous allons ajouter le contenu dans un instant, puis coller cela dans le navigateur. A l'intérieur du dossier images, nous avons six versions de la même image. Nous avons une version qui mesure 320 pixels de large, nous avons 640, nous avons 1.500, et aussi quelques images avec 1X, 2X, et 4X aussi, que nous allons jeter un oeil à ce que ceux-ci sont très bientôt. Tout comme nous l'avons fait précédemment, à l'intérieur de la section du corps, nous allons mettre en place un élément d'image HTML régulier. Cela veut aller dans le dossier images et sélectionner l'image de route, qui mesure 320 pixels de large. Enregistrer et actualiser. Comme prévu, nous voyons cette petite image chargée. C' est donc généralement ce que nous faisons pour charger une image à l'intérieur d'un site Web. Mais plutôt que d'être coincé avec cette seule image, nous pouvons utiliser ce qu'on appelle l'attribut srcet. Il fournit des images alternatives en fonction de la taille du navigateur. Pour ce faire, nous revenons à nos éléments d'image. Supprimons simplement ceci pour cet exemple, et je vais ajouter ici l'attribut srcet. Cet attribut nous permettra d'ajouter plusieurs images à l'intérieur de nos éléments d'image, que le navigateur peut décider celle qui est la plus appropriée pour la taille actuelle du navigateur. Le premier, encore à l'intérieur du dossier images, allons-y pour la route, tiret, 640, puis séparé par une virgule, nous pouvons ajouter plusieurs images. Nous avons également une image de 1 500 pixels de large. Alors route, tableau de bord, 1 500 points JPEG. Ce qui se passe ici, c'est que nous utilisons les
attributs source d'origine si l'attribut de jeu de sources n'est pas pris en charge dans le navigateur Chrome. Donc, c'est fondamentalement une image de secours. Si nous ne pouvons pas sélectionner l'un de ces, srcet est en fait, assez bien supporté dans tous les principaux navigateurs. Si vous allez sur caniuse.com et faites une recherche pour srcet, nous pouvons voir que srcet est largement pris en charge dans tous ces principaux navigateurs. Le seul problème est l'ancien Internet Explorer. Mais cela a été remplacé par le plus récent Edge Browser, qui a un support complet. Donc, cela signifie que srcet est assez bien supporté et que nous sommes sûrs de l'utiliser sur nos projets. Voilà notre projet. Essayons ça. Rafraîchir. Nous voyons la route, tableau de bord, image 640, et si nous rétrécions cela vers le bas, toujours voir le 640. Rendons ça plus grand. Si nous obtenons cela plus de 1 500 pixels, qui était la taille de l'image plus grande, nous pouvons toujours voir à l'intérieur des outils de développement que nous sommes toujours télécharger la version 640 pixels. Donc, le navigateur ne sélectionne pas l'image alternative. C' est parce que pour que le navigateur détermine lequel il va choisir, nous devons également lui dire la largeur de l'image. Il ne détecte pas automatiquement que c'est 640 et celui-ci est 1.500, mais après le chemin du fichier vers l'image, il
suffit d'ajouter à la largeur avec l'image en pixels, avec un W juste après. C' est 640 pixels de large, c'est 1 500 pixels de large, et essayons ceci. Retour au navigateur, je vais réduire cela à une petite taille, rafraîchir. Nous voyons la version 640 pixels. Rendons ça plus grand. Nous voyons à un moment donné que la version de 1 500 pixels a été chargée. Essayons à nouveau. 640. Je veux voir la taille juste ici. Donc, 300 pixels, ou, mien change à la grande image autour d'environ 500 pixels. Comme nous le savons, il est de choisir cela en fonction de la fenêtre du navigateur, qui est la zone visible du navigateur. Il est également de choisir sous l'hypothèse que nous voulons ces images soient toute la largeur de la fenêtre. Cependant, ce n'est pas toujours le cas. Donc, pour contrôler cela, nous pouvons configurer l'attribut sizes après notre srcet. Ajoutons ceci. Si nous omettons cet attribut de tailles, il est supposé que nous voulons que les images soient la pleine largeur de la fenêtre ou du navigateur, ou à son plus
basique, nous pouvons ajouter une taille à appliquer à toutes les images. Par exemple, si nous voulons que toutes les images soient seulement 50 pour cent de la largeur disponible, tout comme avec CSS, nous pourrions ajouter à 50vw, définissez ceci pour être la moitié de la largeur de la fenêtre. Sauvegardez ça. Même si notre version 640 pixels a été chargée, cela n'a pris que 50 pour cent de la largeur du navigateur. Si nous passons à la version plus grande, la même chose s'appliquera toujours. Avec les petits écrans, il est courant de voir les images et contenu en utilisant toute la largeur disponible, tout comme nous le voyons sur la gauche, et alors peut-être que cela ne prendra que 50 % de la largeur sur un écran plus grand. Alors, comment ferais-tu cela avec l'attribut sizes ? Pour ce faire, nous combinons ces attributs de taille avec des requêtes
média pour adapter les images à la taille de l'appareil. En utilisant notre exemple, puisque nous avons deux images différentes à choisir, nous allons ajouter deux valeurs différentes séparées par une virgule. Tout comme avec CSS standard, je vais ajouter une requête multimédia et configurer la largeur maximale pour être égale à 600 pixels. Donc, en dessous de 600 pixels, nous voulons définir nos images à 100 % de la largeur de la fenêtre d'affichage. Sinon, voulez qu'ils soient 50 pour cent ou la moitié de la largeur disponible. C' est donc un excellent moyen de contrôler la taille
des images avec différentes tailles d'écran. Essayons ça. Tout d'abord, nous devons descendre à la plus petite taille et rafraîchir. Nous voyons la route, tableau de bord, 640 est chargé comme prévu, et que cela représente 100 pour cent de la largeur de la fenêtre. Puisque nous avons réglé cela à 600 pixels si nous continuons, il y a notre grande image maintenant téléchargée, et si nous prenons cela juste au-dessus de 600 pixels, cause de la deuxième valeur, cela descend maintenant à 50vw. Quelque chose que vous avez peut-être remarqué est dans mon navigateur. Il saute jusqu'à la grande image à environ 500 pixels. Vous avez peut-être une valeur différente et nous verrons pourquoi très bientôt. Mais vous pouvez penser que 500 pixels est un peu trop petit pour sauter jusqu'à la grande image, étant donné qu'il n'est même pas plus large que notre première image. Certes, la version 640 sera mieux adaptée. Eh bien, c'est une question très valable et à laquelle nous allons répondre ensuite.
6. Introduction à la densité de pixels: Cette vidéo se dirige vers la leçon 3 des fichiers de démarrage, ouvrez la page d'index, et assurez-vous également que nous avons le bon ouvert dans le navigateur aussi. Dans la dernière vidéo, nous avons déjà discuté que les images peuvent ne pas changer au moment où nous les attendons. Nous avons regardé si nous réduisons le navigateur à la plus petite taille à l'intérieur des outils de développement, nous voyons la plus petite image est chargée. En augmentant cette échelle, nous voyons autour la marque de 500 pixels que l'image plus grande a été téléchargée. Vous pouvez penser que ce saut vers l'image plus grande est un peu trop tôt car il est toujours en dessous de l'image de 640 pixels de large. Eh bien, la raison pour laquelle cela se produit est parce qu'il ne s'agit pas seulement de la largeur de l'image, mais aussi de la densité de pixels de l'écran. Ici, j'utilise un écran de rétine afin que nous puissions presser plus de pixels par pouce qu'un appareil sans rétine. Il en résulte une image plus nette et plus nette. Comment tout cela fonctionne-t-il ? Eh bien, imaginez que nous avions un écran avec une résolution de 1920 par 1080, 1920 étant la largeur de l'écran en pixels. Disons que nous avons créé un espace de 300 pixels sur
300 où nous voulions placer une image à l'intérieur. Il y a de nombreuses années, c'était simple. Nous avons créé une image de 300 pixels de large, 300 pixels de haut, et cela a très bien fonctionné. Maintenant, avec les exigences de qualité supérieure, nombreux écrans sont capables de presser plus de pixels dans un espace, communément appelé pixels par pouce ou densité de pixels. Cela signifie que si vous avez un affichage 2x, vous allez presser deux fois plus de pixels dans le même espace. Ce qui signifie que nous pouvons utiliser une image deux fois la taille, dans notre cas, 600 x 600 pixels, et qu'elle s'insère dans le même espace disponible sur l'écran. C' est pourquoi la rétine dans les appareils à densité de pixels plus élevée semble beaucoup plus nette. Les écrans peuvent aller encore plus haut, tels que 3 ou 4x. Je suis sûr que beaucoup plus haut dans un proche avenir aussi. Pour voir un exemple du monde réel, sur la gauche ici, écran de
mon ordinateur portable a une résolution de 3 072 pixels de large sur 1920 de haut. Vous pouvez penser qu'il pourrait accueillir des images jusqu'à 3 072 pixels de large. Dans le dossier Images, nous avons également cette même image de route nommée 1x, 2x, et aussi 4x aussi. L' image 1x mesure 640 pixels de large, ce qui n'est pas destiné aux écrans rétiniens. Il est destiné à être utilisé sur les moniteurs réguliers qui ont une densité de pixels régulière, 2x, c'est deux fois la taille et a une largeur de 1280. Ensuite, 4x fait 2 560 pixels de large. Donnons ça un coup de pouce. Si nous commentons ces images ici. Eh bien, cela crée un nouvel élément d'image, et nous allons configurer ceci pour afficher notre image 1x. Ce que nous voulons faire ici est de copier et coller cette image en deux fois de plus. Enregistrez ceci, puis sur le navigateur, et fermez les outils de développement. Si nous étirons le navigateur pour être à peu près toute la largeur de l'écran, nous pouvons voir que nous n'avons que la largeur pour deux de ces images. Rappelez-vous que chacune de ces images est la version 1x, qui mesure 640 pixels de large. Nous n'avons ici que la largeur pour environ 1500 pixels, même si nous venons de voir que la résolution de l'écran était de plus de 3 000 pixels de large. C' est parce que je viens de mentionner que j'utilise un écran de rétine. Un affichage de la rétine ne signifie pas que nous avons plus d'espace pour jouer avec. Cela signifie simplement que nous pouvons fournir une image de meilleure qualité, et les images seront ensuite serrées dans le même espace disponible. Si nous y réfléchissons, cela est tout à fait logique. Nous voulons que la taille physique de l'image occupe la même quantité d'espace sur chaque écran. Lors de la création
d'un site web, une image que j'ai conçue pour être la moitié de la largeur de l'écran, sera toujours la moitié de la largeur pour un affichage régulier ou rétine. La seule différence est qu'un écran de rétine peut utiliser une image plus grande pour s' insérer dans le même espace disponible, ce qui donne une image de meilleure qualité. Nous pouvons également utiliser ces connaissances avec les attributs du jeu de sources. Pour cela, nous avons juste besoin d'un de nos exemples d'image, alors passons deux d'entre eux. Cela sera également compté comme la version originale 1x pour les écrans non rétiniens. Après cela, placez dans le srcset, puis en utilisant une source, nous pouvons également fournir un 2x, et aussi un lien vers notre image 4x aussi. La différence par rapport à la vidéo précédente bien que nous ayons ajouté la taille suivie par le w. cette fois, le srcset peut également accepter une densité de pixels. Pour cela, nous ajoutons 2x, puis pour la grande image, nous ajoutons 4x. Juste avant de vérifier cela, nous pouvons également spécifier la taille que nous voulons afficher l'image. Cela signifie que quel que soit l'écran, nous voulons afficher une image de 640 pixels de large. C' est ce qu'on appelle les pixels CSS. Ensuite, si le navigateur décide qu'il veut utiliser un plus grand, comme le 2x ou le 4x, il sera alors pressé dans le même espace. Donnons ceci une sauvegarde et plus au navigateur, dans les outils de développement, actualiser, dans le réseau. Maintenant, même si nous avons défini l'image à 640 pixels de large, le navigateur a maintenant détecté que mon moniteur est un écran de rétine et a choisi d'appliquer l'image 2x, qui est 1280 de large, et cette image est ensuite pressée dans le même espace disponible. utilisation de ces attributs d'image supplémentaires est un bon moyen de basculer entre les tailles d'image, en fonction de l'écran ou de la densité de pixels. Souvent, nous n'avons pas besoin de faire quelque chose de plus complexe que cela. Nous mettons également beaucoup de confiance dans le navigateur, c'est si nous voulions plus de contrôle manuel ou encore des options plus flexibles. Ensuite, nous allons jeter un oeil à la façon de le faire avec l'élément pitch.
7. L'élément d'image: Ces attributs d'image supplémentaires que nous avons examiné sont vraiment utiles pour sélectionner le bon type d'image basé sur la largeur du navigateur et aussi la densité de pixels. Si c'est tout ce dont nous avons besoin, c'est tout à fait bien. Cependant, si nous voulons un contrôle plus fin, nous pouvons utiliser ce qu'on appelle l'élément image. Eh bien, cette leçon se dirige vers le numéro 4 qui est l'élément image, puis ouvrez la page index.html. À l'intérieur du navigateur, ce n'est qu'une page HTML vide et nous avons des images comme jamais sur cette leçon qui vont vraiment être utiles pour vérifier ce que les éléments d'image ont à offrir. L' élément image offre plus de flexibilité si nécessaire en nous donnant accès à toute la puissance des requêtes média pour sélectionner notre image. C' est la façon manuelle de dire au navigateur quelle image doit utiliser plutôt que de laisser votre navigateur décider comme nous l'avons fait dans les vidéos précédentes. L' élément image est simplement un wrapper pour diverses images comme ça. À l'intérieur du corps, nous créons l'image, étiquette
d'ouverture et de fermeture. Cet élément ne fournit aucune image par lui-même, nous devons plutôt placer dans un contenu à l'intérieur de cet élément. Tout comme la source à laquelle vous avez regardé dans les vidéos précédentes, l'élément image est également bien pris en charge. Nous avons un support complet dans tous les principaux navigateurs et comme avec la plupart des choses, nous avons un problème avec Internet Explorer, bon avec les systèmes Microsoft. Cela a été remplacé par le navigateur Edge donc nous ne devrions pas avoir trop de problèmes avec cet élément. Retour à l'éditeur de texte et à
l'intérieur de l' élément image et je vais ajouter notre première image. Je dois aller pour le dossier images et le lac qui est 640 pixels wide.jpeg. Comme vous vous y attendez, si nous enregistrons et actualisons ceci, nous voyons maintenant que cette image a été chargée à l'intérieur du navigateur. Avec cette configuration, nous ne sommes pas plus loin que nous le
serions en utilisant simplement un élément d'image régulier. Mais ce que nous pouvons faire en utilisant ces éléments d'image est également de fournir des images
alternatives à l'intérieur d'un ou plusieurs éléments sources. Les éléments source n'ont qu'une balise d'ouverture. Puisque nous avons ajouté les données en tant
qu'attributs, elles sont utilisées pour fournir des ressources multimédias non seulement pour ces éléments d'image, mais vous
pouvez également voir cet attribut source utilisé avec le wrapper audio ou vidéo également. Lorsque vous l'utilisez à l'intérieur des éléments d'image, comme nous le sommes, les attributs source seront ignorés. La raison en est que l'attribut source n'est pas nécessaire car nous avons déjà une image de secours juste en dessous, mais ce que nous pouvons ajouter est le jeu de sources. Encore une fois, prend les images que nous voulons utiliser, suivies de la taille. Nous ajoutons d'abord le chemin du fichier afin que le nôtre soit dans le dossier Images. Allons pour le sun-640.jpeg. La taille de l'image 640w. Ensuite, séparé par une virgule, notre deuxième image que nous allons permettre pour la sélection est la version plus grande du soleil qui est sun-1,280.jpeg. Ensuite, nous spécifions que cette image est de 1 280 pixels de large et j'ai ajouté les deux images solaires à l'intérieur d'ici qui sont différentes de
l'image de secours juste pour que nous puissions voir clairement ce qui se passe à l'intérieur du navigateur. Comme dans la vidéo précédente, nous pouvons également utiliser la densité de pixels au lieu de cette largeur. Ici, nous pourrions ajouter 2x et 4x par exemple, alors choisissez l'option qui vous convient le mieux. Donnons ceci une sauvegarde et ouvrons cela dans le navigateur, actualisons. Nous verrons si nous réduisons le navigateur à la plus petite taille mais le sun-640 va le gonfler. Nous ne voyons pas le lac car c'est juste l'image de secours si la source n'est pas prise en charge. Rendons ça un peu plus grand. Je continue et puis une fois que nous avons frappé un peu moins de 500 pixels, nous voyons que la version plus grande a été chargée. Maintenant, cela nous laisse dans une position assez similaire à ce que nous avons eu dans les vidéos précédentes où nous avions un élément d'image régulier et ensuite nous avons ajouté le jeu de sources. Mais la différence ici est que nous pouvons également introduire des requêtes de médias. Cela signifie que, plutôt que de laisser le navigateur décider quelle image afficher, nous pouvons servir des conditions plus strictes de nos propres. Nous pouvons utiliser n'importe quelle requête média que nous voulons comme nous pourrions le faire avec CSS régulier. Il est courant d'afficher une image uniquement si la fenêtre d'affichage est d'une largeur minimale ou maximale. Nous ajoutons les attributs de média, puis configurons notre requête de média entre les crochets. Celle-ci était à la largeur minimale égale à 640 pixels et nous allons supprimer notre image plus grande. Ce que cela nous laisse est un attribut source, qui ne va afficher cette image que lorsque le navigateur est plus grand que 640 pixels. Si le navigateur est inférieur à 640 pixels et que cette condition de requête de média n'est pas remplie, l'image de secours sera utilisée. Vérifions ça. Amenez cela à la plus petite taille et actualisez. Nous voyons le lac qui est l'image de repli et maintenant étendons ceci à 640 pixels ou plus. Cela va maintenant passer à l'image du soleil. Une autre chose utile que cette requête média fait pour nous est qu'elle nous
permet également de peaufiner exactement quand nous voulons que nos images changent. Plus tôt, quand le navigateur décidait, il a changé mon image juste en dessous de la marque de 500 pixels. Disons simplement que nous pensions que c'était trop tôt, nous voulions changer cela à 600 pixels, eh bien ces attributs de médias nous permettront de peaufiner cela à n'importe quelle taille que nous voulons. Pour ce faire, nous allons dupliquer notre source, nous pouvons réintroduire notre grande image qui était 1,280. Nous devons aussi définir la largeur ici et cette fois, pour l'image plus petite, nous allons définir la largeur maximale à 599 pixels et ensuite nous voulons que la plus grande prenne effet à 600 pixels. Vous pourriez même rendre cela plus élevé si vous le vouliez, mais cette requête multimédia va maintenant nous donner contrôle
total de exactement quand nous passons à notre grande image. Essayons ça. Si nous descendons à la plus petite taille, nous voyons le soleil à 640, puis il prend jusqu'à 600 pixels et notre image sera maintenant remplacée par la version plus grande, ainsi que la largeur minimale ou maximale que nous sommes en utilisant ici, n'importe quelle requête média valide peut être utilisée. Même si nous n'avons qu'une seule source d'image pour chaque requête multimédia, nous pouvons toujours utiliser plusieurs sources qui relèvent toujours d'une seule requête média. Un exemple peut être lors de la vérification de l'orientation du périphérique. C' est plus pour les appareils mobiles et nous pouvons vérifier si l'appareil est tourné soit paysage ou portrait. Pour voir cela en action, nous pouvons changer la largeur maximale via l'orientation, et celui-ci nous allons définir ceci comme un paysage. Nous pouvons alors changer le second à l'orientation du portrait et maintenant nous allons définir nos images en fonction de chacune d'elles. Puisque le paysage est plus large, nous allons opter pour nos deux images larges, soit 1 280 et 2 400. Modifiez à la fois la source de l'image et la largeur. Copions ceci, séparé par une virgule la seconde qui est pour 2.400. Ensuite, la vue portrait afin que les images soient plus étroites et pour cela nous avons une version 320 et 640. La première source de 320 puis séparée par une virgule, nous pouvons ajouter dans la version large de 640 pixels. Maintenant, si nous testons cela en mode portrait, nos deux images plus petites devraient maintenant s'afficher. Lorsque nous passons au paysage, nous devrions alors afficher nos deux grandes images. Pour simuler cela, nous pouvons passer aux outils de développement, puis si nous cliquons sur la barre d'outils Toggle périphérique, cela nous permettra alors de choisir entre une vue de bureau et un appareil mobile. Allons pour iPhone 6, et si nous actualisons, nous voyons que cette petite image de 640 pixels a été chargée. Cette icône juste ici va basculer l'orientation vers le paysage, actualiser, et il est maintenant choisi l'une des grandes images pour la vue paysage. Rappelez-vous que vous pouvez ajouter autant de ces éléments sources que vous le souhaitez,
afin de vous assurer que nous avons la meilleure image pour chaque situation. Enfin, nous pouvons également utiliser ces attributs de taille, comme nous l'avons fait dans les vidéos précédentes. N' oubliez pas que si aucun attribut de tailles n'est ajouté, il est supposé que vous voulez que toutes ces images soient la pleine largeur de la fenêtre d'affichage. Par exemple, lorsque vous utilisez une orientation paysage, nous pouvons vouloir limiter certaines des images plus grandes à seulement 50 % de la largeur de l'écran. Bien que tout comme plus tôt, définissez les tailles. Ceci est combiné avec une requête multimédia où nous allons définir la largeur maximale de 1 280 pixels. De zéro à 1 280, nous voulons que les images soient la pleine largeur de l'appareil avec 100vw, puis seulement 50 pour cent de large sur les plus grands écrans. Comme ça et testons ça. Si nous étendons le navigateur encore plus large, nous ne verrons aucune différence puisque l'iPhone a une taille fixe. Si nous sélectionnons quelque chose de plus grand comme un iPad Pro, lorsque nous sélectionnons pour la première fois dans la vue du portrait, l'image est toute la largeur de l'écran. C' est parce qu'il tombe sous la largeur maximale de 1 280 pixels, où nous définissons la largeur à 100 pour cent. Alternativement, si nous passons à paysage, il devrait maintenant changer l'image vers le bas soit 50 pour cent. Essayons ceci, et tout cela fonctionne maintenant comme prévu. La clé à emporter étant si vous voulez que le navigateur décide quelle image sélectionner, utiliser l'image combinée avec le jeu de sources ou tout simplement comme ceci si vous voulez un contrôle beaucoup plus flexible, l'élément image est une excellente option. Une autre grande utilité pour l'élément image est également de changer la direction artistique des images et nous allons couvrir comment faire cela dans la prochaine vidéo.
8. Direction artistique: Les exemples que nous avons examinés jusqu'à présent se concentrent principalement sur la densité de pixels et aussi sur la résolution. Cependant, bien que l'élément pitch ait également un autre grand cas d'utilisation, et c'est pour ajuster l'image, fonction de ce qu'on appelle la direction artistique. Pour cela, passons à nos fichiers de démarrage et à la leçon numéro cinq. À partir d'ici, le dossier Direction de l'art ,
ouvrez la page d'index, et ouvrons cela, à l'intérieur du navigateur, nous allons copier le chemin du fichier vers ceci, puis remplacer celui de la dernière vidéo. Je vais également cliquer sur la barre d'outils du périphérique bascule pour rétablir cela à la vue complète du bureau. Toutes nos images jusqu'à présent ont été des tailles différentes, et c'est génial d'avoir une version plus petite et plus grande de la même image, mais parfois certaines images peuvent tout simplement ne pas convenir à une certaine taille d'écran. Dans le dossier Images, à l'intérieur de la leçon 5, commençons par jeter un oeil à la version paysage. Ici, nous voyons quelqu'un sauter avec un large fond de paysage, et cela aura l'air bien sur un grand moniteur à mon avis, où vous pouvez voir tous les détails de fond. Nous pouvons voir le soleil, nous pouvons voir les montagnes, nous pouvons voir le sol, mais imaginez cela sur un petit appareil tel qu'un téléphone, puisque la personne sautant prend seulement un petit pourcentage de la largeur totale de l'image, est point focalisé de cette personne peut sembler vraiment petit. Pour l'appareil mobile au lieu de fournir une version réduite plus petite de cette image, il peut être préférable de fournir une version recadrée de ce point de mise au point, comme nous le voyons dans la version portrait. Ici, nous voyons une version verticale qui se concentre sur cette personne, et nous voyons aussi moins de l'arrière-plan. qui signifie que cette personne occupe un pourcentage plus élevé de la largeur totale. Par conséquent, il aura l'air plus grand sur un appareil mobile. Essayons ça. Dans la page d'index, à l'intérieur de la section du corps, nous avons juste un démarreur vide ici. Encore une fois, pour en faire usage, nous allons utiliser l'élément image. Ensuite, à l'intérieur d'ici, nous allons fournir deux éléments sources, qui vont pointer vers ces deux images. Nous savons que nous pouvons ajouter une requête multimédia en tant qu'attribut, puis à l'intérieur des parenthèses, le premier, nous allons configurer la largeur maximale de 799 pixels. Ensuite, pour cette vue plus petite, nous allons définir l'image avec les attributs srcset, donc cela va pointer vers le dossier Images. Ensuite, l'image dont nous avons besoin, puisque c'est le plus petit appareil, nous allons utiliser la version portrait. Cela a une extension JPEG point. Maintenant, nous pouvons dupliquer ça. Celui-ci va se déclencher lorsque la largeur minimale est de 800 pixels et plus. Après celui-ci, puisque nous avons plus d'espace, nous passerons à la vue du paysage. Basculer entre nos deux images comme celle-ci lorsque l'
une est un niveau de zoom particulier ou une autre est une version recadrée de l'image, c'est
ce que l'on appelle la direction artistique. Puisque nous n'avons pas plusieurs tailles de ces images, nous allons mettre en place quelques CSS en haut. Nous allons simplement limiter l'image à une largeur maximale de 100 pour cent, ce qui empêchera les images de s'étirer trop largement. En outre, en faisant cet élément de pitch, nous devons ajouter un espace réservé d'image qui va agir comme un défaut, et aussi les emplacements des éléments placent ces images à l'intérieur. La source, ce qui va être pour le repli, serait juste placer dans la version paysage. Donnez ceci une sauvegarde, et assurez-vous que dans le navigateur, nous sommes dans le dossier numéro cinq. Tout d'abord, réduisons cela jusqu'à la plus petite vue. Parce que nous sommes sur la vue plus petite, qui est inférieure à 799 pixels, nous verrons une version de représentation qui se concentre sur cette personne sautant. Laissez l'échelle jusqu'à plus de 800 pixels. On y va. Ensuite, plus de 800 pixels, nous voyons la version paysage complète avec plus de décor de fond. Cette direction artistique nous donne vraiment quelque chose à penser, pour essayer de mettre l'accent sur une seule partie de l'image. Ou juste comme dans ce cas où nous essayons de ne pas rendre la partie clé trop petite. Ensuite, nous concentrerons notre attention sur les différents types d'images disponibles.
9. Types d'images et compression: Une autre partie extrêmement importante de l'optimisation de nos images pour le web est de considérer le format de l'image. Il y a beaucoup de formats d'image disponibles, et je suis sûr que vous en avez rencontré certains, tels que JPEG, PNG, GIF ou GIF selon la façon dont vous le prononcez,
ainsi que SVG pour n' en nommer que quelques-uns. Tout cela est courant et lorsque vous téléchargez une image en ligne, en utilisant nos projets, nous n'avons pas toujours choix du format dans lequel l'image sera. Il y a des moyens de changer cela, que nous examinerons bientôt. Mais avant de changer les formats d'image, nous devons d'abord comprendre quelles
sont les principales différences et pourquoi nous devrions même changer les formats du tout. Il y a plusieurs raisons clés pour lesquelles le format est important. Le gros est que les différents formats ont des tailles de fichiers différentes. même image dans un format différent pourrait potentiellement réduire la taille du fichier, réduisant ainsi le temps de téléchargement pour l'utilisateur final. Ce gain de temps pourrait être faible ou énorme selon certains des facteurs que nous allons jeter un coup d'oeil dans un instant. En plus de la taille du fichier, la qualité réelle de l'image peut également être différente avec différents formats. Il y a des considérations telles que si l'image peut prendre en charge la transparence et aussi le nombre de couleurs de support. En outre, nous devons réfléchir à si nous devons mettre à l'échelle l'image vers le haut ou vers le bas. Comme nous l'avons vu dans d'autres vidéos, la mise à échelle des images JPEG peut réduire la qualité de l'image. Mais d'autres types de fichiers tels que SVG ne seront pas affectés. Cela se produit parce que ce SVG et JPEG appartiennent à deux catégories différentes. Une image raster est comme une photographie traditionnelle. Il est composé de minuscules pixels. Selon la taille de l'image, il peut y avoir des millions de pixels, et chacun représente une couleur. Comme il y a tellement de pixels dans une photo, ils sont généralement indétectables par l'œil humain à moins que nous ne redimensionnons les images, et c'est à ce moment qu'ils commencent à perdre la qualité et deviennent pixélisés puisque l'écran essaie de s'adapter au même quantité de pixels dans une plus grande zone. formats d'image tels que JPEG et PNG entrent dans cette catégorie. Une autre catégorie est les graphiques vectoriels. Ceux-ci sont créés sur des programmes informatiques et sont confectionnés avec des éléments tels que des courbes, des lignes et des formes. Ils peuvent être augmentés ou réduits en taille sans perte de qualité. Nous pouvons également éditer des graphiques vectoriels existants. Des programmes tels qu'Adobe Illustrator, Sketch, Inkscape et Figma peuvent les créer et ils peuvent être enregistrés dans un format tel que SVG. Une autre différence avec un SVG est qu'il est également représenté dans le code aussi. Un fichier SVG contient un code que nous pouvons ajouter directement dans un document HTML. Cela signifie que nous n'avons même pas toujours besoin de créer un lien vers un fichier image si nous préférons cette approche. Les distinctions claires entre ces deux groupes facilitent la décision de ce que nous devons utiliser. Si vous avez besoin de photos de haute qualité, comme un site Web, qui est un portefeuille de photographies, images
raster telles que JPEG sont idéales. Eh bien, pour les graphiques, les logos et les icônes, un vecteur sera souvent un meilleur choix, surtout lors de la mise à l'échelle de l'image. Même si nous avons la catégorie raster comme un meilleur choix de choses telles que les photographies, cela ne signifie pas que nous sommes coincés avec la taille du fichier d'origine. Nous pouvons appliquer la compression à nos images pour réduire la taille du fichier, ce qui les rendra plus rapides pour l'utilisation sur le web. La compression peut être appliquée dans des groupes appelés perdant et sans perte. Ceux-ci concernent la façon dont nous compactons ou optimisons nos images pour
essayer de réduire la taille du fichier et donc la vitesse de téléchargement. La compression avec perte, telle qu'elle semble, peut entraîner une perte de la qualité d'image originale. Mais comme il est plus régressif, il peut également conduire à de plus grandes réductions de taille de fichier. Cela ne veut pas dire que nos images semblent pures. En fait, vous ne remarquerez peut-être même pas de perte de qualité à nombreuses occasions en fonction du niveau de perte que nous fixons. Une fois que la compression a été appliquée, quelque chose qui est vraiment important est qu'il n'y a pas de retour à l'image originale, elle est complètement perdue pour toujours. Lossless est à peu près le contraire, et la qualité d'image originale est maintenue. L' algorithme de compression peut réduire la taille du fichier et également réduire toutes les métadonnées que vous avez stockées à l'intérieur de l'image. Les métadonnées incluent les éléments automatiquement enregistrés par l'appareil photo, tels que la date et le type de caméra, le nom du photographe, etc. Puisque sans perte maintient la qualité d'image d'origine, il est compréhensible que les économies de fichier soient inférieures aux versions perdues. Donc, avec tout cela, lequel est le mieux à utiliser ? Eh bien, jetons un coup d'oeil à certains des formats d'image les plus courants. JPEG est un excellent choix pour l'affichage dans des photographies de haute qualité ou même des œuvres d'art. Cependant, ce n'est pas idéal pour afficher des choses telles que du texte, surtout s'il doit être mis à l'échelle. JPEG est un format d'image commun, donc il ne devrait y avoir aucun problème avec ce manque de support. C' est un format de compression avec perte, donc nous pouvons également enregistrer beaucoup de la taille du fichier image. Si nous sommes satisfaits d'une petite perte de qualité, nous pourrions même aller plus loin avec la compression si nous voulions une version plus petite, peut-être comme pièce jointe à un e-mail ou tout simplement quelque chose sur votre site Web qui ne nécessite pas beaucoup de détails. PNG est également un format d'image web très populaire. L' un des avantages est qu'il prend également en charge les transparences, ce qui est quelque chose qu'un JPEG ne prend pas en charge. Un JPEG doit avoir une couleur d'arrière-plan unie. Par exemple, si vous l'utilisez dans un en-tête de site Web, vous devez vous assurer que la couleur d'arrière-plan de l'image correspond à
la couleur d'arrière-plan de l'en-tête. Si vous avez besoin d'utiliser une image ou un graphique sur un fond transparent, un PNG est la voie à suivre. Un PNG a également une compression sans perte, sorte que le fichier d'origine est maintenu et il peut également être restauré. Cependant, cela peut également signifier que moins de réduction de la taille du fichier est possible. Vous trouverez parfois des images simples, des icônes ou des graphiques stockés sous forme de GIF. Ils sont un bon choix pour cela, car ils ont une petite taille de fichier et peuvent également prendre en charge les transparents. Donc nous n'avons pas d'antécédents couvrant les choses. Un fichier GIF peut également contenir une animation. Donc, c'est un bon choix si vous avez besoin d'animer. Ces animations peuvent être créées avec des outils tels que Photoshop. Pour les vecteurs, un SVG est un choix populaire. On ne l'utilise pas pour les photos. Ou si vous avez besoin d'un graphique basé sur ordinateur, d'
un logo ou d'une icône, c'est un excellent choix car il est redimensionnable sans perte de qualité et a également généralement de petites tailles de fichiers aussi. Certaines de ces technologies d'image mentionnées jusqu'à présent
existent depuis un certain temps et présentent également certaines limites. Pour cette raison, certains formats d'image de nouvelle génération ont été développés, tels que JPEG 2000, JPEG XR et WebP. Bien que pas aussi couramment adoptés pour l'instant, ils peuvent offrir de grandes économies de taille de fichier sur les formats traditionnels comme JPEG et PNG. Je ne vais pas entrer dans tous les détails techniques de ceux-ci, mais JPEG 2000 offre le choix à la fois de la compression avec perte et aussi sans perte. Nous pouvons choisir celui qui est le mieux pour nos images et a généralement une image de meilleure qualité pour la même taille de fichier qu'un JPEG normal. JPEG XR a été créé par Microsoft, et offre également le choix de la compression avec perte et sans perte pour s'adapter à un plus grand nombre de situations. Il peut avoir des niveaux de compression plus élevés, donc il y a une grande taille de fichier à faire. Nous avons également WebP, qui a été développé par Google et tout comme les deux autres supporte
également la compression avec perte et sans perte. Il peut préserver les transparences et a généralement une taille de fichier beaucoup plus petite que les types de fichiers traditionnels. Un autre avantage est qu'il supporte également les animations aussi, ce qui signifie que c'est une très bonne alternative aux fichiers
GIF comme vous vous y attendez puisque ces types de fichiers sont beaucoup plus récents. Le problème réside dans la prise en charge des programmes d'image, des appareils tels que les appareils photo, ainsi que des navigateurs Web. Pour consulter le support du navigateur, nous pouvons également aller sur caniuse.com. Jetons un coup d'oeil à un WebP. Ici, nous allons, le format d'image WebP. Nous pouvons voir que cela est entièrement pris en charge dans la plupart des principaux navigateurs. Comme toujours, nous avons un problème avec Internet Explorer, qui a été remplacé par Edge. Aussi sur Safari, nous n'avons qu'un soutien partiel. Cela signifie qu'il est uniquement pris en charge sur macOS, son système d'exploitation et supérieur. C' est quelque chose à prendre en compte lors de l'utilisation de l'une de ces images de nouvelle génération. Jetons un coup d'oeil pour JPEG 2000. Nous pouvons voir que ce n'est pas aussi bien supporté que le WebP, donc c'est quelque chose à faire attention. Vérifions le WebXR. Encore une fois, cela a beaucoup de problèmes avec le soutien. Il peut être préférable de s'en tenir à un format tel que WebP au lieu de ces deux formats JPEG. SVG, jetons un coup d'oeil à cela. C' est l'un des types de vecteurs. Ceci est très bien supporté sur tous les principaux navigateurs. Il peut être une bonne idée d'avoir un format d'image de nouvelle génération disponible si le navigateur
les prend en charge et aussi reculer des images telles que JPEG et PNG si le support du navigateur est limité. Nous allons jeter un oeil à la façon de le faire ensuite avec quelques outils que vous pouvez utiliser pour convertir des types de fichiers image.
10. Outils de conversion et images de secours: Maintenant, nous en savons un peu plus sur les différents types de fichiers d'image disponibles. Maintenant, regardons comment nous pouvons les ajouter à notre projet et aussi comment nous pouvons ajouter des images de secours s'il n'y a pas de support de navigateur. Pour cette leçon, passez au numéro 6, qui est des outils de conversion et des images de secours. Ouvrez comme jamais la page Index, et puis nous pouvons ouvrir cela à l'intérieur du navigateur, placer ceci dans un nouvel onglet. Je vais commencer par notre page HTML vierge. À l'intérieur, j'ai fourni une liste de certains des types d'images courants, nous avons le WebP, nous avons le SVG, PNG, JPEG, et aussi GIF. Encore une fois, pour basculer entre différents types d'images, les éléments d'image qu'il a sont couverts par [inaudible] énumèrent diverses images avec différents formats. Toujours fournir les éléments source comme nous l'avons fait précédemment, mais cette fois, plutôt que de travailler avec la taille, nous avons déclaré que le type de fichier, navigateur ou l'appareil vérifiera alors si ce type de fichier est pris en charge, et sinon, il sera ignoré. En utilisant ces formats d'image que nous avons ici, commençons par notre exemple. Nous pouvons utiliser l'élément image comme wrapper, pour cet exemple plus dans les images, nous avons un JPEG, et une version WebP de la même image, alors ajoutons ceux-ci dans. Nous avons besoin d'une source, puis ici, nous ajoutons les attributs de type. Nous pouvons ensuite utiliser l'un de ces utilisés pour les deux, je vais aller pour la version WebP, qui est image/webp. Ensuite, nous ajoutons les sources pointent vers l'image WebP. Après cela, nous devons également prendre soin de notre retour, qui est notre bridge.jpg, ajouter les éléments d'image. Ceci est dans les images et le bridge.jpg. Si WebP est pris en charge, cette image sera sélectionnée. Sinon, il retombera facilement à l'intérieur des éléments de l'image. Essayons ceci, actualisez le navigateur. Nous pouvons voir à l'intérieur des outils de développement que mon navigateur a choisi la version WebP. Pour moi, ce serait un avantage car cela se chargera plus rapidement. Si nous regardons le bridge.jpg, nous pouvons voir en bas, que c'est environ 134 kilo-octets. Si nous passons à la version WebP, cela est autour de 1-10 kilo-octets, donc cela entraînera un enregistrement de fichier et mes images se téléchargeront plus rapidement. C' est vraiment utile, mais lorsque nous recherchons des images à utiliser dans nos projets, nous n'avons pas toujours la possibilité de télécharger nos images dans différents formats de fichiers. C' est bien parce qu'il y a quelques outils pour nous aider à convertir, et aussi compresser nos images. J' utilise une marque, et cela a quelques options intégrées lors de l'ouverture des images. Si nous passons au numéro six, sur
lequel nous sommes actuellement, insérez des images et double-cliquez sur l'une de ces images. Cela s'ouvrira alors à l'intérieur de l'aperçu. Ne vous inquiétez pas si vous n'utilisez pas de marque si vous utilisez Windows ou Linux, votre programme par défaut qui ouvre l'image peut également avoir certaines de ces options intégrées. Si ce n'est pas le cas, nous allons jeter un oeil à d'autres options dans un instant. Comme la plupart des symboles, nous pouvons aller dans les outils et ajuster la taille. Nous pouvons réduire la taille du fichier si cette image particulière est un peu trop grande, et nous pouvons voir que la taille du fichier résultant a été réduite. Ce qui change à 300. Vous pouvez voir que cela a été réduit à 50 kilo-octets, ce qui change à 300. Il est maintenant à 30 kilo-octets. C' est plus basique, nous pouvons simplement faire quelque chose comme ça pour réduire la taille du fichier si le téléchargement initial est trop grand. La plupart des programmes nous permettent également d'exporter les images dans différents formats. Beaucoup d'entre eux ont généralement une fonction d'exportation sur laquelle nous pouvons cliquer et nous pouvons souvent changer le format de l'image, donc nous voyons que la taille du fichier est 157 ici, ce qui change à 2.000. C' est 216 PNG, c'est un peu plus grand, et aussi les tailles de fichiers qui supportent la compression, nous pouvons également ajuster la qualité aussi. Comme la plupart des choses le sont, il y a aussi beaucoup d'autres outils que vous pouvez télécharger. Vous pouvez trouver une énorme quantité disponible si vous recherchez App Stores ou en ligne. Un outil populaire faible est celui appelé ImageOptim. Ceci est disponible sur imageoptim.com. Ce logiciel particulier est disponible pour Mac et Linux, que vous pouvez télécharger. Il s'agit d'une collection d'outils qui se combinent pour éliminer les déchets inutiles de nos images. Voici une liste d'outils qu'il utilise, et tout est gratuit et open-source, donc il n'y a pas de frais pour l'utiliser. Il applique également des techniques de compression, et il y a aussi une version en ligne sur laquelle nous pouvons cliquer ici. Ils facturent ce service particulier. Et un autre est tinypng.com. Contrairement à ImageOptim, il s'agit d'un outil de compression en ligne gratuit. Vous pouvez le trouver sur tinypng.com. Malgré le nom, cela accepte également les images JPEG aussi. Si nous pouvons simplement glisser-déposer dans cette section juste ici, cet autre service de glisser-déposer basé sur le web est compressor.io, avec PNG et JPEG. Cela accepte également GIF, SVG, ainsi que les nouveaux types WebP. Vous pouvez voir que sur le fond ici, nous pouvons accepter les types de compression avec perte ou perte. Aussi un paramètre client aussi où nous pouvons redimensionner et également définir la qualité de l'image aussi. Un autre optimiseur et compresseur est Img2go, disponible sur img2go.com. Cet outil nous permet également de convertir le type d'image à un autre format. Fonctionne avec PNG, GIF, JPEG, et aussi des vecteurs tels que SVG. Tout comme les autres, nous pouvons également
glisser-déposer et nous aurons également quelques options pour créer un lien
vers Dropbox ou Google Drive, une URL dédiée. Il y a aussi beaucoup d'options pour définir la qualité et aussi la taille de l'image. Ce ne sont là que quelques-uns des nombreux outils disponibles à télécharger, ainsi que quelques versions en ligne aussi. Nous ne devrions jamais être coincés avec le mauvais type d'image pour notre projet.
11. Utiliser un CDN: Toute cette manipulation d'image et le choix des images correctes pour notre projet peuvent vraiment être beaucoup de travail supplémentaire, surtout au fur et à mesure que nos applications se développent. C' est pourquoi dans cette vidéo, je vais vous montrer un excellent service qui est également gratuit, qui peut vraiment aider avec cela. Nous pouvons utiliser des services tels que Cloudinary, qui est disponible sur cloudinary.com. Cela va nous permettre de nous occuper de beaucoup de travail pour nous. Cloudinary est utilisé pour stocker et héberger nos images et aussi la vidéo si nécessaire. Une fois téléchargé, nous obtenons une URL que nous pouvons lier à l'intérieur de notre HTML. Non seulement cela héberge nos photos d'images, mais a également beaucoup d'autres avantages aussi. Tous ces avantages, il est vraiment facile d'utiliser CDN. CDN est un réseau de diffusion de contenu et c'est un moyen d'avoir notre contenu, qui dans notre cas est nos images disponibles dans
le monde entier sur plusieurs serveurs ou centres de données. Ces centres de données multiples signifient que nos images sont hébergées plus près de l'utilisateur, plutôt que de les avoir dans un seul endroit central, tout le monde dans le monde. Cela peut vraiment accélérer la livraison de nos images. En outre, s'il y a un problème avec le serveur, il peut facilement être basculé vers un nouveau pour éviter tout temps d'arrêt. Non seulement il sert l'image à partir d'un centre de données local, mais il peut également fournir une version optimisée. Nous avons seulement besoin de télécharger une seule image sur Cloudinary et nous pouvons la convertir et la renvoyer dans un format de fichier optimisé, y compris des choses telles que WebP et JPEG 2000, bien
sûr, si le navigateur le supporte. De même pour la taille et la qualité aussi, nous pouvons configurer ces images pour être transformées en certaines tailles ou lui permettre de choisir des photos. Évidemment, nous devons d'abord télécharger une image qui est assez grande. Notre plus grand cas d'utilisation, car nous ne voulons pas étirer une image trop grande et perdre toute qualité. Si vous n'avez pas utilisé Cloudinary auparavant, allez de l'avant et créez un nouveau compte qui est gratuit et dispose d'une énorme franchise d'utilisation d'image gratuite. Il y a aussi une version payante, mais le compte gratuit inclut le stockage de milliers d'images. Vous ne devriez pas avoir de soucis à moins que votre projet ne croisse à un niveau énorme. J' ai déjà un compte puisque je l'utilise assez régulièrement. Je vais ouvrir ce nouvel onglet. Ensuite, amenez-le dans la zone du tableau de bord de l'utilisateur pour cette leçon, passez au numéro 7, qui utilise un CDN. J' ai déjà cela ouvert et également ouvert dans un nouvel onglet de navigateur. C' est juste un fichier HTML vide. A l'intérieur du dossier des images, nous avons juste cette seule image, qui mesure 5 311 pixels par trois cinq, quatre cinq de large. Ce qui signifie que c'est une image assez grande, mais cette fois nous ne allons pas la lier directement à cette image. Au lieu de cela, nous pouvons télécharger cette image sur Cloudinary ,
puis sur le lien Cloudinary à l'intérieur de notre index. Pour cela, nous allons dans notre dossier de projet, dans le numéro 7 et dans le dossier images, et plus dans le tableau de bord Cloudinary, que vous serez redirigé lorsque vous êtes connecté. Tout ce que nous avons à faire est de cliquer sur la médiathèque. Ensuite, nous pouvons glisser et déposer une nouvelle image que vous voulez télécharger. Déposez ceci à l'intérieur ici, et donnez juste quelques secondes à télécharger. On y va. Voilà notre nouvelle image. Si nous survolons cela, nous pouvons voir une URL que nous pouvons copier avec ce lien juste ici. Si nous double-cliquez sur cette image, nous sommes pris en compte dans les détails où nous pouvons ajouter des éléments tels que des balises. Nous pouvons ajouter des métadonnées. Nous pouvons voir n'importe quel historique de révision. Nous pouvons voir les données du fichier telles que le type de fichier, la taille, et aussi les dimensions. Ensuite, en bas, nous avons ce qu'on appelle des transformations. Actuellement, nous sommes sur l'original et c'est l'URL de cette image particulière. Cloudinary a automatiquement ajouté quelques transformations pour améliorer notre image, pour changer la taille, pour se transformer en miniature. On peut avoir une bannière, on peut avoir une version filigrane. Chaque fois que je clique sur l'une de ces images, nous avons une nouvelle URL que nous pouvons utiliser à l'intérieur de nos projets. Avec ces valeurs par défaut, nous pouvons également créer nos propres transformations en cliquant sur ce bouton de transformation. De là, nous pouvons recadrer et redimensionner nos images. Nous pouvons changer le format de l'image, nous avons une option pour toutes ces différentes extensions. Nous pouvons ajuster la qualité avec ce menu déroulant et ce curseur. Nous pouvons ajouter des rayons de coin, nous pouvons faire pivoter, nous pouvons ajouter beaucoup d'effets différents. Chaque fois que nous modifions cette image, nous recevons une nouvelle URL que nous pouvons copier et utiliser à l'intérieur de notre projet. Chaque fois que nous modifions nos images, permettez-moi de la fermer et de revenir à l'original. Chaque fois que nous modifions l'une de nos images comme cliquer sur l'un de ces presets ou même sur nos propres transformations, nous recevons alors une nouvelle URL qui a des paramètres différents. Ici, nous pouvons voir ces paramètres orange sont ajoutés et séparés par des virgules. Si nous cliquons sur le cercle. Nous pouvons en voir différentes ici et cela affectera des choses telles que la taille, le rayon, la bordure, la couleur. C' est notre façon de dire à Cloudinary quelle image nous voulons récupérer. Cet ID d'image est toujours le même à la fin, mais nous allons simplement ajouter ces différents paramètres à l'intérieur de l'URL. Passons à notre projet et nous pouvons essayer ça. Tout d'abord, si nous cliquons sur l'original, puis nous pouvons sélectionner cette URL. Nous allons juste copier ce qu'il contient juste ici dans nos projets. Ce que nous allons d'abord faire est de définir l'image à 100 pour cent de la largeur des navigateurs avec les balises de style. Les éléments de l'image, largeur maximale de 100 pour cent. Ensuite, vers le bas dans la section du corps, nous pouvons créer une image avec cette URL aussi bien. Déréglementer fait qui était le lien que nous venons de copier. Tout ce que nous devons faire est de coller dans les attributs source, fermer la barre latérale, donner une sauvegarde, rafraîchir le navigateur. Nous pouvons voir puisque c'est une image assez grande, il a fallu un certain temps pour télécharger. Cette image est beaucoup trop grande pour la taille actuelle du navigateur, mais nous allons regarder comment ajuster cela en un instant. Ensuite, nous pouvons ajuster la rotation ou l'angle de cette image. Nous le faisons juste après cette section de téléchargement. Si nous disons barre oblique avant, disons le trait de soulignement d'angle alpha, puis 90 pour un 90 degrés. Tout cela vient avant l'ID de l'image, qui est à la toute fin et aussi le nom de l'image. Sauvegardez ça. Rechargez et maintenant nous devrions tirer dans une version à 90 degrés de notre image existante. Bien sûr, c'est beaucoup trop grand, supprime l'angle et on peut définir une taille fixe en pixels avec w puis soulignement suivi par les valeurs de pixel telles que 200. Rafraîchir. Maintenant, cela tire une image qui est vraiment petite et nous pouvons voir que le temps de téléchargement est beaucoup plus rapide, mais comme nous l'avons appris dans les vidéos précédentes, une taille de pixel n'est pas toujours le meilleur choix. Ce que nous allons faire est de définir la largeur pour être égale à, aussi, ce qui va permettre à Cloudinary de choisir la meilleure image de taille pour le navigateur. Ici, nous voyons qu'il a choisi une version de 3,4 mégaoctet. Si on va à l'original. L' original est d'environ 4.2, donc il a choisi une taille plus petite qui convient à ce navigateur. Nous pouvons également modifier le format par défaut de cette image en utilisant f puis soulignement, puis en sélectionnant l'un des formats autorisés par Cloudinary. Je vais aller pour WebP et aussi pour cela, nous pouvons supprimer l'extension the.jpeg du navigateur et actualiser. Nous voyons maintenant que le type d'image est WebP. Tout comme avec la taille, nous pouvons également permettre à Cloudinary de définir
automatiquement les photos de format correct. Nous pourrions le faire avec f auto, et si nous le faisons, nous voyons que Cloudinary choisit également un format WebP photos, car cela est pris en charge à l'intérieur du navigateur Chrome. Il y a aussi beaucoup d'autres options que nous pouvons ajouter à l'intérieur ici. Nous pouvons aussi les combiner, ou nous pourrions également générer ces URL nous-mêmes à l'intérieur de Cloudinary en utilisant ces transformations. Ceci est juste une vue d'ensemble d'une utilisation de base avec Cloudinary. Mais il a beaucoup plus de fonctionnalités, y compris l'ajout de préréglages qui
configurent ou transforment automatiquement nos images chaque fois que nous en téléchargeons de nouvelles. Il existe une API de développeur pour connecter vos projets. Cela vous permettra de faire automatiquement des choses comme ajouter des téléchargements de nouvelles. Vous pouvez inclure la vidéo. Je recommande de regarder à travers certaines de ces fonctionnalités. Aussi la documentation si vous prévoyez d'utiliser Cloudinary pour un projet. J' utilise également Cloudinary pour mes propres projets, et je le trouve très fiable. De plus, même si cet exemple utilise simplement les éléments d'image de base, nous pouvons également combiner ces images hébergées avec [inaudible] et aussi l'élément lanceur aussi. Dans la prochaine vidéo, nous allons découvrir une autre façon de réduire le temps de chargement de la page en configurant le chargement paresseux.
12. Chargement paresseux: Nous avons une page web qui a des images. Parfois, lorsque la page se charge pour la première fois, toutes ces images
ne sont pas visibles. Par exemple, si nous avons des images tout en bas de notre page, nous ne devrions pas vraiment nous attendre à ce que l'utilisateur attende que ces images soient téléchargées avant que la page ne se charge initialement. Pour aider à cela, la technique finale que je veux vous montrer est appelée chargement paresseux. C' est une façon de retarder ou de différer le chargement des images qui n'est pas critique. Il y a souvent des images que l'utilisateur ne
voit pas initialement et doit faire défiler vers le bas pour passer à la vue. Un exemple de ceci est quelque chose comme Pinterest. Une page peut avoir des milliers d'images et le chargement de toutes ces images à la fois prendrait beaucoup de temps. Il est donc logique de ne charger que ce que l'utilisateur peut voir initialement, puis de charger plus d'images à mesure que l'utilisateur fait défiler. Nous pouvons même ajouter un contenu d'espace réservé simple ou léger pendant le téléchargement de ces images. Le chargement paresseux n'est pas seulement pour les images non plus. Il existe aussi dans d'autres parties du développement web. Nous pouvons charger paresseux à peu près n'importe quel type de contenu en fonction des langues, des bibliothèques ou des frameworks que nous utilisons. Nous pouvons charger paresseux flux d'actualités, articles, flux de médias
sociaux, et généralement tout autre type de contenu que vous voulez. Il existe plusieurs façons de le faire, y compris en utilisant JavaScript. Mais ici, je vais vous montrer un moyen vraiment facile d'
ajouter le chargement paresseux nativement à travers cette interaction, dirigez-vous vers le numéro huit, et ouvrez la page d'index. Ensuite, collez ceci dans un nouvel onglet à l'intérieur du navigateur. Nous pouvons voir que nous avons des images de chien chargées juste ici et nous n'avons pas d'images stockées dans ce dossier de projet. Au lieu de cela, ils sont tous liés à des images externes. Nous avons 10 images différentes ici. Comme prévu, toutes les 10 images sont chargées en même temps,
même si beaucoup d'entre elles ne sont pas en vue lorsque nous chargeons la page pour la première fois, j'ai une assez bonne vitesse de connexion, mais beaucoup d'utilisateurs ne le font pas. Les utilisateurs pourraient également être sur un appareil mobile plus lent et s'il y avait beaucoup d'images comme
celle-ci, cela peut vraiment ralentir les choses. Pour retarder le chargement de nos images qui sont en dehors de la clôture ou de la zone visible, nous pouvons l'ajouter à notre élément image, un attribut de chargement, puis le définir pour être paresseux. Actuellement, nous pouvons voir environ trois images à l'intérieur de la vue. Donc nous pouvons laisser les trois premières images à charger tout de suite. Maintenant, si nous descendons à l'image numéro quatre, nous pouvons ajouter les attributs de chargement et définir cela égal à paresseux. Copiez ceci et nous pouvons coller ceci dans toutes les autres images ci-dessous. Assurez-vous qu'il est dans l'image numéro quatre jusqu'à 10. Allons dans le navigateur et voyons ce qui se passe. Si nous actualisons, nous pouvons toujours voir nos trois premières images, mais toutes les images sont toujours en cours de téléchargement en même temps. n'y a pas de changement car tant que ces images ne sont pas chargées dans
le navigateur, le navigateur ne connaîtra pas la hauteur et la largeur de chaque image. Donc, s'il n'a pas la hauteur et la largeur, il ne peut pas dire quelles images seront en vue et celles qui seront en dessous du pli. Le pli est la partie inférieure du navigateur. Avant de faire défiler vers le bas. Pour corriger cela, nous pouvons ajouter quelques CSS simples dans la section de tête, placer dans la section de style. Pour les images, nous allons juste mettre en place une largeur standard pour tous ces 600 pixels et aussi la hauteur de 400 pixels aussi. Si vous le souhaitez, vous pouvez également ajouter la largeur et la hauteur de chaque image individuelle. Mais je vais juste garder cela simple pour cet exemple. Essayons ça. Jusqu' en haut de la page et actualisez. Maintenant, nous ne voyons que six images se chargeant dans les outils de développement plutôt que les 10 que nous avions à l'origine. Il s'agit d'une sauvegarde de quatre images, mais pourquoi faisons-nous
télécharger six images alors que nous ne pouvons en voir qu'environ trois à l'intérieur de la fenêtre ? Eh bien, c'est parce que j'utilise Google Chrome et Chrome a décidé de
charger quelques images supplémentaires que je m'attends à ce que nous allons avoir besoin assez bientôt. Nous pouvons voir comment cela réagit dans différents navigateurs en copiant ce lien, je vais ouvrir Firefox. Collez ceci dans. Nous voyons d'abord le même nombre d'images. Ouvrez les outils de développement, nous devons cliquer avec le bouton droit de la souris et inspecter l'élément. Nous voyons nos trois premières images juste ici. Si nous allons dans le réseau et rafraîchir, Firefox ne choisira que les quatre premières images, sorte qu'il ne pré-charge pas à l'avance autant d'images que Chrome fait. Maintenant, si nous fermons Firefox, et revenons à Chrome. Si nous commençons à faire défiler vers le bas, et nous pouvons maintenant voir que nous faisons défiler la page que des images supplémentaires sont chargées à mesure que nous approchons d'en avoir besoin. Comme je l'ai mentionné précédemment, c'est parce que Chrome va
les prérécupérer plus tôt afin qu'ils soient prêts pour l'utilisateur. Combien de temps dépend de la vitesse de connexion et aussi du type d'image. C' est ce que nous avons vu avec Firefox, il varie également selon le navigateur et toutes ces quatre images supplémentaires ont maintenant été enregistrées à partir du temps de chargement initial de la page, résultant en une meilleure expérience. S' il y a une image que vous voulez charger immédiatement, qu'elle
soit sous le pli ou non, nous pouvons définir le chargement pour être impatient. Si nous descendons à la toute dernière image et définissons cela sur impatient, jusqu'au tout haut de la page et rafraîchir. Nous voyons que maintenant, plutôt que les six premières images, nous avons maintenant la septième image chargée même si elle n'est pas en vue. Comme vous pouvez l'imaginer, ces attributs paresseux ne peuvent qu'aider les choses encore plus loin car nous avons plus d'images sur nos pages et surtout si l'utilisateur doit faire défiler vers le bas pour révéler plus de contenu. Nous venons de voir que cet attribut de chargement a
parfaitement fonctionné dans ma version de Chrome et Firefox. Mais le support a encore un peu de rattrapage à faire dans certains des navigateurs. Faisons une recherche sur caniuse.com pour les attributs de chargement. C' est un que j'ai besoin que vous voyiez, qui est l'attribut de chargement paresseux pour les images et les iframes. Donc c'est trouver Edge. Avec Firefox, nous n'avons qu'un support partiel et c'est juste parce qu' il ne supporte que les images plutôt que les iframes. C' est trouver Chrome ou Safari. Ce n'est pas quelque chose qui est activé par défaut, mais nous pouvons l'activer dans les paramètres du navigateur. En outre, cet attribut de chargement peut également être utilisé avec l'élément lanceur et nous avons seulement besoin de l'ajouter aux éléments d'image de secours plutôt que toutes les sources pour qu'il prenne effet. Donc, si nous retournons dans notre dossier de projet et allons dans l'une de ces pages d'index, nous avons seulement besoin d'ajouter les attributs de chargement à cet élément d'image plutôt que chacune de ces sources. Avec tout cela à l'esprit, nous avons maintenant un exemple juste ici où nous faisons défiler vers le bas et les images vont charger paresseux. Mais que se passe-t-il si nous faisons défiler plus vite que les images peuvent être téléchargées ? Ce n'est pas un problème pour ce petit exemple où si nous avions des milliers d'images et une vitesse de connexion vraiment lente, nous pouvons commencer à faire défiler plus vite que les images peuvent être téléchargées. Pour ce problème, il y a des approches différentes que nous pouvons adopter. Nous pourrions également fournir des images d'espace réservé de moindre qualité, qui vont se télécharger plus rapidement et nous pouvons configurer cela avec l'élément image. Nous pourrions également avoir une seule image d'espace réservé générique, nous
utilisons en place jusqu'à ce que l'image soit téléchargée. Ou même des choses comme une couleur de fond solide en utilisant du CSS. Mais est aussi des bibliothèques JavaScript pour aider avec cela aussi et aussi des plug-ins si vous utilisiez WordPress ou tout autre système de gestion de contenu. L' un des plus populaires est appelé tailles paresseuses et cela nous
permet d'utiliser JavaScript pour appliquer un chargement paresseux rapide et performant. Il utilise également les éléments d'image et le jeu source pour créer des images réactives. Il est convivial SEO et charge également intelligemment des images en fonction du navigateur, la position de défilement, et aussi de la connexion réseau. Donc, il peut vraiment gérer beaucoup de travail dur pour nous. En plus de cela, il nous permet également d'utiliser des images de faible qualité ou floues comme espaces réservés. Je ne vais pas entrer dans la configuration et l'installation, mais c'est assez simple de commencer avec. Nous faisons défiler vers le bas jusqu'à la section de procédure. Tout ce que nous avons à faire est de télécharger le script et de le lier à l'intérieur de notre HTML. Ou nous pourrions également l'installer via NPM si vous l'utilisez sur un projet de nœud. n'y a pas de configuration nécessaire, tout ce que nous avons à faire est de configurer nos images, comme les exemples que vous voyez ici si vous
utilisez des options réactives ou non réactives. Nous pouvons également l'utiliser avec un iframe si nécessaire. J' espère que cette classe vous a donné quelque chose à penser et aussi quelques techniques
utiles que vous pouvez utiliser dans vos projets futurs ou existants. Ensuite, nous allons parler d'un petit défi à mettre en place afin que nous puissions tester toutes ces nouvelles compétences.
13. Projet de cours: Quand nous apprenions, la meilleure façon est de mettre les choses en pratique. Si vous avez déjà un projet, vous pouvez appliquer ces techniques à, alors c'est génial ou vous pouvez avoir un projet à venir où vous pouvez essayer les choses. J' ai également fourni un modèle de galerie d'images de base avec ce cours. C' est à l'intérieur du dossier numéro 9, et ici nous avons cette page d'index et aussi une seule image. Ce n'est qu'une seule image pour vous faire entrer et vous
devrez télécharger d'autres images à utiliser pour ce projet. Quelque chose comme unsplash.com est idéal. C' est juste une page d'index assez basique. Tout ce que nous avons à l'intérieur de la section du corps est une seule section, puis plusieurs éléments d'image, et nous allons configurer cela juste au-dessus dans une section de style sera affiché sous forme de grille. Si nous ouvrons cela dans le navigateur, nous pouvons voir notre grille juste ici. Ce que j'aimerais que vous fassiez pour ce défi, c'est
de télécharger de nouvelles images à utiliser pour cette galerie. Vous pouvez ensuite optimiser et essayer toutes les techniques que vous avez appris pour les charger efficacement dans le navigateur. n'y a pas de bonne ou mauvaise façon de le faire. L' idée est juste d'essayer les choses, d'optimiser les images, qui utilisent des tailles de fichier et rendent généralement le chargement des images plus efficace. Vous pouvez le faire par lots, appliquer les modifications, enregistrer vos résultats, puis répéter jusqu'à ce que vous soyez satisfait des résultats. Bonne chance avec ce projet. J' ai hâte de voir ce que vous créez.
14. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et aussi de me suivre pour toute mise à jour, et aussi d'être informé de tout nouveau cours à mesure qu'ils deviennent disponibles. Alors merci encore une fois. Bonne chance et j'espère que je te reverrai dans un futur cours.