Resizing image web performance

Les images prennent de plus en plus de places sur nos pages web, c’est pourquoi nous avons tout intérêt à faire en sorte qu’elles soient de moins en moins lourdes, et encore plus sur mobile. En 2019, d’après HTTP Archive, une page web affiche en moyenne près de 1Mo d’images (médiane) ; et sur une page, les images représentent 900Ko sur 1700Ko (soit environ 53 %). 

Alors, après l’étape incontournable de la compression, comment servir une image aux bonnes dimensions en fonction de la taille d’un écran ? Après le support du srcset, voici un défi webperf que nous avions identifié pour l’année 2019 et que nous avons décidé de relever : le redimensionnement des images !

Une fonctionnalité pour faciliter l’implémentation des images responsive

A défaut de pouvoir développer une interface responsive, ou de confier au CMS la lourde tâche d’adapter les images en fonction du contexte, bien des sites servent la même image sur ordinateur et sur mobile. Pourtant, la taille d’une image devrait toujours dépendre de la taille de l’écran qui l’affiche, et ce pour éviter de ralentir la page et de gâcher de la bande passante lors du téléchargement, et de la ressource CPU lors du rendu de l’image sur le navigateur. Eh oui… pourquoi embarrasser les internautes - et surtout les mobinautes - avec une image qui ferait 3000 pixels de large si l’écran n’en fait que 1000 ?

Même si les solutions d'implémentation autour de la propriété srcset ou la balise picture sont connues depuis longtemps, beaucoup de sites ne mettent pas en place ces techniques faute de pouvoir générer facilement les images à la taille désirée. Cela permet pourtant de réduire considérablement le poids d’une image en fonction de la résolution de l’écran, la densité de pixels, le support des formats d’image du navigateur... et donc d’optimiser les temps de chargement.

Par exemple :

<img srcset="elva-fairy-320w.jpg 320w,

             elva-fairy-480w.jpg 480w,

             elva-fairy-800w.jpg 800w"

     sizes="(max-width: 320px) 280px,

            (max-width: 480px) 440px,

            800px"

     src="elva-fairy-800w.jpg" alt="Elva habillée en fée">

Ou encore :

<picture>

  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">

  <source media="(min-width: 800px)" srcset="elva-800w.jpg">

  <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">

</picture>

Pour pallier ces difficultés, notre nouvelle fonctionnalité facilite la génération des images à une taille définie. Les balises HTML peuvent alors être rédigées sans se soucier du traitement de l'image, puisqu’il se fait à la volée.

Voyons à présent comment fonctionne cette optimisation et comment vous pouvez en profiter.

Redimensionner ou recadrer : deux possibilités

Générer de multiples versions d’une image et servir celle qui correspond à la taille de l’écran est un processus qui peut ne pas être pris en charge voire non paramétrable selon les CMS, et impossible à traiter manuellement sur de grands volumes.

Ainsi, pour alléger votre travail et le poids de vos pages, notre fonctionnalité de redimensionnement des images vous permet de définir des paramètres d’URL qui s’appliqueront à vos templates - voici des explications détaillées sur les paramétrages possibles sur notre Support.

Pour résumer, vous avez deux options pour redimensionner vos images :

  • Modifier la taille (rapport hauteur/ largeur)
  • Recadrer l’image, soit en vous reposant sur la fonctionnalité de “Smart cropping” (recadrage automatique et intelligent), soit en définissant une zone de gravité autour de laquelle l’image sera recadrée.

Voici quelques exemples des différentes versions d’une même image selon les paramètres définis pour l’affichage :

resizing-image-webperf

Cette fonctionnalité de redimensionnement en temps réel est une nouvelle étape dans le cadre de notre démarche globale d’amélioration des optimisations des images. 

Et pour la suite, quel est le programme ? Nous allons prochainement faire en sorte que le moteur de Fasterize calcule lui-même les bonnes dimensions par rapport au contexte de navigation et modifie automatiquement le code HTML correspondant ! 

Vous voulez suivre nos évolutions et être informé.e.s des nouveautés
que nous mettons en place pour améliorer vos temps de chargement ?
Abonnez-vous à notre newsletter !Je m'inscris !