Internet

L’accès aux sites web sur les appareils mobiles peut être plus rapide grâce à ce nouvel élément HTML

Accéder à des sites à partir de smartphones ou de tablettes souvent est une expérience “chaleureuse”, même lorsque la page s’adapte à des écrans plus petits ou dirige vers une version spécifique a des appareils mobiles. La cause, la plupart du temps, est le poids des images. Mais un petit changement dans le HTML pourrait bientôt mettre fin à cette situation.

Selon Ars Technica, un groupe de développeurs (dont beaucoup sont issus de sociétés comme Google et Opera Software) a proposé un nouvel élément appelé image pour guider le navigateur afin de charger des images adaptées aux appareils mobiles.

Dans un passé récent, la plupart des développeurs web ont choisi de créer des versions mobiles séparées, quelque chose comme “m.perlmOl”. Mais cette approche exige beaucoup de précautions, car elle peut semer la confusion chez l’utilisateur, gêner l’indexation du site dans les moteurs de recherche (Google n’aime pas les contenus dupliqués) et augmenter les demandes au serveur.

Actuellement, les développeurs ont opté pour des mises en page adaptées. Dans ce concept, la page s’adapte automatiquement à la taille de l’écran, que ce soit un écran géant ou un smartphone avec un écran de 4 pouces (c’est le cas de PerlmOlinclus, vous pouvez le vérifier en accédant au blog sur votre appareil mobile).

  Comment conserver vos 15 Go (ou 30 Go) d'espace libre sur OneDrive

Les mises en page réactives permettent également d’ajuster la taille des images pour un affichage correct sur des écrans plus petits. Mais il y a une sérieuse limitation ici : souvent, le navigateur se contente de réduire la taille de l’image affichée, mais la charge complètement, c’est-à-dire sans en réduire le poids.

Si une page comporte cinq images qui totalisent 1 Mo, vous n’aurez probablement aucun problème à la consulter depuis votre connexion à domicile. Mais en y accédant via les réseaux mobiles (plus sujets à la lenteur), la page peut non seulement prendre du temps à charger, mais aussi consommer inutilement une partie de votre franchise de données.

C’est là qu’intervient l’élément d’image. L’idée est que la nouveauté sert à répertorier plusieurs versions d’une même image et à guider le navigateur pour qu’il charge celle qui se rapproche le plus de la largeur de l’écran de l’appareil.

L’idée n’est pas nécessairement nouvelle. Il existe déjà des codes JavaScript qui permettent au navigateur d’afficher des versions spécifiques de la même image. Le problème est la complexité habituelle et les exigences de traitement souvent plus élevées.

  GChat laissera Gmail plus social

L’élément d’image est axé sur la simplicité et la performance. The Tableless en donne un exemple très clair :

imagesource media=”(min-width : 500px)” src=”grande.jpg”source media=”(min-width : 250px)” src=”medio.jpg”source src=”small.jpg”img src=”small.jpg” alt=””/image

Notez que les deuxième et troisième lignes indiquent les versions pour les écrans d’une largeur de 500 et 250 pixels, respectivement, de l’image standard “small.jpg” décrite à la quatrième ligne. Si le navigateur ne prend peut-être pas en charge l’image, l’image indiquée sur la cinquième ligne par l’ancien élément img connu est chargée.

Tableless met en évidence un autre attribut, le srcset. Notez le code ci-dessous :

source media=”(min-width : 500px)” srcset=”large-1.jpg 1x, large-2.jpg 2x”

L’attribut srcset indique plus d’une image pour la même taille d’écran, étant donné qu’il appartient au navigateur de “décider” laquelle charger (le système d’exploitation, l’historique de navigation et d’autres informations peuvent servir de paramètres de choix).

En fin de compte, l’élément image facilitera la navigation sur les appareils mobiles en demandant au navigateur de charger l’image la plus légère avec les dimensions les plus appropriées à la taille de l’écran. Les systèmes de gestion de contenu peuvent même avoir l’élément comme base pour générer automatiquement des versions de la même image au moment de la publication.

  La nouvelle application Twitter pour Android et iOS affiche des images et des vidéos en avant-première sur la timeline

Des tests avec l’élément image ont été effectués pendant quelques mois et, au passage, l’idée a plu : Google et Mozilla ont l’intention de donner soutenir la nouveauté dans leurs navigateurs jusqu’à la fin de l’année. La normalisation elle-même, si elle a lieu, devrait prendre un peu plus de temps, parce qu’il est nécessaire de procéder à davantage de tests.

Si vous voulez en savoir plus, allez à la page L’élément image.

A propos de l'auteur

Bernard

Actuellement responsable informatique dans une PME, je bosse dans le domaine depuis une vingtaine d'année maintenant. Fan inconditionnel de DBZ, et de la triologie Die Hard. #teamWindows sur Perlmol !

Laisser un commentaire