Performance web et images

La performance d'un site web est aujourd'hui un des leviers qui permet d'optimiser sa visibilité en ligne. Les designs web "tendance" mettent en avant les images plein ecran ou de grande dimension. C'est très joli, mais c'est très lourd ! Quels sont les moyens simples qui permettent d'en "mettre plein la vue" sans faire attendre vos visiteurs ?

Images et performance web :

S'il faut absolument optimiser les images mises en ligne au niveau de la compression et des formats, ce qui est déjà la base, pourquoi ensuite livrer des images de 1500 pixels de large sur un écran de 480 ? 

Parce que l'on ne sait pas faire autrement ou bien parce que c'est compliqué me répondra-t-on... 

Voici une piste simple pouvant être mise en production.

Solutions pour des images vraiment responsives : 

Si jusqu'à il y a peu, la mise en œuvre d'une vraie stratégie d'images adaptables était compliqué et lourde à mettre en place, les normes du web et les navigateurs évoluant constamment, un attribut "srcset" pour les images apporte une réponse. 

Mise en pratique de srcset sur la balise img

Ce nouvel attribut de la balise <img/> peut être associé à un second 'size" qui indiquera la taille d'occupation à l'écran en fonction de la taille de ce dernier.

Je viens de développer un nouveau module pour le CMS Xtendo qui s'applique aux images du "slide" de la page d'accueil. Il permet en un clic de générer les images aux différentes tailles (3), Ensuite, une légère adaptation du module slider pour l'ajout de SRCSET permet d'afficher désormais des images correspondantes à la taille de l'écran. 

Le gain est très important cependant certains navigateurs demandent l'utilisation de la librairie javascript "picturefill.js" pour reconnaitre ces attributs et afficher les bonnes images.

Testez la technique en action

Si vous souhaitez voir un résultat plus parlant de l'application de la méthode, je vous invite à voir cette page de test.

Plus d'infos : 

Les différentes manières d'intégrer cette méthode fait débat parmis les professionnels et intégrateurs. Notamment en ce qui concerne l'utilisation de la nouvelle balise <picture></picture> à la place de <img/>. Tous ceci est très récent et de nombreux changements sont à attendre. C'est aussi par ces techniques qu'il est possible d'adapter des images aux écrans  haute densité et Rétina.

Pour vous faire une idée et vous informer sur les enjeux je vous invite à visiter ces deux liens : 
http://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html sur Alsacreations.com pour de très bonnes explications techniques.
http://blog.cloudfour.com/dont-use-picture-most-of-the-time/ par Jason Grigsby et http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ par Chris Coyier

Par Johan Puisais - Xtendo : création de site internet Poitiers

Pour continuer votre lecture sur la thématique Performance web

• Performance : Web : augmenter l'efficacité et la vitesse
• Galerie d'images, sliders et performance web
• L'Accelerated Mobile Pages Project (AMP) de Google
• Créer un site internet - 02 : les différentes solutions Suite

Partager l'article sur :