Cédric Reymbaut
Vous avez besoin de réduire le poids d’une image ? Que ce soit pour l’héberger sur votre site internet et optimiser le SEO ou pour l’envoyer par mail, réduire le poids et la taille d’une image est un besoin courant. Découvrez 11 méthodes pour y parvenir.
Les techniques pour réduire le poids et la taille de vos photos avant mise en ligne
Il ne suffit pas toujours de simplement compresser un fichier. Parfois, il faut modifier son poids, sa taille ou son format pour gagner quelques précieux octets.
1. Choisir le bon format pour les photos : le JPEG
Le format JPEG permet de trouver un bon équilibre entre la taille et la qualité d’une image photographique. Il est particulièrement adapté aux photos et visuels riches en détails.
Attention : pour les images contenant principalement des formes simples, des logos, des icônes ou du texte, un format vectoriel sera souvent plus approprié.
2. Utiliser le PNG pour les images sans perte de qualité
Le format PNG est idéal pour les images nécessitant une excellente qualité visuelle, notamment celles avec des aplats de couleurs, des contours nets ou de la transparence.
Contrairement au JPEG, le PNG permet une compression sans perte de qualité. En revanche, pour des photos très détaillées, ce format peut générer des fichiers plus lourds.
3. Utiliser le format GIF pour les images animées
Le GIF est le format de référence pour intégrer de petites animations sur un site web. Il ne perd aucune information lors de la compression, mais sa palette est limitée à 256 couleurs.
Ce format est donc recommandé pour des images animées simples, de petite taille, et non pour des photographies.
4. Utiliser les formats SVG et WebP pour le web
En plus des formats classiques (JPEG, PNG, GIF), certains formats sont particulièrement adaptés au web :
- SVG : format vectoriel compatible avec tous les navigateurs modernes. Les images SVG sont redimensionnables sans perte de qualité et généralement très légères. Google indexe ce format comme les autres fichiers vectoriels.
- WebP : format développé pour le web, idéal pour les photos. Il permet de réduire significativement le poids des images tout en conservant une excellente qualité visuelle.
Ces formats améliorent nettement le temps de chargement des pages.
5. Compresser les images pour réduire leur poids
Vous pouvez utiliser des outils pour supprimer des données cachées dans vos fichiers et qui n’ont pas d’impact sur la qualité visuelle des images.
Il est cependant nécessaire d’évaluer votre taux de compression. En effet, une compression trop élevée peut dégrader la qualité de vos images.
Il existe deux types de compressions :
- La compression avec perte ou Lossy est un format dans lequel certaines données sont perdues. Vous pouvez largement réduire l’image mais la qualité sera dégradée.
- La compression sans perte ou Lossless permet de réduire une image sans perte de qualité mais convient à des fichiers plus volumineux.
À lire aussi : 14 outils et solutions pour la compression de vos images en ligne
6. Remplacer certaines images par des effets CSS3
Les effets CSS3 (ombres, dégradés, animations) peuvent remplacer certaines images statiques. Ils offrent une résolution indépendante et un rendu très net.
Cette méthode peut réduire le nombre d’images et améliorer la vitesse de chargement, malgré une légère augmentation des fichiers CSS.
7. Remplacer les images de texte par des polices web
Intégrer du texte sous forme d’image nuit à l’expérience utilisateur : le texte ne peut ni être sélectionné ni redimensionné. Les polices web permettent d’utiliser des typographies élégantes tout en conservant un texte accessible, modifiable et plus léger.
À lire aussi : 5 outils gratuits pour créer une webfont personnalisée
8. Supprimer les métadonnées inutiles des images
Savez-vous que de nombreux fichiers contiennent beaucoup de données inutiles ? Il peut s’agir des informations géographiques, d’informations sur l’appareil photo ou encore sur la version du logiciel de retouches photos utilisée…
Supprimer ces données permet de réduire le poids des images sans altérer leur qualité visuelle.
9. Optimiser les images à l’export pour le web
Des logiciels de retouches d’images comme Photoshop vous permettent d’optimiser vos images pour le web. Lorsque vous enregistrez votre image sur le logiciel, l’option “enregistrer pour le web” vous permet de réduire la taille du fichier tout en conservant sa qualité visuelle.
10. Réduire la taille de vos images
Pour réduire le poids de vos images, vous pouvez simplement réduire leurs dimensions. Il vous suffit d’utiliser un logiciel de retouches d’images pour modifier les dimensions du fichier et l’enregistrer sous le format le plus adapté.
11. Regrouper les images avec des sprites CSS
L’utilisation des sprites CSS permet de combiner plusieurs images côte à côte et d’augmenter la vitesse de chargement puisque cette technique réduit le nombre de requêtes. Vous pouvez utiliser cette technique pour les petites images. Elle nécessite cependant la connaissance du langage CSS.
Vous ne maîtrisez pas le CSS mais souhaitez apprendre ? Découvrez 10+ sites pour apprendre le CSS gratuitement.
Réduire le poids et la taille d’une photo : quels sont les avantages concrets ?
Même avec des connexions internet rapides, des images lourdes peuvent ralentir votre site et faire fuir vos visiteurs. Optimiser vos images apporte de nombreux avantages concrets.
Évitez les rebonds à cause du poids des images
Une page web qui se déplace comme une tortue et qui, par conséquent, prend beaucoup de temps à charger, génère un taux de rebond très élevé.
Nous savons déjà que la patience n’est pas notre fort et que les utilisateurs quittent la page lorsqu’ils mettent du temps à accéder au contenu. Et nous ne voulons pas perdre des utilisateurs à cause d’un chargement lent !
Améliorez votre positionnement sur Google
Les moteurs de recherche Google classent les pages d’un site internet en fonction de la vitesse de chargement. Par conséquent, moins les images ont de poids, plus le score du site est élevé et plus nous serons bien positionnés.
Soyez visible sur tous les appareils
La tendance de la navigation se déplace vers les appareils mobiles qui surpassent déjà la navigation sur ordinateur. Mais la vitesse de navigation de ces appareils (3G ou 4G) est inférieure à celle du haut débit ou de la fibre optique. Par conséquent, mettre des images qui pèsent moins lourd aidera le chargement du web sur les téléphones mobiles.
Accélérez le téléchargement des pages
Certains appareils électroniques (appareils photo, téléphones, ordinateurs, etc.) ralentissent le chargement des grandes photos non compressées. Par exemple, il existe des restrictions sur la lecture des données à partir d’un lecteur de CD. Ces lecteurs de CD ne peuvent pas afficher correctement les grandes images. Également et à ce jour, certains services d’hébergement Web exigent des images compressées pour créer des sites Web efficaces qui se chargent plus rapidement que les sites concurrents.
Adaptez les images à chaque écran
Actuellement, les pages Web sont consultées sur plusieurs écrans, tels que les grands moniteurs, les tablettes ou les petits appareils mobiles. Il est conseillé d’utiliser des résolutions d’image différentes pour chaque appareil, pour autant que le programme d’édition ou de mise en page le permette.
Notre astuce pour réduire le poids de vos images
Vous êtes maintenant en mesure de formater toutes vos images pour améliorer la performance de votre site web. N’hésitez pas à investir dans des outils qui vous permettront d’automatiser le processus pour garantir l’optimisation de vos images.
Vous n’êtes pas satisfait de la qualité et du poids de vos visuels ? Postez votre projet graphique sur Codeur.com et recevez les devis de nombreux graphistes freelances, rapidement.
