Découvrir le design responsive

Rendre les images responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en œuvre les principales techniques permettant de rendre les images responsive, tout en garantissant un chargement rapide.

Transcription

Examinons maintenant la question des images responsives, et puis surtout de comment nous allons pouvoir maintenir la qualité d'affichage des images, tout en respectant des temps de chargement qui ne vont pas être excessifs. C'est un problème qui existe depuis maintenant quelques années, et qui n'est pas encore en passe d'être totalement résolu. Il est effectivement très facile de pouvoir faire varier des mises en page en fonction des tailles des écrans, nous l'avons vu par exemple avec des media queries, et puis des points de rupture, mais en ce qui concerne les images, la problématique est différente. À partir du moment où nous allons utiliser une image de grande taille sur un petit écran, cette même image peut être considérée sur un écran d'ordinateur comme étant affichée en miniature. Il va donc falloir que l'on règle les différents problèmes, et que l'on puisse afficher une image à la taille adaptée à l'écran sur lequel elle est visionnée. On pourrait considérer que c'est un problème qui est très facile, et qu'il suffit, au lieu de saisir des valeurs absolues, de travailler avec des mesures relatives. Si on travaille avec des dimensions relatives, et des hauteurs en pixels, on va préciser des hauteurs ou des largeurs en pourcentage. Et l'on va décréter que telle image va être affichée à 100 % de la largeur du conteneur à l'intérieur duquel elle se trouve. On peut également travailler avec une largeur maximale. Au lieu de définir la largeur de l'image, on va définir la largeur maximale de l'image. L'image va donc s'afficher avec une largeur maximale, ici de 100 % du conteneur à l'intérieur duquel elle va se trouver. Et l'on pourrait considérer que ces solutions sont satisfaisantes. Toutefois, il y a quand même des problèmes. Premièrement, l'attribut max-width n'est pas reconnu par tous les navigateurs, et puis surtout il y a un problème très clair de chargement, puisque l'on va charger quel que soit le périphérique sur lequel on va visionner l'image, une image qui va Donc les temps de chargement vont être ralentis. Il y a d'autres solutions. On pourrait considérer qu'il serait intéressant de travailler les images en fond, et à l'aide d'instructions CSS. C'est valable pour des images qui vont être par exemple à vocation uniquement décoratives. On peut par exemple définir ici que pour des écrans qui sont inférieurs à une largeur de 480 pixels, on va créer un élément, et que cet élément en fond va charger une image que nous aurons préparée. Cette image aura la taille qui sera requise pour s'afficher sur cet écran. Et puis nous aurons préparé d'autres images. Et pour les écrans entre 480 pixels et 768 pixels que nous allons définir ici au niveau de notre media query, nous allons demander à ce que cette div aille chercher une autre image. Nous aurons préparé une image qui est une image de taille moyenne. Et nous aurons enfin préparé une troisième image pour les grands écrans, supérieure à 769 pixels, et ici la div ira chercher une autre image qui sera l'image de grande taille. Nous avons donc ici travaillé 3 images, et l'on a demandé à ce que le serveur serve l'image qui soit adaptée à la taille de l'écran. Encore une fois, on pourrait considérer que ce système est un système très efficace. Et c'est vrai, mais il pose également des problèmes. Et le problème principal, vous l'avez bien compris, c'est que ces images ne sont pas intégrées dans le flux HTML, puisqu'il s'agit d'images de fond qui sont en background, et ça peut donc poser des problèmes d'accessibilité, et également d'autres problèmes liés à l'optimisation pour les moteurs de recherche. Donc si on a besoin d'avoir des images intégrées dans le flux HTML, cette solution ne va pas bien fonctionner. Et d'autre part, il y a des téléphones portables, des anciens mobiles, pour lesquels il va y avoir un téléchargement systématique de toutes les images. C'est-à-dire que lorsque nous nous imaginons que nous allons charger la bonne image appropriée, en fait sur ces anciens appareils, le navigateur va charger les 3 images Et donc nous aurons perdu le bénéfice de l'accélération du temps de chargement. Il y a également des solutions basées sur le JavaScript, où le script va aller examiner le contexte, et ensuite va charger l'image adaptée à la largeur de l'écran. Ces scripts présentent un certain nombre d'inconvénients, ils sont quand même néanmoins très pratiques. C'est des solutions qui sont quand même assez complexes à déployer. Les temps de chargement peuvent être plus longs parce que bien entendu, il va falloir charger les scripts, et puis ensuite, parfois, ils sont peu adaptés au préchargement sur certains navigateurs. Vous pouvez, en ce qui concerne ces scripts, vous intéresser à Picturefill, qui est un script assez récent, qui utilise les dernières technologies, que l'on peut sur GitHub pour l'exploiter. Vous pouvez également consulter le mode d'emploi, avec des explications qui sont extrêmement complètes. Vous avez ici également le téléchargement de ces JavaScript. Et vous avez toutes les explications détaillées sur la manière de le mettre en œuvre, et de manière également à pouvoir tester ce qui se passe sur les différentes images en fonction de vos points de rupture. Reste que le plus gros problème pour toutes ces techniques va rester le chargement des pages par les navigateurs. Les développeurs travaillent donc d'arrache-pied pour trouver des nouvelles solutions, et nous allons voir dans la vidéo suivante quelques-unes de ces nouvelles solutions émergentes. au lieu de préciser des largeurs que nous avons préparées, la petite, la moyenne et la grande.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2017
Durée :2h02 (25 vidéos)

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 !