Les images et le photos prennent de plus en plus de place et de poids 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. 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 et les photos représentent près de la moitié du poids total de la page.
Alors, après l’étape incontournable de la compression pour limiter le poids des pages web et servir des images de qualité (de préférence en format nouvelle génération tel que WebP ou AVIF), 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é et que nous avons décidé de relever : le redimensionnement automatique des images, pour une largeur et une hauteur toujours adaptées !
Une fonctionnalité pour faciliter l’implémentation des images responsive
A défaut de pouvoir développer une interface responsive, de confier à votre CMS la lourde tâche d’adapter les images en fonction du contexte, ou de redimensionner vos images à l’aide d’un outil en ligne ou d’un logiciel tel que Photoshop, bien des sites web servent la même image sur ordinateur et sur mobile. Tant pis pour le redimensionnement… et donc pour la qualité de l’expérience en ligne.
Pourtant, en termes de hauteur et de largeur, les dimensions d’une image ou d’une photo devraient 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. En effet, 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, dans les bonnes dimensions. 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 la vitesse de chargement.
Par exemple :
[pastacode lang= »markup » manual= »%3Cimg%20srcset%3D%22elva-fairy-320w.jpg%20320w%2C%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0elva-fairy-480w.jpg%20480w%2C%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0elva-fairy-800w.jpg%20800w%22%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0sizes%3D%22(max-width%3A%20320px)%20280px%2C%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0(max-width%3A%20480px)%20440px%2C%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0800px%22%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0src%3D%22elva-fairy-800w.jpg%22%20alt%3D%22Elva%20habill%C3%A9e%20en%20f%C3%A9e%22%3E » message= » » highlight= » » provider= »manual »/]
Ou encore :
[pastacode lang= »markup » manual= »%3Cpicture%3E%0A%0A%C2%A0%C2%A0%3Csource%20media%3D%22(max-width%3A%20799px)%22%20srcset%3D%22elva-480w-close-portrait.jpg%22%3E%0A%0A%C2%A0%C2%A0%3Csource%20media%3D%22(min-width%3A%20800px)%22%20srcset%3D%22elva-800w.jpg%22%3E%0A%0A%C2%A0%C2%A0%3Cimg%20src%3D%22elva-800w.jpg%22%20alt%3D%22Chris%20debout%20tenant%20sa%20fille%20Elva%20dans%20ses%20bras%22%3E%0A%0A%3C%2Fpicture%3E » message= » » highlight= » » provider= »manual »/]
Pour pallier ces difficultés, notre nouvelle fonctionnalité facilite la génération des images dans des dimensions définies. 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 options
Générer de multiples versions d’une image ou d’une photo, 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. C’est aussi impossible à traiter manuellement sur de grands volumes. C’est pour cette raison que l’automatisation à l’aide d’un outil performant est plus que nécessaire !
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 :
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 !
Restez informés sur les nouveautés
de notre moteur et sur la web performance en général !
Cliquez simplement sur ce bouton pour vous abonner à notre newsletter :