\n Il fut un temps o\u00f9 vous pouviez faire la diff\u00e9rence en toute confiance entre une page Web de bureau et une page Web mobile. \u00c0 tel point, en fait, que toute une industrie s’est d\u00e9velopp\u00e9e autour de la r\u00e9orientation des sites de bureau pour les mobiles.\n<\/p>\n
\n Pendant un certain temps, vous n’\u00e9tiez personne si vous n’aviez pas de site mobile distinct sur un domaine distinct. Puis les choses ont commenc\u00e9 \u00e0 changer.\n<\/p>\n
\n Les \u00e9crans mobiles se sont am\u00e9lior\u00e9s au-del\u00e0 de toute reconnaissance. Les navigateurs mobiles aussi. Les tablettes ont ajout\u00e9 un autre \u00e9l\u00e9ment \u00e0 l’\u00e9quation. La 4G est arriv\u00e9e. Les \u00e9crans Retina offraient de nouveaux niveaux de clart\u00e9 aux utilisateurs finaux.\n<\/p>\n
\n Soudain, la fronti\u00e8re entre ordinateur de bureau et mobile \u00e9tait devenue floue.\n<\/p>\n
\n Dans le m\u00eame temps, il y avait une diversit\u00e9 croissante dans la taille et la r\u00e9solution des \u00e9crans de bureau.\n<\/p>\n
\n Et un casse-t\u00eate croissant pour les concepteurs de sites Web.\n<\/p>\n
\n L’\u00e9poque o\u00f9 vous n’aviez qu’\u00e0 prendre en charge une poign\u00e9e de tailles de fen\u00eatres \u00e9tait r\u00e9volue. Les choses se compliquaient.\n<\/p>\n
\n Heureusement, l’aide \u00e9tait \u00e0 port\u00e9e de main sous la forme de requ\u00eates m\u00e9diatiques et du concept de conception r\u00e9active.\n<\/p>\n
\n Gr\u00e2ce aux requ\u00eates multim\u00e9dias, il est devenu possible de varier les styles et la mise en page \u2013 voire le contenu \u2013 en fonction de la largeur de la fen\u00eatre d’affichage et de la r\u00e9solution de l’\u00e9cran de l’utilisateur. Bien s\u00fbr, les requ\u00eates m\u00e9dias ne sont en aucun cas le seul outil dans le sac \u00e0 malice du concepteur r\u00e9actif, mais il est juste de dire qu’elles constituent la base de la technique.\n<\/p>\n
\n C’\u00e9tait une excellente nouvelle pour le mobile. La conception r\u00e9active signifiait que vous pouviez diffuser efficacement diff\u00e9rentes versions du m\u00eame site sur diff\u00e9rents appareils. Le tout sans d\u00e9velopper un site mobile distinct sur un domaine diff\u00e9rent.\n<\/p>\n
\n Les propri\u00e9taires de sites commencent \u00e0 r\u00e9aliser que les utilisateurs finaux se soucient des performances. Les d\u00e9taillants en particulier commencent \u00e0 comprendre que la r\u00e9duction de millisecondes de temps de chargement peut se traduire par des millions sur le bilan.\n<\/p>\n
\n Heureusement, les sites r\u00e9actifs offrent un avantage clair en termes de performances par rapport \u00e0 leurs cousins \u200b\u200bmobiles d\u00e9di\u00e9s : la redirection vers un domaine mobile est supprim\u00e9e.\n<\/p>\n
\n Cependant, malgr\u00e9 cela, la conception r\u00e9active a r\u00e9ussi \u00e0 acqu\u00e9rir une certaine r\u00e9putation de performances m\u00e9diocres.\n<\/p>\n
\n \u00c0 certains \u00e9gards, c’est plut\u00f4t injuste, mais cela vaut la peine d’examiner les d\u00e9fis de performances suppl\u00e9mentaires que la conception r\u00e9active pose aux imprudents\u2026\n<\/p>\n
\n Les fichiers image sont volumineux. Et parce qu’ils sont gros, ils sont souvent responsables des temps de chargement lents. Ils sont donc un bon point de d\u00e9part pour quiconque essaie d’optimiser les performances d’un site.\n<\/p>\n
\n Malheureusement, l’une des premi\u00e8res solutions pour fournir des images r\u00e9actives n’\u00e9tait pas excellente pour les performances.\n<\/p>\n
\n La technique est magnifiquement simple. Utilisez simplement max-width: 100% pour vous assurer que les images s’adaptent \u00e0 la largeur de l’\u00e9l\u00e9ment contenant :\n<\/p>\n
img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n\n Au fur et \u00e0 mesure que le conteneur se r\u00e9tr\u00e9cit pour s’adapter \u00e0 des fen\u00eatres plus petites, toutes les images \u00e0 l’int\u00e9rieur r\u00e9tr\u00e9ciront avec lui. Facile!\n<\/p>\n
\n Mais il y a un probl\u00e8me. La taille de l’image peut diminuer \u00e0 l’\u00e9cran, mais la taille du fichier reste la m\u00eame. C’est loin d’\u00eatre id\u00e9al d’un point de vue performance. Vous pourriez envoyer une image de 800 x 800 pixels sur le fil, uniquement pour qu’elle soit affich\u00e9e \u00e0 80 x 80 pixels: en d’autres termes, vous pourriez transmettre des centaines (ou des milliers) d’octets inutiles. Non seulement l’image prendra beaucoup de temps \u00e0 charger, mais tous ces octets redondants pourraient \u00e9puiser la pr\u00e9cieuse allocation de donn\u00e9es de l’utilisateur final.\n<\/p>\n
\n Cependant, ce n’est pas le seul – ni m\u00eame le meilleur – moyen de fournir des images r\u00e9actives. D’une part, une image qui fonctionne \u00e0 800 pixels de large ne fonctionnera pas n\u00e9cessairement aussi bien \u00e0 diverses fractions de cette taille.\n<\/p>\n
\n Pour r\u00e9soudre ce probl\u00e8me, vous pouvez utiliser une requ\u00eate multim\u00e9dia pour afficher diff\u00e9rentes versions de l’image en fonction de la taille de la fen\u00eatre d’affichage en utilisant une requ\u00eate multim\u00e9dia et afficher : aucune.\n<\/p>\n
\n CSS :<\/strong>\n<\/p>\n@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n HTML :<\/strong>\n<\/p>\n<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n\n Cela vous permet d’afficher diff\u00e9rentes versions d’une image, plut\u00f4t que la m\u00eame image \u00e0 diff\u00e9rentes tailles. Cependant, cela ne r\u00e9duit pas le nombre d’octets. En effet, la taille globale de la page sera plus importante puisque toutes les images seront charg\u00e9es, qu’elles soient affich\u00e9es ou non.\n<\/p>\n
\n Une meilleure alternative \u2013 si c’est pratique \u2013 consiste \u00e0 utiliser des images d’arri\u00e8re-plan \u00e0 la place <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>des \u00e9l\u00e9ments. Ceci est pr\u00e9f\u00e9rable car les images r\u00e9f\u00e9renc\u00e9es dans CSS ne sont charg\u00e9es que si elles sont utilis\u00e9es (tant qu’il ne s’agit pas d’URI de donn\u00e9es) :\n<\/p>\n@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n Cela fonctionne bien: les visiteurs ne t\u00e9l\u00e9chargent que les images dont ils ont besoin, au fur et \u00e0 mesure qu’ils en ont besoin. Le probl\u00e8me est qu’il est d\u00e9sordonn\u00e9, traitant efficacement le contenu comme un style. En tant que tel, cela cr\u00e9e potentiellement un probl\u00e8me de maintenabilit\u00e9 et pourrait \u00e9galement entra\u00eener l’ignorance d’images importantes par les moteurs de recherche.\n<\/p>\n
\n Au lieu de cela, pourquoi ne pas utiliser SVG (graphiques vectoriels \u00e9volutifs): un format d’image qui s’adapte de par sa nature m\u00eame? Les images SVG ont \u00e9galement l’avantage d’\u00eatre facilement stylis\u00e9es avec CSS (voir cet excellent tutoriel<\/a> sur la fa\u00e7on de rendre les SVG r\u00e9actifs avec CSS). C’est parfait pour les ic\u00f4nes et les logos, mais malheureusement, vous ne pourrez pas utiliser de SVG pour les photos – pour celles-ci, vous devrez recourir \u00e0 des formats raster, tels que JPEG.\n<\/p>\n\n Une autre option consiste \u00e0 utiliser l’une des nombreuses solutions JavaScript pour fournir des images r\u00e9actives. C’est une fa\u00e7on populaire de le faire, mais cela ajoute une autre couche de complexit\u00e9. De plus, \u00e9tant donn\u00e9 que JavaScript bloque la construction du DOM, toute solution impliquant JavaScript a le potentiel de retarder le rendu. Ainsi, bien qu’il existe des plugins tr\u00e8s intelligents, simplement en introduisant JavaScript dans l’\u00e9quation, vous vous r\u00e9signez, dans une certaine mesure, au moindre de deux maux.\n<\/p>\n
\n Jusqu’\u00e0 r\u00e9cemment, c’\u00e9taient les seules options.\n<\/p>\n
\n Maintenant, cependant, les \u00e9l\u00e9ments et <source \/><\/code>, ainsi que les attributs srcset et tailles, apportent enfin des images vraiment r\u00e9actives sur le Web. La nouvelle sp\u00e9cification commence \u00e9galement \u00e0 \u00eatre prise en charge par les navigateurs, avec une prise en charge compl\u00e8te dans Chrome et Opera, et une prise en charge du changement de r\u00e9solution dans Safari. Jusqu’\u00e0 ce que d’autres navigateurs rattrapent leur retard, il existe un excellent polyfill<\/a> JavaScript .\n<\/p>\n\n Dans ce nouveau monde courageux, vous pouvez utiliser srcset pour \u00e9tablir une liste d’images candidates parmi lesquelles le navigateur peut choisir. Vous pouvez ensuite utiliser une requ\u00eate multim\u00e9dia dans l’attribut tailles pour dicter la taille \u00e0 laquelle l’image sera affich\u00e9e. En utilisant l’ \u00e9l\u00e9ment avec des requ\u00eates multim\u00e9dias \u00e0 l’int\u00e9rieur d’un ou plusieurs \u00e9l\u00e9ments, vous pouvez sp\u00e9cifier une gamme diff\u00e9rente d’images pour diff\u00e9rentes conditions (par exemple, pour les fen\u00eatres jusqu’\u00e0 une certaine largeur, utilisez l’image a, b ou c, et pour les fen\u00eatres plus grandes, utilisez l’image x, y ou z). Ceci est utile si vous avez besoin de fournir une version recadr\u00e9e d’une image pour les utilisateurs avec de petits \u00e9crans.\n<\/p>\n