Comment réduire la taille et le poids d’une image

Les images sont un élément essentiel de nombreux sites web et documents numériques, mais elles peuvent aussi être la cause d'un temps de chargement lent et d'une utilisation excessive de la bande passante. Réduire la taille et le poids de vos images est donc primordial pour optimiser l'expérience utilisateur et améliorer les performances de votre contenu. Heureusement, plusieurs techniques simples permettent d'atteindre cet objectif sans sacrifier la qualité visuelle de vos images.

Utiliser un outil de compression d'images

De nombreux outils en ligne et logiciels gratuits permettent de compresser efficacement vos images, toutefois un en particulier offre une vitesse de compression nettement significative par rapport aux autres outils, en particulier lorsqu'il faut redimensionner les images, et il est totalement gratuit (et sans pubs!)

Démonstration

Nous allons utiliser l'outil pinga, qui est disponible gratuitement. Il est capable d'optimiser les images, et de larges images simultanément en moins d'une seconde:

Sur l'interface principale de pinga, cliquez sur settings

Cochez l'option limit max width / height (resize) to puis cliquez sur save

Glissez-déposez vos images dans pinga et cliquez sur optimize

En 0.812s, l'outil a économisé plus de 120 MB sur les photos!

• Les images ont été correctement redimensionnées avec une largeur de 1920 pixels ;
• Les images ont été optimisées.

Autres outils

• Outils en ligne: des sites comme TinyPNG, Optimizilla ou ImageOptim offrent une interface simple et intuitive pour compresser vos images en quelques clics. Ils utilisent des algorithmes sophistiqués pour réduire la taille du fichier sans perte de qualité visible.
• Logiciels: des logiciels comme pinga, Adobe Photoshop, GIMP ou XnView permettent également de compresser les images, en offrant un contrôle plus précis sur les paramètres de compression.

Choisir le format d'image adapté

Le format de votre image a un impact direct sur sa taille et son poids.

• JPEG: idéal pour les photos et images avec beaucoup de couleurs et de détails. Offre un bon compromis entre qualité et taille de fichier.
• PNG: plus adapté aux images avec des zones de couleur unie, des logos ou des graphiques. Offre une meilleure qualité pour les images avec du texte ou des détails fins.
• WebP: un format plus récent développé par Google, qui va chercher une qualité proche de JPEG (et même meilleure à basse qualité), mais avec un support chromatique plus limité à 4:2:0 seulement. Il surpasse toutefois PNG dans tous les cas d'utilisation. Il possède un encodage sans pertes très efficace sur les images où PNG est généralement souhaitable.
• AVIF: le format AVIF est certainement le plus efficace, même s'il ne supporte pas l'affichage progressif. Il a la capacité de générer les fichiers qui occupent le moins d'espace, tout en conservant une bonne qualité. Il est moins efficace sur les images qui se stockent mieux avec le WebP sans pertes.

Ajuster la résolution et la taille de l'image

• Résolution: réduire la résolution de l'image, exprimée en pixels (px), permet de diminuer sa taille. Il est important de trouver un équilibre entre la qualité et la taille du fichier.
• Dimensions: adapter la taille de l'image à son utilisation. Si vous insérez une image sur un site web, il est inutile de conserver une image de très haute résolution qui sera ensuite redimensionnée.

Si vous avez utilisé la manipulation illlustrée ci-dessus avec pinga, la définition de votre image a été fixée à 1920 pixels sur la largeur ou la hauteur, selon le facteur qui était le plus grand à l'origine. Dans le cas où l'image était déjà de plus faible définition, elle a tout de même été optimisée.

Supprimer les métadonnées inutiles

Les images contiennent souvent des métadonnées, comme des informations sur l'appareil photo utilisé ou la date de prise de vue. Ces données augmentent la taille du fichier sans être nécessaires pour l'affichage de l'image. Des outils comme ExifTool permettent de supprimer ces métadonnées superflues.

Si vous avez utilisé la manipulation illlustrée ci-dessus avec pinga, celui-ci a supprimé toutes les metadonnées inutiles de votre image.

Optimiser les images (HTML)

• Utilisation de l'attribut srcset dans HTML permet d'afficher automatiquement la version de l'image la plus adaptée à l'appareil de l'utilisateur.
• L'attribut loading="lazy" permet de charger les images uniquement lorsqu'elles sont visibles à l'écran.

Réduire la taille et le poids de vos images est une étape essentielle pour optimiser le chargement de vos pages web et améliorer l'expérience utilisateur. En utilisant les techniques décrites ci-dessus, vous pouvez facilement réduire la taille de vos images sans compromettre leur qualité visuelle. N'hésitez pas à expérimenter les différents outils et techniques pour trouver la solution la plus adaptée à vos besoins.