HTML5 : lazy loading ou chargement paresseux des images

Définition du concept

Par défaut, quand on demande à un navigateur d’afficher une page web, ce dernier charge toutes les ressources, et donc toutes les images. Ce n’est pas optimal, car les images situées en bas d’une page ne sont pas nécessaires dès le chargement.
Pour améliorer le temps de chargement et réduire la consommation de bande passante, le développeur souhaite mettre en place le "lazy-loading" sur les pages. Traduisez "lazy loading par chargement paresseux.
Dans le cadre du "lazy loading" le navigateur charge les images pendant le scroll, juste avant qu’elles ne soient affichées à l’écran.

Mise en oeuvre

Jusqu'à présent il était nécessaire de recourir à JavaScript voire à jQuery (avec le pluging "appear").
Mais désormais il est possible de programmer le chargement paresseux tout simplement via HTML avec un nouvel attribut de la balise IMG : loading.

Attribut loading

Trois valeurs pourront être associées à cet attribut :

La non-spécification de l'attribut aura le même impact que loaging ='auto' .

Cet attribut n'est pas spécifique à la balise IMG mais peut s'appliquer aussi aux balises PICTURE et IFRAME.

Exemple de code HTML avec utilisation du nouvel attribut :

Le nouvel attribut est déjà implémenté par les dernières versions de Chrome et Firefox.

Rappels de bonnes pratiques

Si vous voulez qu'une page remplie d'images et de vidéos, se charge quand même rapidement il faut appliquer quelques bonnes pratiques.

L'internaute est d'un naturel impatient ; si le chargement est trop long il ira visiter un autre site que le votre !

Je viens d'évoquer ci-dessus le "chargement paresseux" des images mais il y a d'autres astuces pour un chargement rapide d'une page même très riche en contenu. Trucs que j'évoque ci-dessous.

Les vidéos

Dans le cadre de la balise video la non spécification de l'attribut preload équivaut à preload = "auto". Ce qui veut dire que les vidéos de la page seront automatiquement chargées ...
Or il n'est pas du tout certain que l'internaute veuille visualiser la vidéo de la page. Il peut vouloir se contenter de lire le texte associé.

Exemple de code correct pour la balise video :

La balise VIDEO est contenue dans FIGURE.
Pour la balise VIDEO l'attribut preload est à "none" ; le chargement de la vidéo démarrera seulement dès que l'internaute cliquera sur le bouton "lecture".
Dans l'attente du chargement le visiteur voit une image (attribut poster) pour patienter.
La vidéo est légendée via le contenu de la balise figcaption qui est toujours "enfant" de FIGURE.

Des images légères

Il est stupide qu'une image qui doit être affichée sous forme d'une miniature (100 par 100 pixels par exemple) pèse 1 méga.
Il faut redimensionner l'image en dehors du navigateur avec un logiciel de dessin tel GIMP ou PHOTOSHOP (ou tout simplement PAINT).

Privilégiez les images vectorielles

Pour les logos, les schémas privilégiez désormais les images vectorielles aux images matricielles (ou images "bitmap").
Les navigateurs modernes sont tous compatibles avec le format d'images vectorielles SVG (format soutenu par le W3C).
L'insertion d'une image vectorielle dans une page se fait en général, comme pour une image bitmap, via la balise IMG.
Une image vectorielle peut aussi être insérée avec la propriété background-image exactement comme une image matricielle.
Pour produire en mode WYSIWYG une image SVG il suffit d'utiliser le logiciel gratuit Inkscape.
Pensez cependant à optimiser le code d'un document Inkscape surchargé de métadonnées et commentaires. Les taux de compression sont très importants : optimiser le code d'un document Inkscape

Attention le format SVG n'est pas du tout adapté aux photos.

Favorisez les polices standards

Evitez d'utiliser des polices de caractères qui risquent de ne pas être installées sur le terminal de l'internaute.
Certes CSS permet désormais au visiteur d'importer une police de caractères à partir du serveur mais cette technologie est gourmande en bande passante.

Privilégier le CSS aux images

Prenons un exemple très simple. Vous souhaitez qu'une boite ait pour "background" un beau dégradé de bleu marine vers blanc en passant par différents bleus.
La solution ancienne (avant CSS3) consistait à créer une image avec PHOTOSHOP ou GIMP puis d'intégrer cette image dans la boite via la propriété background-image.

Cette technique est obsolète car consommatrice de bande passante. Il suffit de programmer un dégradé en CSS !
Exemple de boite avec un dégradé linéaire (de gauche vers droite : navy puis bleu puis blanc) :

Admettez que le CSS pour les dégradés est d'une simplicité remarquable (axe du dégradé linéaire puis liste de couleurs).

Le rendu avec le navigateur :

...

Même remarque pour les filtres ; préférez le code CSS à une image retravaillée avec PHOTOSHOP ou GIMP.
Avec l'instruction ci-dessous l'image apparait dans son aspect original puis "verdie" (rotation dans le cercle chromatique) :

Là encore le code CSS est très simple.

Le rendu avec le navigateur (image d'origine et image filtrée avec CSS) :

Les dégradés et filtres CSS sont évoqués dans mon tuto "CSS3" (dans ce site) : Tuto CSS3

Privilégiez les caractères spéciaux et symboles aux images






Non il ne s'agit pas de micro-images insérées mais tout simplement de codes ISO !
Le code correspondant :

Il ne s'agit pas d'apprendre par coeur tous ces codes il suffit de disposer de la documentation ad hoc.

Lien vers une page du site "toutimages.com" indiquant sous forme de tableaux les codes de tous les caractères spéciaux et symboles : Une page bien utile !
Retour menu