Les images représentent habituellement de 60% à 70% du poids d’une page web. Leur optimisation est donc recommandée tant pour vos visiteurs (ils seront moins tentés de quitter votre site s’il est rapide) que pour votre référencement (l’algorithme de Google tient compte de la vitesse de chargement d’un site).

Indispensable compression

L’augmentation du nombre de pixels des photos numériques a un impact direct sur le poids de leurs fichiers. Or, sur un site, plus une photo pèse lourd, plus elle se charge lentement. Car si vous téléchargez telles quelles vos photos sur votre site, elles seront probablement automatiquement redimensionnées mais leur poids restera identique. Vous aurez donc une page très lourde qui s’affichera plus lentement, ce qui risque de faire fuir une partie de vos visiteurs.

La compression rendra vos photos beaucoup plus légères en supprimant des données inutiles ou redondantes, tout en conservant une qualité acceptable pour le web. Attention toutefois à ne pas trop pousser la compression car des images pixélisées renvoient une impression peu professionnelle. Il faut donc trouver le juste équilibre entre la qualité du rendu et la performance web.

Bon à savoir

Veillez à télécharger sur votre site des images qui ont les dimensions requises. Dans bien des cas, les mêmes images sont affichées sur différentes pages d’un même site, avec des tailles différentes. C’est particulièrement vrai dans le cas d’un e-shop, où la même photo apparaît comme vignette dans la fiche produit, en plus grand dans les vues de détails, etc.  Que faire ?  La solution consiste à exécuter une optimisation automatique directement sur le dossier où les images finales sont stockées. Mieux vaut dans ce cas intégrer un outil dédié directement dans votre CMS.

Différents niveaux de compression

Encore une précision avant de vous présenter ma sélection d’outils : il existe plusieurs techniques de compression d’image, avec ou sans perte de qualité. Si vous n’êtes pas familier avec les termes lossy ou lossless , il est important que vous en compreniez bien le sens.

  • lossy ou compression avec perte
    Dans une compression lossy, une partie des données du fichier original est perdue. Cette technique de compression analyse l’image originale et regroupe les couleurs similaires afin de réduire les données qui composent l’image, tout en conservant son aspect général. L’avantage évident de cette méthode est que la taille du fichier après compression est réduite de manière significative. L’inconvénient, c’est que plus vous augmentez le degré de compression, plus la qualité de l’image se dégrade. De plus, il n’y a pas de retour en arrière possible car le processus est irréversible (mieux vaut donc sauvegarder votre image originale).
  • lossless ou compression sans perte
    Cette fois l’image est réduite (mais nettement moins) sans aucune perte de qualité. Cela se fait par la suppression des métadonnées inutiles pour le web (quel appareil photo a été utilisé, quel objectif, quelle distance focale, etc.) mais on ne touche pas à la couleur.

Quel outil utiliser

Pas besoin de maîtriser Photoshop, il existe de nombreux sites proposant des outils en ligne gratuits qui permettent de compresser n’importe quelle image avec ou sans perte de qualité. Parmi les outils proposés, à vous de tester celui dont les fonctionnalités répondent le mieux à vos besoins. Dans certains cas, il y aura limitation de taille ou du nombre d’images à télécharger par mois. Pour les gros utilisateurs, il sera sans doute judicieux de passer à une version payante. Par contre, si votre site tourne sous WordPress ou un autre CMS reconnu, optez sans hésiter pour un plugin dédié.

imagify

Je commence par l’outil le plus récent, Imagify.io, dont l’efficacité est saluée par de nombreux internautes (voir la comparaison avec Kraken.io ici et l’analyse de l’extension WordPress ici). Imagify propose une version d’essai gratuite pour tester l’outil. L’interface est vraiment moderne et agréable ; il suffit de glisser/coller les images à compresser, de choisir un niveau de compression et le tour est joué.

Caractéristiques

  • 3 modes d’optimisation : normal (= lossless) | agressif (= lossy)| ultra.
  • 3 types de fichiers : JPG, PNG, GIF
  • Les images optimisées restent disponibles 24h.
  • Possibilité de redimensionner des images à la volée
  • Vous pouvez spécifier une hauteur, une largeur à respecter, ou plus simplement, un pourcentage.
  • Extension WordPress gratuite

Inconvénient

  • Taille maximum des images : 2Mb et 25 Mb de téléchargement par mois

Version Pro

  • Les prix varient entre 4,99$ et 69,99$/mois en fonction du volume d’images par mois (cela reste très raisonnable).
  • Pas de taille limite pour les images à télécharger
  • Possibilité de redimensionner à partir de son CMS pour avoir la taille optimale en fonction de l’endroit où s’intègre le visuel
  • Connecteur API

kraken-io

Kraken.io existe depuis un certain temps et est utilisé et apprécié par de nombreux blogueurs et web designers.

