LES FORMATS D'IMAGES POUR LE WEB
Optimiser ses images pour un site web est primordial. Encore aujourd’hui, c’est une des causes principales de ralentissement du chargement d’une page d’un site internet.
Pour donner un ordre de grandeur, une page d’un site internet est considérée comme bien optimisée lorsqu’elle fait 1 à 2 Mo ! Voir moins sur mobile…
Cette valeur inclue donc la totalité des éléments d’une page. C’est-à-dire, les différents languages informatiques utilisés pour créer la page, les textes, les typographies, les images, les élements animés…
Bien qu’on ne l’utilise plus aujourd’hui, pour se représenter ce que cela fait, c’est environ ce qu’une disquette pouvait contenir (1,47 mo). Une manière moderne de le représenter, c’est également l’équivalent d’une à deux photo prise avec un smartphone.
Heureusement, il existe une marge de manoeuvre et des outils pour optimiser ses images et atteindre cet objectif.
Les clés de l'optimisation
Il est vivement préconiser d’ajouter une fonction de chargement d’image différé. Les images chargeront donc après le reste de la page, ce qui améliore les performances et à un impact positif sur le référencement SEO du site. Il existe également des réseaux de diffusion (cdn), qui sont proposés par pratiquement tout les hébergeurs de site internet ou des services externes. Cependant, avant même tout cela, il faut s’interroger sur ce qu’il faut réaliser en amont de la mise en ligne d’un contenu.
Publier une image sur un site internet n’est pas tout à fait la même manipulation que sur un réseau social. Les réseaux sociaux intègrent des solutions qui leurs sont propre pour faire ce travail d’optimisation d’image. C’est une préoccupation indispensable pour qu’ils restent consultés, et pourtant, invisible aux yeux des utilisateurs.
Une question au départ de ce travail : Quel format d’image utiliser pour avoir une optimisation efficace ?
Il est nécessaire de bien définir ensemble de quoi il est question.
Il existe deux grandes catégories d’images, les images matricielles (ou encore « pixelisées », bitmap…) et les images vectorielles qui nécessitent toutes deux une approche bien spécifique.
Les images vectorielles
Les images vectorielles, avec le format .svg pour une utilisation adaptée au web, ont l’avantage de ne pas perdre en qualité quelques soit leurs taille. C’est vraiment son point fort !
De plus ce format permet de créer des animations simples avec quelques lignes de code supplémentaire, sans être aussi gourmand en ressources qu’une vidéo ou un gif puisqu’il ne pèse que quelques Ko.
En revanche, le format .svg présente plusieurs limites…
Si ce format, s’avère très éfficace pour des éléments peu détaillés tels que des logos, icônes et pictogrammes. Il n’est pas optimal pour des visuels plus conséquents tel qu’une photographie ou une illustration plus avancée, qui atteindra un poids bien supérieur à une image classique.
Les images matricielles
Les images matricielles sont les plus courantes sur Internet. Ce sont des images susceptibles de pixeliser si l’on zoome dessus.
Elles dépendent de deux paramètres : la définition (en pixels) et la résolution (en dpi).
Elles sont soumises à deux grandeurs, la définition en pixels, et la résolution en dpi.
Il est important de prendre en compte ces deux facteurs. Et c’est un point crucial pour optimiser des images matricielles.
Par convention, les images doivent faire 72 dpi pour pour un affichage suffisant sur un écran. C’est la valeur qui, au-delà, n’apportera plus une différence de qualité significative sur un écran. Il existe toutefois des écrans plus exigeant pouvant afficher jusqu’à 96 dpi.
Quant à la définition de l’image, il n’y a pas une valeur fixe en soi.
La taille du fichier doit se rapprocher de la taille affichée sur l’écran.
La solution consiste donc à créer un gabarit dans un logiciel de traitement d’image puis de travailler l’image. Par exemple, sur un site e-commerce, toutes les images des différents produits sont recadrées à la même taille.
Il existe plusieurs formats qui suscitent un grand intérêt dans cette quête de l'optimisation des images sur son site internet.
Les image étant exprimées dans un carré ou un rectangle, les png ont un avantage majeur : ils permettent de laisser des zones transparentes sur une image.
Ce format est toujours largement le format le plus utilisé sur internet. Il permet une compression de l’image avec une perte de qualité minime.
Ce sont des formats plutôt récents et extrêmement puissants.
Ils allient les avantages du png et du jpg avec une bien meilleure compression, sans perte de qualité visible pour une même image.
Définition : 1000×1000 pixels
Résolution : 72 dpi
png : 2,58 Mo
Jpg : 773 Ko
Webp : 337 Ko
Des optimisations suplémentaires ?
Il est possible d’aller encore plus loin.
Il existe plusieurs outils qui permettent de gagner encore un peu de place. Personnellement, je peux utiliser des outils comme Tinypng et Convertio.
Convertio permet de changer le format d’un fichier vers un autre. Ce qui peut s’arriver utile pour convertir un fichier ponctuellement.
Tinypng quand à lui est presque systématique dans mon optimisation d’image sur un site internet à l’heure actuelle.
Pour reprendre l’exemple précédent :
A titre de comparaison, la même image en png passe donc de 2,58 Mo, à 299 Ko en webp. Ce qui est considérable pour avoir une page internet optimisée et un site professionnel.
