Réduisez le poids de vos images avant de les intégrer à votre site web !

Si vous souhaitez optimiser les performances de votre site web, réduire la taille des images peut s’avérer être une pratique concluante. Un site performant vous permet de « gagner » sur 2 tableaux :

• Il sera apprécié des internautes car la navigation sera plus facile et plus rapide. Si votre site n’a pas fini de charger au bout de 10 secondes, sachez que vous perdez un internaute sur 2.
• Autre élément déterminant : Google pénalise les sites trop lourds. Un site performant vous permettra donc d’apparaitre en haut des pages de résultats. 2 chiffres intéressants : 95% des internautes ne regardent que la première page Google, et la première position en haut de page sur la page de résultat de Google récolte un taux de clic d’environ 35% (source : hubspot).

C’est dire l’enjeu du poids de vos pages web !

Méthode pour réduire le poids de vos images

Pour réduire au maximum le poids de vos images, nul besoin de connaissances en html/css ou d’être un pro de Photoshop… Voici la méthode :

Il faut redimensionner ou rogner l’image et ensuite la compresser. Votre objectif : qu’elle pèse moins de 200Ko.

Si vous êtes sur PC, vous allez utiliser un logiciel comme Paint ou Microsoft Photo Editor. Si vous êtes sur MAC, vous allez utiliser Preview. Et pour les mieux équipés d’entre vous, vous pouvez le faire sur Photshop, évidemment !

Petit rappel des formats adaptés aux usages web :

Si votre image est une photo sans texte, choisissez le format JPG. Les images en JPG sont généralement moins lourdes que les PNG.

S’il s’agit d’une image avec du texte ou des éléments transparents, alors il faut mieux utiliser le format PNG.

Le format GIF est parfait pour les images animées et les illustrations simples.

NOUVEAU : Le format WebP est un format d’image de nouvelle génération, créé par Google. Plus léger que les jpg ou les png, le format webP augmente la vitesse de chargement d’un site, permet d’économiser de la bande passante et optimise le SEO. Autre avantage : le WebP prend en charge les images transparentes et animées.

Etape 1 : redimensionner l’image

Quand vous téléchargez une photo en haute définition sur Fokkus ou sur une autre banque d’images, vous obtenez des images qui font en moyenne 15 ou 20 Mo. Elles mesurent 4000px minimum. Ces grandes dimensions sont intéressantes si vous réalisez un support à imprimer. Mais si votre seul usage est le web, choisissez le « petit format », qui mesure environ 1300 pixel. Vous pouvez encore en diminuer la taille : demandez à votre développeur web de vous fournir les dimensions optimales. Indiquez la largeur souhaitée et votre logiciel calculera la hauteur automatiquement en fonction du ratio largeur / hauteur de la photo originale.

Etape 2 : compresser l’image

TinyPNG est un site web qui permet de compresser à la fois des images JPG et PNG gratuitement. Chaque image doit peser 5 Mo au maximum, d’où la nécessité de redimensionner vos images avant de les compresser.

Pour convertir un jpg ou un png en WebP, vous pouvez utiliser le site tinywow.com. La taille finale de votre fichier sera toute petite, tout en conservant une belle qualité.

Evidemment, veillez à ce que la qualité de votre photo ne soit pas trop dégradée tout au long de ces 2 étapes. L’image idéale est celle dont la qualité est acceptable et qui charge rapidement, à vous de trouver le bon équilibre.