Caractéristiques

  • La version gratuite allège le fichier mais ne permet pas de le redimensionner ou de changer de format
  • Supporte presque tous les formats d’image possibles comme JPEG, PNG, GIF et SVG
  • 3 modes d’optimisation : LOSSY, LOSSLESS et EXPERT.
  • Conserve en option certaines données comme le copyright
  • Fichiers à télécharger à partir de son ordinateur, dropbox etc.

Inconvénient :

  • Taille maximum pour la version gratuite : 1Mb
  • Pas de possibilité d’optimiser en vrac au niveau du plugin WordPress

Version Pro :

  • Les prix varient entre 5$ et 79$/mois (en fonction du volume d’images/mois).
  • Taille des images à optimiser jusque 32 Mb/chacune
  • Images à télécharger à partir de son ordinateur, d’une url, d’un fichier zip, de dropbox etc.
  • La version Pro permet aussi de redimensionner les images.
  • Statistiques d’optimisation,
  • Plugin WordPress (présenté dans cet article) et extension Magento
  • Stockage sécurisé dans le cloud.

imagerecycle-jpeg

Tout comme Kraken et Imagify, ImageRecycle se propose d’optimiser les images de votre site. Son interface est sobre et surtout très rapide.
Il suffit de créer un compte pour pouvoir le tester gratuitement pendant 15 jours.

Caractéristiques

  • Prend en charge les fichiers JPG, PNG, GIF mais aussi le format PDF
  • l’algorithme détermine automatiquement le niveau de compression optimal en maintenant la même qualité visuelle.
  • les fichiers originaux peuvent être restaurés à tout moment dans leur version d’origine (si vous êtes abonné)
  • Extensions et applications pour WordPress, Joomla, Magento et Shopify
  • une API est disponible

Inconvénient

  • Limité à 100 Mb pour le test gratuit de 15 jours

Version Pro

  • tarification progressive : 10, 20 ou 50$ par mois en fonction du nombre de fichiers à traiter (10, 30 ou 100.000 images ou encore 1, 3 ou 10 Gb).
  • abonnement mensuel (que l’on peut arrêter quand on veut) ou annuel
  • un mois de backup/restauration

tinypng

C’est l’un des sites les plus anciens pour la compression d’images en ligne. Tinypng a la réputation de générer les meilleures images compressées sans aucune dégradation de l’image visible. Tinypng propose également un plugin WordPress et une extension Magento.

Caractéristiques

  • TinyPNG utilise des techniques de compression intelligentes
  • 2 types de fichiers supportés : PNG ou JPG
  • Compression de PNG animés depuis 2016 (version beta)
  • Possibilité de convertir les images CMJN en RVB
  • Téléchargement jusqu’à 20 images en batch (par glisser/coller)
  • plugin WordPress & Magento
  • l’API TinyJPG permet d’automatiser la compression d’images (prix selon volume)

Inconvénients :

  • Taille maximum par image : 5 Mo
  • Les premières 500 images par mois sont gratuites.
  • TinyPNG est seulement un système de compression avec perte, il ne fournit aucun type de compression sans perte.

compressor-io

Compressor.io permet de réduire de manière drastique le poids de vos photos, presque sans impact sur la qualité de vos photos. Même s’il offre moins de possibilités que les outils précédents, ce site est intéressant en cas d’utilisation moins intensive. La compression manuelle d’une image est rapide et efficace.

Caractéristiques :

  • Peut réduire le poids d’une image jusqu’à 90%
  • 2 types de compression : lossless ou lossy
  • 4 formats différents supportés : JPEG – PNG – GIF & SVG
  • Export sur ordi, dropbox ou Google Drive

Inconvénients

  • Pas de traitement batch
  • Limite de taille de fichier : 10 Mo

jpegmini

JPEGmini permet de réduire la taille du fichier de photos JPEG jusqu’à 5x, tout en préservant la résolution et la qualité des photos originales. C’est un des meilleurs en termes de ratio gain obtenu/qualité. Dans sa version Pro il s’intègre à Photoshop

Caractéristiques

  • Facile à utiliser par glisser/coller des fichiers à optimiser
  • Version Mac disponible sur le Mac App Store et limitée à 20 photos par jour
  • Disponible pour Mac ou Windows, en version Lite (gratuite), Pro ou Server.
  • Les métadonnées EXIF de la photo d’origine sont conservées mais il est possible de supprimer les métadonnées pour réduire davantage la taille du fichier de sortie.
  • Redimensionner les photos soit en utilisant les tailles pré-configurées soit en indiquant des tailles personnalisées.
  • logiciel à télécharger

Version Pro

  • Prix : 94€
  • Permet de télécharger des photos jusque 60 Mb et va jusque 8x plus vite
  • Plugin pour Adobe Lightroom et Photoshop