Vous avez entendu dire que le Web est devenu plus visuel et que les images de qualité sur votre site Web d'entreprise sont importantes.
Mais ces images peuvent être le fléau des visiteurs de votre site Web. Les images représentent 1 Mo sur les 1,7 Mo que contient la page Web moyenne.
Cela pourrait ne pas poser beaucoup de problèmes pour vos visiteurs sur des ordinateurs de bureau utilisant des connexions Internet à haut débit. Toutefois, si vous souhaitez ou souhaitez voir augmenter le trafic généré par les visiteurs mobiles, ces images peuvent poser problème. Le téléchargement de pages Web contenant beaucoup d'images peut prendre beaucoup de temps. Les visiteurs sont frustrés et quittent votre site.
$config[code] not foundVous avez peut-être mis en place une conception Web réactive, pensant résoudre tous vos problèmes de téléphonie mobile. Et il est vrai qu’une conception Web réactive résout certains problèmes. Il organise et affiche automatiquement les éléments de votre site à afficher sur des écrans mobiles plus petits et plus étroits.
Mais la conception Web réactive n’est pas la solution à tout. Cela ne résout pas nécessairement le problème de téléchargement d’image. Même avec un design réactif, de nombreuses fois, ces images de poids lourd sont quand même téléchargées. Comme le spécialiste de la performance Web, Yoav Weiss le souligne succinctement sur le site Web de l’Opéra:
«Responsive Web Design RWD a combiné de nouvelles fonctionnalités de navigateur et de techniques CSS pour créer des sites Web qui s’adaptent à l’appareil qui les affiche et qui s’avèrent parfaits partout. Cela a permis aux développeurs de ne plus s'inquiéter de la détection peu fiable des périphériques et de penser leurs sites Web en termes de dimensions de la fenêtre d'affichage.
Cependant, même si les sites RWD semblaient différents sur chaque périphérique, la plupart d'entre eux continuaient à télécharger les mêmes ressources pour tous les périphériques. ”
Le nouveau
Si vous ne connaissez rien au code HTML, voici une définition non technique: c’est un langage spécial. Lorsqu'il est utilisé en coulisse dans le code de votre site Web, cette langue explique comment le navigateur doit afficher le texte et les images. Le nouvel élément Picture est un type de langage de balisage HTML. Il est écrit comme ceci (par le groupe de communauté Responsive Images): L'élément Picture est à propos de responsive images, pas sensible conception. Pour les hommes d’affaires non techniques, cette distinction peut sembler minime. Mais en ce qui concerne les performances de votre site sur les appareils mobiles, cela pourrait être important. Selon un rapport d'ArsTechnica, le nouvel élément de balisage corrige les problèmes causés par les images censées être affichées sur un moniteur grand format - images qui ne se traduisent pas bien sur les appareils mobiles. le
«Lorsque le navigateur rencontre un élément Picture, il évalue d’abord les règles que le développeur Web pourrait spécifier. *** Ensuite, après avoir évalué les différentes règles, le navigateur sélectionne la meilleure image en fonction de ses propres critères. C’est une autre fonctionnalité intéressante, car les critères du navigateur peuvent inclure vos paramètres. Par exemple, les futurs navigateurs pourraient offrir une option permettant d’empêcher le chargement d’images haute résolution en 3G, quel que soit le contenu de l’élément d’image de la page. Une fois que le navigateur sait quelle image est le meilleur choix, il charge et affiche cette image dans un bon vieil élément img. … Que se passe-t-il est l'image enveloppe une balise img. Si le navigateur est trop ancien pour savoir quoi faire d'un Tous les développeurs n'ont pas accepté le nouvel élément Picture au début. L’histoire d’Ars Technica décrit le processus suivi par les leaders de la communauté du développement Web pour arriver au point où le $config[code] not found Mais le problème semble maintenant réglé, le nouvel élément HTML image étant adopté. le
En tant qu’hommes d’affaires, il est important de savoir que L'implémentation de l'élément HTML Picture pour les images est un sujet à discuter avec votre développeur Web. Les techniciens et les bricoleurs peuvent aller ici pour apprendre à utiliser l'élément Picture. C’est un excellent article rédigé par Scott Gilbertson. N'hésitez pas à mettre en œuvre
Images: Shutterstock; RICG Qu'est-ce que l'élément HTML d'image?
Points clés de la
