Les images sont nécessaires pour toutes les sortes de site, que ça soit un site vitrine, un blog ou un site marchand.

Le chargement d’un site web peut être ralenti par des images qui prennent trop de place sur le disque dur, on parle alors de poids de l’image. Il est donc important de savoir optimiser ses images pour rendre le site plus agréable à consulter.

Optimiser les images web sans plugins c’est possible …

Avant d’installer des plugins sur votre site, il y a des méthodes simples à étudier avant de mettre vos images en ligne.

Toutes les manipulations que je vais vous montrer sont possibles sur tous les logiciels de retouches d’images qu’ils soient gratuits ou payants.

Tout au long de ce tutoriel, j’utiliserais le logiciel Gimp, c’est un logiciel libre de retouches d’images très complet qui fonctionne sur toutes les plateformes.

Pour ce tutoriel, j’ai fait une capture de la page d’accueil du site que vous pouvez télécharger ici.

imprim' écran de la page d'accueil

Nous allons tout d’abord regarder les propriétés de notre image : Image > Propriétés de l’image

Propriété page Accueil PNG

Format de l’image

Pour constater les différences de poids entre les divers formats, on peut changer facilement l’extension de l’image. Mon image est en PNG, je vais les transformer en JPG et GIF, qui sont les deux formats les plus couramment utilisés.

Dans la plupart des logiciels il suffit de faire Fichier > Enregistrer sous … mais avec Gimp le changement de format passe par Fichier > Exporter As …, choisissez le nom et l’extension du fichier puis sur valider, ensuite vous verrez une boite de dialogue permettant de définir la qualité de l’image, pour le moment on la met à 100% et on clique sur Exporter.

Comparatif propriétés page Accueil PNG, GIF, JPEG

L’image GIF est la plus légère mais pour continuer mon tutoriel je vais utiliser le format entre le PNG et le GIF, soit le JPEG.

La qualité de l’image

Je vous ai parlé plus haut que l’on pouvait jouer sur la qualité de l’image. Je n’ai pas besoin d’une grande qualité pour mon image à mettre sur Internet, donc je vais la réduire à 50%. Pour le faire, refaites l’étape précédente et dans la boite de dialogue mettez 50.

Exporter image Accueil avec qualité à 50%

Un petit tout dans les propriétés de l’image : Image > Propriétés de l’image

Propriété image Accueil avec 50% de qualité

Intéressant, j’ai divisé le poids de mon image par 6.

La taille de l’image

Pour ajouter mon image sur ma page internet, une largeur de 600 pixels serait sympathique.

Je prends donc mon image .jpg et je la redimensionne : Image > Échelle et taille de l’image.

Modifier la talle de l'image largeur 600

Lorsque je change la largeur de 1519 à 600, la hauteur change proportionnellement, on peut changer les deux valeurs séparément en cliquant sur le lien à droite mais cela déformera l’image.

L’image fait à présent 600 x 304 pixels

Un coup d’œil aux propriétés de l’image.

Propriété image Accueil après redimension à 600 de largeur

Nous avons divisé par 2 le poids de l’image, c’est encore de l’espace disque de gagné par rapport à mon image de départ.

Mais on ne va pas s’arrêter en si bon chemin.

Résolution de l’image

Réduire la résolution de l’image est aussi un bon moyen d’alléger une image. La résolution se calcule en ppp (points par pouce) qui définit le nombre de pixels pour un pouce (2,54 cm).

Donc plus la résolution est grande, plus le nombre de pixels est nombreux et donc plus l’image est fine.

La résolution idéale pour une image sur Internet est de 72 ppp. Mon image étant déjà de cette résolution ça ne sert à rien que je la réduise, mais si la résolution de votre image est plus grande, pensez à la mettre à 72 ppp, vous gagnerez quelques kilo octets.

Mais nous avons encore d’autre moyen de réduire le poids de notre image.

La postérisation

J’ai découvert cette méthode récemment, et je dois dire que je la trouve très utile.

La postérisation est une méthode qui permet de réduire le nombre de couleurs. Si je fais une postérisation à 3 par exemple cela signifie que je laisse 3 couleurs à chaque canaux rouge, vert et bleu, soit 3x3x3=27 couleurs. Pour faire une postérisation, c’est dans le menu Couleurs > Postériser …

J’ai décidé de mettre à 60 pour garder un bon rendu. Ce qui est pratique c’est qu’on peut avoir un aperçu direct, ce qui permet de voir quelle postérisation choisir.

Voilà le résultat

Image Accueil après postérisation à 10

L’image est sympa n’est-ce pas ?

Un petit tour dans les propriétés.

Propriété image Accueil après postérisation à 10

Ah il y a tout de même un peu d’amélioration au niveau du poids.

Pour résumé, en 4 étapes, mon image a perdu 870ko. Ce résultat est très intéressant et votre page en sera clairement allégé.

Conclusion

Bien sûr, il y a d’autres façons de réduire le poids d’une image, mais le résultat de ce tutoriel est déjà très probant.

Pour avoir une image optimisée pour le web, il faut qu’elle soit au format JPEG avec une résolution de 72 x 72 pixels. Pensez aussi à réduire l’image, ça ne sert à rien d’héberger sur votre site une image de 2 000 x 2000 pixels, votre navigateur internet va automatiquement la réduire pour pouvoir l’afficher et donc c’est de l’espace et du temps de chargement pris pour rien.

Le format de l’image dépend du but de votre site. Pour les icônes, les images de faible qualité avec gestion de la transparence, privilégiez le GIF. Si vous avez besoin de gérer un contenu de qualité avec gestion de la transparence, utilisez le PNG. Le JPEG gère les images de grande qualité et il a un faible taux de compression. Le JPEG reste un format d’image très utilisé notamment pour le contenu web.

Si malgré toutes les méthodes présentées, vous trouvez vos images internet trop lourdes, n’hésitez pas à passer par des plugins. J’ai écrit un article pour vous présenter 7 plugins WordPress incontournables pour optimiser vos images.

 

Le tutoriel marche pour vous ? Vous rencontrez des problèmes ?

D’autres méthodes pour réduire le poids d’une image ? Dites-le nous.

Enregistrer

Enregistrer

Enregistrer

Enregistrer