Par , le 5 décembre 2014

Booster la vitesse de votre site en compressant vos images

Design | Développement | Webdesign | 2

Le problème n’est pas nouveau, les images Haute définition ou « retina » ont une taille 2 fois plus importante que les images normales — ce qui plombe votre bande passante. De plus, les visiteurs veulent une navigation rapide autant sur leur mobile que sur leur desktop. Il ne faut pas oublier que comparés à une connexion ethernet, le wifi ou la 3G sont très lents.

L’optimisation des images est probablement la chose la plus importante pour avoir un réél impact au niveau de la performance de votre site (Avec la concaténation et la minification CSS & JavaScript dans un second temps).

Dans cet article je vous explique pourquoi vous devez alléger votre bande passante, comment optimiser ses images de façon industrielle pour rendre vos utilisateurs heureux.

Utiliser des images vectorielles

Si le confort de navigation de vos visiteurs vous importe, il vous sera impensable de mettre en ligne une image PNG de plus de 500 ko, peu importe le super effet de transparence que vous cherchez à mettre en place sur un visage. Cela dit, il existe des solutions pour chaque type d’effet recherché.

Si votre atmosphère s’inspire du flat design et avec des illustrations en aplat de couleurs il est fortement conseillé d’utiliser du PNG.

Un sprite pour charger ses images plus rapidement

Chez Silicon Salad pour faire face à l’imprévisibilité de l’avenir, nous utilisons des images en SVG pour plusieurs raisons :

  • Les SVG sont faciles à créer avec des logiciels comme Illustrator ou Sketch.
  • Ils sont compatibles avec tous les navigateurs actuels.
  • Ces images sont de facto « responsive » et peuvent s’adapter aux écrans retina facilement.

Utiliser une stratégie pour la compression de vos images

Un délai d’une seconde de chargement équivaut à une perte de 7% des conversions, 11% de pages vues en moins et une baisse de 16% de la satisfaction client.
Source akamaï

Prérequis

Logiciels d’optimisation d’images

Après avoir correctement exporté vos images depuis des logiciels comme Photoshop. Il est possible d’économiser de la bande passante. Ces 3 logiciels permettent de compresser jusqu’à 5 fois vos photos, tout en conservant la qualité originale de vos images.

Terminal & outils

Pour travailler de façon efficace et industrialiser les processus de production, il est conseillé d’utiliser des outils d’automatisation :

En fonction de votre système il existe des solutions pour installer Node & npm en 30 secondes.

Mettre vos images au régime

imageoptim-cli est une solution écrite en shell et appleScript qui permet d’automatiser tout le process :


    imageOptim -j -a -q -d images

Cette simple commande parcourt tout les dossiers contenus dans images, de façon récursive, lance les 3 logiciels d’optimisation et remplace l’image originale.

Dans cet exemple j’ai gagné une compression de 35% sur la totalité des images du site socam-immobilier

image-diet-socam

En conclusion

  • Il est indispensable de compresser correctement vos images
  • Enregistrer vos images pour le web avec une compression d’environ 80% depuis des logiciels comme Photoshop
  • Optimiser vos images avec imageOptim-cli

Si vous souhaitez faire un audit de votre site vous pouvez utiliser le test GTmetrix pour obtenir les résultats de Google Page Spreed et Yahoo Slow. Suite à cela contactez nous pour que nous puissions trouver ensemble des solutions pour augmenter la rapidité de votre site.

Partager l'article :

2 commentaires
  • Super article, avec les bonnes recettes et des exemples techniques … Bravo !

    Mais une question qui intéressera sans doute pas mal de monde : quelles options pour les CMS les plus connus (wordpress notamment) ?

    Existe t-il des plugins ou des solutions plus simples à mettre en oeuvre ?

    Merci d’avance pour votre retour.

    • Bonjour,

      Si vous avez un site internet fonctionnant avec WordPress il est possible d’appliquer mes conseils avant chaque mise en ligne d’images.

      Si vous souhaitez déporter l’optimisation des images coté serveur il existe des solutions :

      http://ewww.io/plans/
      http://www.jpegmini.com/server

      > plus simples à mettre en oeuvre ?

      Je ne vois pas comment faire plus simple, de nos jours créer un site web n’est pas très difficile. Créer un site de qualité et performant est beaucoup plus complexe.

      Dans mon exemple il faut juste avoir des compétences avec un terminal c’est simple non ? 🙂


Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
Eh toi développeur, Vagrant tu connais ?