Alléger ses photos et images pour son site internet

Posté le 01/07/2014 dans la catégorie Images | Aucun commentaire

On pourrait penser aujourd’hui qu’avec les débits internet de plus en plus hauts il n’est pas intéressant d’alléger les photos de son site internet. Et pourtant ce travail d’optimisation des images devrait être un réflexe à avoir pour plusieurs raisons.

Pourquoi alléger ses images pour son site web ?

Tout d’abord tout le monde n’a pas le très haut débit ! Des images trop volumineuses peuvent ralentir considérablement le chargement des pages. Il faut considérer que certains de vos visiteurs n’ont même pas 1 Mbits de débit. Sans parler des mobinautes, ceux qui naviguent depuis leur smartphone, ils n’ont pas toujours la 3G ou la 4G. Qui n’a jamais galéré en Edge dans les transports en commun ! Il faut prendre en compte en plus que la part des internautes sur mobiles est en augmentation constante et cela n’est pas prêt de s’arrêter !

Comme les débits internet, la qualité des images progressent. Les appareils photo numériques et même nos téléphones portables permettent de prendre des photos avec une résolution de plus en plus haute (plusieurs millions de pixels). Résultat, les photos font plusieurs méga octets (Mo), peuvent encombrer l’espace du serveur web et être longues à télécharger et à s’afficher (vous savez ce sont les images qui s’affichent progressivement de haut en bas !).

Enfin une dernière raison valable concerne le confort de navigation. En effet en travaillant bien l’optimisation du poids / qualité de ses images, il est possible de gagner considérablement en temps de chargement de ses pages internet sans pour autant altérer le rendu des photos. Il faut savoir qu’en proposant un site réactif à vos visiteurs, cela leur apportera un confort de navigation et ils seront plus enclin à passer à l’action (vous contacter, acheter un produit…) !

Le petit plus c’est que les moteurs de recherche comme Google apprécient les sites qui se chargent rapidement. N’imaginez pas non plus monter radicalement dans les pages de résultats mais au moins vous partez sur de bonnes bases.

Comment alléger ses photos pour internet ?

Il y a deux grandes opérations à  réaliser pour alléger ses images :

La première est le redimensionnement, appelée également recadrage. Cette étape est celle qui permet de réduire le plus considérablement le poids du fichier. Elle consiste à réduire les largeur et hauteur de l’image. A noter au passage que la résolution utilisée pour l’affichage des images sur internet est 72 dpi (dot per inch) ou en français ppp (pixel par pouce). Prenons l’exemple d’une photo que vous avez prise avec votre appareil qui fait 3 264 pixels par 2 448 pixels (3624 px x 2448 px) pour un poids de 2.42 Mo. Pour vous donner un ordre de grandeur, cette image ferait la taille de 3 fois la largeur d’un site internet classique ! En la recadrant de manière proportionnelle à 500 px x 375 px, on fait passer le poids de l’image à 104 Ko (0,104 Mo) et cela en conservant une bonne qualité pour l’affichage sur internet !

Ensuite, c’est l’étape de la compression, on va appliquer une dégradation à l’image, c’est-à-dire que l’on va réduire les détails de la photo. Il faut bien faire attention dans cette étape à ne pas trop pousser la compression car cela peut vraiment altérer la qualité (l’image va sembler baver au niveau des contours). Si on reprend notre image redimensionnée de 104 Ko et que l’on applique une compression moyenne de 50 %, on obtient un fichier de 54 Ko prête à être intégrée dans notre page internet. Presque 45 fois plus légère que l’originale, cette nouvelle image se chargera donc 45 fois plus vite !

Quel format utiliser pour compresser ses images ?

Il existe en fait 3 principaux formats d’image compressée utilisés sur Internet et qui vous seront proposés par les outils de retouche d’image :

  • Le format jpg ou jpeg prononcé « jipègue » : c’est le plus populaire car il permet un très bon rapport qualité / poids pour l’optimisation des photos.
  • Le format gif qui offre de belles performances pour tous vos visuels avec des couleurs unies (logos, titres, graphiques…) ; vous pouvez choisir le nombre de couleurs (de 2 à 256).
  • Le format png qui ressemble au jpg dans le principe mais qui est en général plus lourd. Il est par contre recommandé pour toutes vos images détourées car il gère la transparence contrairement au jpg qui affichera un fond blanc !

Quels outils / logiciels utiliser pour alléger ses images ?

Il existe de nombreux logiciels et services pour réaliser l’optimisation des images pour les sites internet dont voici une liste non exhaustive :

  • Vous avez déjà Paint sur Windows, certes limité mais il pourra déjà vous dépanner !
  • Sinon il y a bien sûr Adobe Photoshop, le logiciel professionnel  de la retouche photo. Il est évidemment très puissant mais onéreux.
  • Vous pouvez opter pour le logiciel libre et gratuit GIMP sur PC comme sur Mac, qui vous permettra de faire l’essentiel des opérations sur vos images (voir le tutoriel).
  • Si vous ne souhaitez pas installer de logiciels sur votre ordinateur, vous avez la possibilité d’alléger vos visuels directement sur internet comme sur les sites : http://pixlr.com/editor/, http://optimizilla.com/ (en anglais)  ou encore http://www.picresize.com/ (en anglais).

Voilà, vous connaissez désormais les grandes lignes pour optimiser vos images pour votre site internet. A noter quand même que la plupart des CMS comme WordPress génère des vignettes de vos images et conserve l’originale. Autant prendre de bonnes habitudes maintenant, ce sont vos visiteurs et votre serveur web qui apprécieront !

Laisser un commentaire