Réaliser l'audit d'un site web

Examiner les images réactives

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les images d'un site peuvent aussi être réactives. Vous allez alors vérifier si le site propose des images de ce type.
06:57

Transcription

Nous allons maintenant nous pencher sur le cas des images. Les images font partie des éléments les plus lourds d'un site internet. Il est donc vital, et très important, d'afficher la bonne image pour le bon périphérique. Imaginez-vous, en cas d'usage de mobilité, dans le métro, par exemple, avec une connexion en Edge, de devoir charger, pour un site d'actualités, dont le contenu essentiel à vos yeux est en principe le texte, de devoir charger une image qui, elle, est dimensionnée pour un ordinateur de bureau, mais tout simplement affichée en plus petit. Cette image va peser entre 300, 400, 500, 800 kilooctets, et peut prendre très longtemps à s'afficher sur votre mobile. Vous avez donc plutôt envie que le site vous charge une image adaptée à votre contexte d'usage du site. Dans ce cas, nous allons vérifier si le site que nous auditons est capable de générer des images à des tailles différentes et ne se contente pas d'afficher juste une grande image en petit. Je bascule sur le site. J'ai affiché une actualité qui contient un grand bandeau tout en haut. Mon premier test va consister à redimensionner ma page, et à recharger la page avec F5. Et je vais voir si l'image qui s'affiche est différente. Bon, là, à première vue, c'est la même image. Et je ne sais pas vraiment si c'est une version plus petite de cette image qui a été chargée, ou si c'est bien la grande image d'origine affichée en plus petit. Donc, pour aller plus loin, je vais devoir inspecter le code. Donc, clic droit. Inspecter. Et je vais me permettre maintenant d'élargir la page puisque agrandir la page ne va pas recharger mon image. Ici, j'ai le chemin vers mon image. Et donc, api-site.paris.fr/images et à la fin j'ai un « XLarge ». Je vais clic droit ouvrir dans un nouvel onglet et charger mon image. Ici, tout en haut, mon onglet m'indique la largeur et la hauteur de mon image. Donc 1390 par 326. Maintenant, que faire ? Puisque, visiblement, XLarge indique que l'image est dans sa taille maximum. Quand je suis en petit et que je recharge le site, j'ai toujours XLarge. Si je repasse sur le site en taille complète, que je recharge. j'ai toujours le même chemin. Donc visiblement, il n'y a pas de différence entre l'affichage sur un petit écran et l'affichage sur un mobile. Maintenant, il faut être vigilants, parce que les techniques d'image responsive se basent souvent sur la résolution de l'écran, et non pas sur la taille du navigateur. En l'état actuel, je suis donc pas en mesure de vérifier si l'image change en fonction de la résolution de l'écran. Le point qui me laisse à penser que le site est capable de générer des images adaptatives, responsives, c'est tout de même le fait, déjà, que les images soient générées par un appel externe à un site qui commence par api. C'est plutôt bon signe, puisque apparemment une fonctionnalité est dédiée à la génération des images. Alors, j'ai essayé de modifier l'URL. Rien n'a changé, puisque j'ai toujours la même taille. Par contre, j'ai testé de passer en paramètre une taille en largeur, par exemple. Et là, visiblement, mon image est bien régénérée dans une taille adaptée à mon paramètre. J'ai donc bien l'impression que le site est capable e générer des images d'un poids différent et donc adaptées au périphérique cible. Pour ceux qui seraient encore un peu sceptiques, je vais inspecter tout de même mon image. Aller dans l'onglet Network, recharger la page. Et là, j'ai bien le poids de ma page, donc 9,2 kilobytes. Si je change ici la taille, et je rafraichis, 150 kilobytes. Donc j'ai bien un changement de poids de mon média. Maintenant, si j'essaie d'aller un petit peu plus loin, je vais tenter de trouver s'il y a bien un élément qui est capable de détecter la résolution de mon écran, et de passer en paramètre à l'API une taille d'image en fonction du device. Pour cela, je vais recharger le site et je vais chercher le paramètre de largeur qui était passé à l'image tout à l'heure. Donc c'était XLarge. OK. Donc je retrouve bien mon paramètre. Maintenant, je vais voir si il y a d'autres éléments qui sont chargés par le site api-site.paris.fr. Donc je vais taper « api site ». Je vais recharger ma page. Je ne vois pas d'autre élément chargé pour le moment. Je vais tout de même recharger la page d'accueil puisque sur ma page actuelle, je ne vois qu'une seule image. C'est peut-être la raison pour laquelle je ne trouve pas d'autres éléments chargés par le site api-paris. Donc je recharge la page d'accueil, cette fois-ci. Qui devrait contenir plusieurs images, voilà, c'est bon, et je vais refaire ma recherche. Je recharge. Et là j'ai bien d'autres paramètres, visiblement, j'ai bien w égal small. Et donc ça c'est très intéressant. Ça veut dire qu'il existe un paramètre, que je ne connaissais pas, puisque j'audite un site sans avoir d'accès au code source. Et donc il existe un paramètre qui me permet de changer l'image, en plus de la taille en dur qui fonctionnait tout à l'heure. Je vais maintenant faire un petit test. Je vais donc double-cliquer sur cette image et je vais passer en paramètre XLarge. Et donc ça fonctionne bien, mon image est bien régénérée. J'ai donc trouvé le mécanisme qui permet, via ce site API, de générer différents formats d'image. On peut donc en conclure que le site audité a bien des capacités d'image adaptative qui peuvent se charger en fonction du contexte, et donc optimiser le chargement de la page. Je vais retourner sur mon document d'audit. Et je vais donc modifier la note globale responsive. Alors, c'est plutôt intéressant, quand-même un site qui est capable de faire ça, tout le monde ne gère pas ce genre de fonctionnalité. Je vais donc augmenter la note, qui à mon sens mérite, à minimum, je dirais sept sur dix, maintenant que nous avons analysé aussi la partie images. J'augmente la note parce que, selon moi, c'est bien cette capacité à gérer des images responsives qui est la plus importante. En effet, comme dit en début de la vidéo à propos des contenus, les contenus ne pèsent que très peu. Et c'est bien les images qu'il faut optimiser si on veut améliorer le temps de chargement.

Réaliser l'audit d'un site web

Évaluez la qualité du travail de développement et d'intégration de votre site Internet. Détectez les éventuels problèmes de performance, de compatibilité, etc.

1h47 (24 vidéos)
Aucun commentaire n´est disponible actuellement
 

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 !