Le but du site web est de gagner de la visibilité pour son activité. Pour y arriver, il faut passer par plusieurs processus comme l’optimisation du site, des textes, des vidéos et des images. Il faut noter que les images volumineuses ralentissent le chargement des pages et rendent l’expérience utilisateur peu qualitative. L’optimisation des images permettra donc de diminuer la taille du fichier. Découvrez 5 astuces d’optimisation d’images pour le web et la performance.
Bien choisir le format du fichier à utiliser
La première étape dans l’optimisation d’une image passe par le choix du fichier. Avant toute modification, vous devez vous assurer que le fichier sélectionné est le bon. Pour cela, vous avez la possibilité de faire un choix parmi plusieurs types de fichiers. Ces derniers ainsi que leurs caractéristiques sont consignés dans le tableau suivant :
Format | Caractéristiques |
PNG | Il produit des images de meilleure qualité. Plus la qualité d'une image est élevée et plus elle a une grande taille. En effet, le format PNG a été créé pour être un format d’image lossless, c’est-à-dire sans perte. Mais il peut aussi être Lossy |
JPEG | Ce format se sert de la compression lossy et lossless. Le niveau de sa qualité est ajustable pour définir un équilibre entre la taille et la qualité du fichier |
GIF | Il s'agit du meilleur format à utiliser lorsqu’il est question d’images animées. Il n’emploie que 256 couleurs et la compression lossless. |
Il existe d'autres formats de fichiers comme le WebP, le JPEG XR. Leur particularité est qu’ils ne sont pas supportés par tous les navigateurs. Pour votre choix d’image, vous pouvez opter pour le JPEG (ou JPG) lorsque l’image est composée de beaucoup de couleurs. Si l’image est simple, alors vous pouvez opter pour le format PNG.
Faire la compression de l’image en fonction de sa taille
Lorsque vous adoptez une compression faible sur une image, sa qualité est meilleure et sa taille est grande. Par contre, l’utilisation d’une compression élevée permet d’avoir une image de faible qualité avec une petite taille. Généralement, le poids total d’une page web est inférieur à 1 ou 2 MO. Ainsi, l'utilisation d’un fichier de grande capacité occupe plus de place sur la page et ralentit le chargement de celle-ci.
Pour avoir une image de qualité avec une taille moyenne, il faut appliquer une compression moyenne, c’est-à-dire ni élevé ni faible. Cette technique vous permettra d’avoir des images optimisées et adaptées à votre site web.
Définir le type de compression à utiliser
Il existe deux types de compressions dont vous pouvez vous servir. Il s'agit du lossy et du lossless. Il est préférable de ne pas faire un choix à la hâte de l’une de ces compressions. Vous devez plutôt les expérimenter toutes les deux.
En effet, le lossy est un filtre qui élimine certaines données. Cette diminution entraîne la dégradation de l’image. Vous devez donc faire énormément attention au cours de la réduction de l’image. Pour cela, utilisez un outil de compression de votre choix. La compression lossless quant à elle est un filtre qui compresse les données sans les supprimer. Cette méthode de compression ne diminue pas la qualité des images.
Utiliser les outils et programmes d’optimisation d’images
Il existe de nombreux outils, logiciels et programmes qui permettent d’optimiser les images. Parmi eux, certains sont gratuits et d’autres sont payants. Vous pouvez donc vous en servir pour vos optimisations d’images. Il convient de souligner que certains proposent des paramètres qui permettent d’optimiser vous-même vos images. Il y en a également qui font automatiquement le travail pour vous.
Ci-dessous, certains outils et programmes qui vous permettent d’optimiser vos programmes :
- Adobe Photoshop ;
- Paint.Net ;
- Gimp ;
- JPEGtran ;
- GIFsicle ;
- etc.
Avec ces différents outils, vous pouvez optimiser vos images et avoir la taille et la qualité adéquate pour une bonne expérience utilisateur.
Redimensionner les images à l’échelle
Dans le passé, pour télécharger une image, il fallait s'assurer que le CSS ne la redimensionne pas. Aujourd’hui, cela n’a plus d’importance puisque WordPress 4.4 supporte désormais les images non mises à l’échelle par CSS. Une image téléchargée dans la médiathèque de WordPress est fondamentalement mise en plusieurs tailles. Ensuite, les navigateurs choisissent de télécharger l’image qui a une taille appropriée.
De nos jours, avec l’existence de plusieurs écrans HidPI, il est bien possible de trouver le juste milieu. Vous pouvez donc prendre 2x ou 3x la taille de la colonne de votre site. Toutefois, l’image doit toujours avoir une taille inférieure à l’originale. Sur WordPress, par exemple, vous avez la possibilité de fixer une limite à toutes les images téléchargées grâce à Imsanity.
Ces différentes méthodes vous permettent d’optimiser les images de vos sites pour une meilleure performance. Il est important de bien comprendre chaque astuce afin de bien l’utiliser et d’avoir des résultats escomptés.