Nos images sont-elles sages ?
Depuis fin 2016, plus d’une page internet sur deux est chargée depuis un mobile. Un changement de paradigme qui est loin d’être sans conséquence pour l’industrie.
La même année, DoubleClick de Google indiquait que plus de la moitié des utilisateurs mobiles abandonnent une page web si celle-ci met plus de 3 secondes à se charger, alors que trois quarts des sites web mettent plus de 10 secondes à se charger avec une moyenne à 19 secondes sur le réseau 3G.
Et c’est sans surprise que Google, avec sa très récente annonce concernant la prise en compte de la vitesse de chargement des pages sur mobile d’ici juillet 2018, semble vouloir encourager une évolution de l’industrie.
Les problèmes liés à l’optimisation du web sont nombreux et très variés.
Lors de la présentation du tout premier iPhone en 2007, Steve Jobs indiquait déjà, au moment où il souhaitait accéder au site du New York Times :
Plus de dix ans après, nos images sont-elles toujours un problème de taille ?
Le poids moyen des sites internets explose.
D’après HttpArchive en janvier 2018, la taille moyenne des sites internets atteint 3.5MB, avec plus de la moitié de la donnée consacrée aux images.
Une augmentation inquiétante, notamment pour les utilisateurs n’ayant pas la chance de posséder un téléphone haut de gamme.
Une fois décodée, une image peut prendre une place très importante en mémoire (~4 octets/pixel) et cela peut aboutir à une surconsommation de la mémoire disponible et faire crasher le téléphone de l’utilisateur.
hauteur x largeur x 4 (rgba)
250 x 250 x 4 = 250.000 octets
500 x 500 x 4 = 1.000.000 octets
Au-delà du problème lié à la taille de l’image, le temps nécessaire au décodage de celle-ci est non négligeable puisqu’il évolue de façon quadratique par rapport à la taille de cette dernière.
La taille doit donc être optimale.
Or, la différence entre la taille de l’image servie et la taille de l’image affichée à l’écran est très souvent problématique.
On peut utiliser les Dev Tools de Chrome pour s’en rendre compte.
A l’inverse, beaucoup de site ne mettent pas à disposition d’images adaptées aux écrans rétina, ce qui nuit à l’expérience utilisateur.
Pour résoudre ce problème il existe de nombreuses plateformes (e.g. Cloudinary) qui vous permettent d’héberger et d'optimiser vos images.
Mais avant de penser à optimiser davantage vos images, il faut se demander si vous ne ne pouvez pas en supprimer certaines ?
Certains effets d’ombrage ou de gradient de couleur sont parfois rendu via des images alors qu’ils sont facilement réalisables avec CSS3.
Il faut aussi encourager l’utilisation de polices web pour rendre du texte plutôt que de passer par une image beaucoup plus lourde et ne respectant pas forcément les règles d'accessibilités.
Enfin quel format d’image utiliser ?
Premièrement, votre image est-elle matricielle ou vectorielle ?
Les images vectorielles permettent d’afficher une image de façon nette quelque soit la résolution d’affichage. Elles sont avant tout faites pour afficher des formes géométriques, comme des logos.
Si vous voulez affichez des images vectorielles alors c’est le format SVG que vous utiliserez.
Attention cependant à optimiser l’image pour le web (en utilisant svgo et en compressant au format gzip) .
Il existe de nombreux formats utilisés pour les images matricielles.
Si vous avez besoin d’animation le format GIF est indiqué.
Attention cependant, le format GIF ne comporte que 256 couleurs et l’on trouve aujourd’hui sur le web beaucoup de “GIF” qui sont en réalité des vidéos au format H.264.
Si vous avez besoin de transparence, il faudra se tourner vers le format PNG. Ce format existe sous deux variantes : PNG-8 et PNG24.
Le format PNG-8 permet d’encoder l’image en 256 couleurs avec un meilleur taux de compression que le format GIF.
Enfin le format JPEG est adapté particulièrement aux photographies.
Il est possible aussi de travailler sur le sous-échantillonnage de la chrominance afin d’optimiser la compression sans perdre en qualité.
Il est à noté que les formats PNG et JPEG possèdent des données EXIF (Exchangeable image file format) qui sont un ensemble de méta-données propre à l’image.
Ces données ne sont pas forcément nécessaire sur le web (or elles occupent en moyenne 16% de la taille des fichier JPEG).
Pour terminer, il existe d’autres formats pour les images qui ne sont pas supportées de façon universelle par les navigateurs.
WebP et JPEG-XR, des formats respectivement supportés par Chrome et IE.
Dans le cas de WebP, le gain de taille par rapport à une image JPEG classique est non-négligeable .
Si l’on ajoute à ça la part de marché du navigateur de Google dans la navigation mobile (~45%), il est intéressant d’essayer de fournir le format WebP lorsque cela est possible.
Kevin Bottero